/*=====================================================================
                THE ROYAL GYM
                ANIMATIONS.CSS
                    PART 1
        Base Animation Library
======================================================================*/


/*==========================================================
GLOBAL ANIMATION VARIABLES
==========================================================*/

:root{

--animation-fast:.3s;
--animation-normal:.6s;
--animation-slow:1s;

--ease:cubic-bezier(.4,0,.2,1);

}


/*==========================================================
DEFAULT TRANSITIONS
==========================================================*/

a,
button,
.btn,
.card,
.gallery-item,
img,
.navbar,
.nav-link{

transition:

all var(--animation-normal)

var(--ease);

}


/*==========================================================
FADE IN
==========================================================*/

.fade-in{

animation:

fadeIn .8s ease forwards;

}

@keyframes fadeIn{

0%{

opacity:0;

}

100%{

opacity:1;

}

}


/*==========================================================
FADE UP
==========================================================*/

.fade-up{

opacity:0;

animation:

fadeUp 1s ease forwards;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:

translateY(45px);

}

100%{

opacity:1;

transform:

translateY(0);

}

}


/*==========================================================
FADE DOWN
==========================================================*/

.fade-down{

opacity:0;

animation:

fadeDown 1s ease forwards;

}

@keyframes fadeDown{

0%{

opacity:0;

transform:

translateY(-45px);

}

100%{

opacity:1;

transform:

translateY(0);

}

}


/*==========================================================
FADE LEFT
==========================================================*/

.fade-left{

opacity:0;

animation:

fadeLeft 1s ease forwards;

}

@keyframes fadeLeft{

0%{

opacity:0;

transform:

translateX(-60px);

}

100%{

opacity:1;

transform:

translateX(0);

}

}


/*==========================================================
FADE RIGHT
==========================================================*/

.fade-right{

opacity:0;

animation:

fadeRight 1s ease forwards;

}

@keyframes fadeRight{

0%{

opacity:0;

transform:

translateX(60px);

}

100%{

opacity:1;

transform:

translateX(0);

}

}


/*==========================================================
ZOOM IN
==========================================================*/

.zoom-in{

animation:

zoomIn .8s ease forwards;

}

@keyframes zoomIn{

0%{

opacity:0;

transform:

scale(.75);

}

100%{

opacity:1;

transform:

scale(1);

}

}


/*==========================================================
ZOOM OUT
==========================================================*/

.zoom-out{

animation:

zoomOut .8s ease forwards;

}

@keyframes zoomOut{

0%{

opacity:0;

transform:

scale(1.25);

}

100%{

opacity:1;

transform:

scale(1);

}

}


/*==========================================================
ROTATE IN
==========================================================*/

.rotate-in{

animation:

rotateIn .9s ease forwards;

}

@keyframes rotateIn{

0%{

opacity:0;

transform:

rotate(-20deg)

scale(.8);

}

100%{

opacity:1;

transform:

rotate(0)

scale(1);

}

}


/*==========================================================
SLIDE UP
==========================================================*/

.slide-up{

animation:

slideUp .9s ease forwards;

}

@keyframes slideUp{

0%{

transform:

translateY(100%);

opacity:0;

}

100%{

transform:

translateY(0);

opacity:1;

}

}


/*==========================================================
SLIDE DOWN
==========================================================*/

.slide-down{

animation:

slideDown .9s ease forwards;

}

@keyframes slideDown{

0%{

transform:

translateY(-100%);

opacity:0;

}

100%{

transform:

translateY(0);

opacity:1;

}

}


/*==========================================================
FLOATING
==========================================================*/

.float{

animation:

floating 5s ease-in-out infinite;

}

@keyframes floating{

0%,100%{

transform:

translateY(0);

}

50%{

transform:

translateY(-16px);

}

}


/*==========================================================
PULSE
==========================================================*/

.pulse{

animation:

pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:

scale(1);

}

50%{

transform:

scale(1.06);

}

100%{

transform:

scale(1);

}

}


/*==========================================================
GLOW
==========================================================*/

.glow{

animation:

glow 2.5s infinite;

}

@keyframes glow{

0%,100%{

box-shadow:

0 0 12px rgba(212,175,55,.2);

}

50%{

box-shadow:

0 0 40px rgba(212,175,55,.55);

}

}


/*==========================================================
BOUNCE
==========================================================*/

.bounce{

animation:

bounce 2s infinite;

}

@keyframes bounce{

0%,100%{

transform:

translateY(0);

}

50%{

transform:

translateY(-10px);

}

}


/*==========================================================
SHAKE
==========================================================*/

.shake:hover{

animation:

shake .5s;

}

@keyframes shake{

0%{transform:translateX(0);}
20%{transform:translateX(-5px);}
40%{transform:translateX(5px);}
60%{transform:translateX(-5px);}
80%{transform:translateX(5px);}
100%{transform:translateX(0);}

}


/*==========================================================
ROTATE HOVER
==========================================================*/

.rotate-hover:hover{

transform:

rotate(6deg)

scale(1.03);

}


/*==========================================================
SCALE HOVER
==========================================================*/

.scale-hover{

transition:.4s;

}

.scale-hover:hover{

transform:

scale(1.05);

}


/*==========================================================
IMAGE ZOOM
==========================================================*/

.img-hover{

overflow:hidden;

}

.img-hover img{

transition:1s;

}

.img-hover:hover img{

transform:

scale(1.12);

}


/*==========================================================
STAGGER DELAYS
==========================================================*/

.delay-1{

animation-delay:.2s;

}

.delay-2{

animation-delay:.4s;

}

.delay-3{

animation-delay:.6s;

}

.delay-4{

animation-delay:.8s;

}

.delay-5{

animation-delay:1s;

}


/*==========================================================
SMOOTH SCROLL APPEARANCE
==========================================================*/

.reveal{

opacity:0;

transform:

translateY(40px);

transition:

1s ease;

}

.reveal.active{

opacity:1;

transform:

translateY(0);

}


/*==========================================================
PERFORMANCE
==========================================================*/

.fade-up,
.fade-down,
.fade-left,
.fade-right,
.zoom-in,
.zoom-out,
.float,
.card,
.gallery-item{

will-change:

transform,
opacity;

backface-visibility:hidden;

}
/*=====================================================================
                ANIMATIONS.CSS
                    PART 2
        HERO • NAVBAR • BACKGROUND EFFECTS
======================================================================*/


/*==========================================================
HERO CONTENT ENTRANCE
==========================================================*/

.hero-subtitle{
animation:heroSubtitle .8s ease forwards;
}

.hero-title{
opacity:0;
animation:heroTitle 1s ease forwards;
animation-delay:.2s;
}

.hero-text{
opacity:0;
animation:heroText 1s ease forwards;
animation-delay:.5s;
}

.hero-btns{
opacity:0;
animation:heroButtons 1s ease forwards;
animation-delay:.8s;
}

.hero-stats{
opacity:0;
animation:heroStats 1s ease forwards;
animation-delay:1.1s;
}

.hero-image{
opacity:0;
animation:heroImage 1.2s ease forwards;
animation-delay:.5s;
}


/*==========================================================
KEYFRAMES
==========================================================*/

@keyframes heroSubtitle{

0%{

opacity:0;

transform:
translateY(-25px);

}

100%{

opacity:1;

transform:
translateY(0);

}

}

@keyframes heroTitle{

0%{

opacity:0;

transform:
translateY(60px);

}

100%{

opacity:1;

transform:
translateY(0);

}

}

@keyframes heroText{

0%{

opacity:0;

transform:
translateY(35px);

}

100%{

opacity:1;

transform:
translateY(0);

}

}

@keyframes heroButtons{

0%{

opacity:0;

transform:
translateY(30px);

}

100%{

opacity:1;

transform:
translateY(0);

}

}

@keyframes heroStats{

0%{

opacity:0;

transform:
translateY(45px);

}

100%{

opacity:1;

transform:
translateY(0);

}

}

@keyframes heroImage{

0%{

opacity:0;

transform:
translateX(80px)
scale(.9);

}

100%{

opacity:1;

transform:
translateX(0)
scale(1);

}

}


/*==========================================================
FLOATING IMAGE
==========================================================*/

.hero-image img{

animation:

heroFloat 6s ease-in-out infinite;

}

@keyframes heroFloat{

0%,100%{

transform:

translateY(0);

}

25%{

transform:

translateY(-10px);

}

50%{

transform:

translateY(-18px);

}

75%{

transform:

translateY(-8px);

}

}


/*==========================================================
BACKGROUND GLOW
==========================================================*/

.hero::before{

animation:

backgroundGlow 10s ease-in-out infinite;

}

@keyframes backgroundGlow{

0%,100%{

opacity:.5;

transform:scale(1);

}

50%{

opacity:.9;

transform:scale(1.15);

}

}


/*==========================================================
MOVING GRADIENT
==========================================================*/

.hero{

background-size:200% 200%;

animation:

gradientMove 12s ease infinite;

}

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}


/*==========================================================
SCROLL INDICATOR
==========================================================*/

.scroll-indicator{

animation:

scrollBounce 2s infinite;

}

@keyframes scrollBounce{

0%,100%{

transform:

translateX(-50%)
translateY(0);

}

50%{

transform:

translateX(-50%)
translateY(-8px);

}

}


/*==========================================================
HERO BUTTON HOVER
==========================================================*/

.hero-btn-primary:hover,
.hero-btn-outline:hover{

animation:

buttonLift .4s forwards;

}

@keyframes buttonLift{

0%{

transform:translateY(0);

}

100%{

transform:
translateY(-6px)
scale(1.03);

}

}


/*==========================================================
NAVBAR APPEAR
==========================================================*/

.navbar{

animation:

navbarDrop .9s ease;

}

@keyframes navbarDrop{

0%{

opacity:0;

transform:

translateY(-100%);

}

100%{

opacity:1;

transform:

translateY(0);

}

}


/*==========================================================
LOGO GLOW
==========================================================*/

.navbar-brand:hover{

animation:

logoGlow 1.5s infinite;

}

@keyframes logoGlow{

0%,100%{

text-shadow:

0 0 8px rgba(212,175,55,.25);

}

50%{

text-shadow:

0 0 25px rgba(212,175,55,.65);

}

}


/*==========================================================
NAV LINKS
==========================================================*/

.navbar-nav .nav-link{

position:relative;

overflow:hidden;

}

.navbar-nav .nav-link::before{

content:"";

position:absolute;

left:-100%;

bottom:0;

width:100%;
height:2px;

background:

linear-gradient(
90deg,
var(--gold),
var(--cyan)
);

transition:.4s;

}

.navbar-nav .nav-link:hover::before{

left:0;

}


/*==========================================================
TEXT SHIMMER
==========================================================*/

.text-shimmer{

background:

linear-gradient(
90deg,
var(--gold),
#ffffff,
var(--gold)
);

background-size:200% auto;

background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

animation:

textShimmer 4s linear infinite;

}

@keyframes textShimmer{

0%{

background-position:-200% center;

}

100%{

background-position:200% center;

}

}


/*==========================================================
STAT CARD HOVER
==========================================================*/

.hero-stat{

transition:.4s;

}

.hero-stat:hover{

transform:
translateY(-10px);

box-shadow:

0 20px 40px rgba(0,217,255,.20);

}


/*==========================================================
ICON FLOAT
==========================================================*/

.icon-float{

animation:

iconFloat 3s ease-in-out infinite;

}

@keyframes iconFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}


/*==========================================================
GLOW CIRCLE
==========================================================*/

.glow-circle{

position:absolute;

border-radius:50%;

filter:blur(40px);

animation:

circlePulse 8s infinite ease-in-out;

}

@keyframes circlePulse{

0%,100%{

transform:scale(1);

opacity:.4;

}

50%{

transform:scale(1.3);

opacity:.8;

}

}


/*==========================================================
PERFORMANCE
==========================================================*/

.hero,
.hero-image,
.hero-title,
.hero-text,
.hero-btns,
.hero-stat{

will-change:

transform,
opacity;

}
/*=====================================================================
                ANIMATIONS.CSS
                    PART 3
        CARDS • GALLERY • BUTTONS • INTERACTIONS
======================================================================*/


/*==========================================================
PREMIUM CARD HOVER
==========================================================*/

.card,
.facility-card,
.membership-card,
.trainer-card,
.review-card,
.branch-card,
.nutrition-card,
.transformation-card{

transition:
transform .45s cubic-bezier(.4,0,.2,1),
box-shadow .45s ease,
border-color .45s ease;

}

.card:hover,
.facility-card:hover,
.membership-card:hover,
.trainer-card:hover,
.review-card:hover,
.branch-card:hover,
.nutrition-card:hover,
.transformation-card:hover{

transform:
translateY(-12px);

box-shadow:
0 30px 70px rgba(0,0,0,.35);

}


/*==========================================================
CARD BORDER ANIMATION
==========================================================*/

.card::before,
.facility-card::before,
.membership-card::before,
.trainer-card::before,
.review-card::before{

content:"";

position:absolute;

left:0;
top:0;

width:100%;
height:4px;

background:

linear-gradient(
90deg,
var(--gold),
var(--cyan)
);

transform:scaleX(0);

transform-origin:left;

transition:.5s;

}

.card:hover::before,
.facility-card:hover::before,
.membership-card:hover::before,
.trainer-card:hover::before,
.review-card:hover::before{

transform:scaleX(1);

}


/*==========================================================
ICON ANIMATION
==========================================================*/

.card i,
.facility-card i,
.membership-card i,
.trainer-card i{

transition:.45s;

}

.card:hover i,
.facility-card:hover i,
.membership-card:hover i,
.trainer-card:hover i{

transform:
scale(1.2)
rotateY(180deg);

color:var(--cyan);

}


/*==========================================================
IMAGE ZOOM
==========================================================*/

.card img,
.gallery-item img,
.trainer-card img{

transition:1s;

}

.card:hover img,
.gallery-item:hover img,
.trainer-card:hover img{

transform:scale(1.08);

}


/*==========================================================
GALLERY OVERLAY
==========================================================*/

.gallery-overlay{

opacity:0;

transform:

translateY(30px);

transition:.45s;

}

.gallery-item:hover .gallery-overlay{

opacity:1;

transform:

translateY(0);

}


/*==========================================================
GALLERY ICON
==========================================================*/

.gallery-icon{

transition:.45s;

transform:

translate(-50%,-50%)

scale(.6);

opacity:0;

}

.gallery-item:hover .gallery-icon{

opacity:1;

transform:

translate(-50%,-50%)

scale(1);

}


/*==========================================================
BUTTON SHINE
==========================================================*/

.btn{

overflow:hidden;

position:relative;

}

.btn::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:40%;
height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.5),
transparent
);

transform:skewX(-20deg);

transition:.7s;

}

.btn:hover::before{

left:150%;

}


/*==========================================================
BUTTON PRESS
==========================================================*/

.btn:active{

transform:

scale(.96);

}


/*==========================================================
TRAINER SOCIAL ICONS
==========================================================*/

.trainer-social a{

transition:.45s;

}

.trainer-social a:hover{

transform:

translateY(-8px)

rotate(360deg);

}


/*==========================================================
TRAINER IMAGE
==========================================================*/

.trainer-card:hover img{

filter:

brightness(110%)

contrast(105%);

}


/*==========================================================
MEMBERSHIP CARD
==========================================================*/

.membership-card{

transition:.45s;

}

.membership-card:hover{

transform:

translateY(-15px)

scale(1.02);

}


/*==========================================================
POPULAR PLAN
==========================================================*/

.popular{

animation:

premiumGlow 2.5s infinite;

}

@keyframes premiumGlow{

0%,100%{

box-shadow:

0 0 18px rgba(212,175,55,.2);

}

50%{

box-shadow:

0 0 45px rgba(212,175,55,.45);

}

}


/*==========================================================
REVIEW CARD
==========================================================*/

.review-card{

transition:.45s;

}

.review-card:hover{

transform:

translateY(-10px);

}


/*==========================================================
STAR ANIMATION
==========================================================*/

.rating i{

display:inline-block;

transition:.3s;

}

.review-card:hover .rating i{

animation:

starBounce .5s ease;

}

@keyframes starBounce{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}


/*==========================================================
IMAGE SHINE
==========================================================*/

.image-shine{

position:relative;

overflow:hidden;

}

.image-shine::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:60%;
height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.25),
transparent
);

transform:skewX(-20deg);

transition:.8s;

}

.image-shine:hover::before{

left:150%;

}


/*==========================================================
GALLERY FILTER BUTTONS
==========================================================*/

.gallery-filter button{

transition:.35s;

}

.gallery-filter button:hover{

transform:

translateY(-5px);

}


/*==========================================================
FOCUS SCALE
==========================================================*/

input:focus,
textarea:focus{

transform:

scale(1.01);

}


/*==========================================================
SCROLL REVEAL
==========================================================*/

.reveal{

opacity:0;

transform:

translateY(60px);

transition:

1s ease;

}

.reveal.active{

opacity:1;

transform:

translateY(0);

}


/*==========================================================
STAGGER EFFECT
==========================================================*/

.stagger>*{

opacity:0;

animation:

fadeUp .8s forwards;

}

.stagger>*:nth-child(1){

animation-delay:.15s;

}

.stagger>*:nth-child(2){

animation-delay:.3s;

}

.stagger>*:nth-child(3){

animation-delay:.45s;

}

.stagger>*:nth-child(4){

animation-delay:.6s;

}

.stagger>*:nth-child(5){

animation-delay:.75s;

}


/*==========================================================
PERFORMANCE
==========================================================*/

.card,
.gallery-item,
.btn,
.review-card,
.membership-card{

will-change:

transform,
opacity;

backface-visibility:hidden;

}
/*=====================================================================
                    ANIMATIONS.CSS
                        PART 4
        LOADER • FOOTER • SCROLL • PERFORMANCE
======================================================================*/


/*==========================================================
PRELOADER
==========================================================*/

.preloader{

position:fixed;

inset:0;

background:#05070F;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:opacity .6s ease,visibility .6s ease;

}

.preloader.hide{

opacity:0;

visibility:hidden;

}

.loader-ring{

width:90px;
height:90px;

border-radius:50%;

border:6px solid rgba(255,255,255,.08);

border-top-color:var(--gold);

animation:loaderSpin 1s linear infinite;

}

@keyframes loaderSpin{

100%{

transform:rotate(360deg);

}

}


/*==========================================================
SCROLL TO TOP
==========================================================*/

.scroll-top{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
135deg,
var(--gold),
var(--gold-light)
);

color:#000;

font-size:22px;

cursor:pointer;

box-shadow:0 15px 35px rgba(212,175,55,.35);

opacity:0;

visibility:hidden;

transform:translateY(40px);

transition:.4s;

z-index:999;

}

.scroll-top.active{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.scroll-top:hover{

transform:
translateY(-8px)
rotate(360deg);

background:linear-gradient(
135deg,
var(--cyan),
#64EDFF
);

color:#fff;

}


/*==========================================================
FOOTER ANIMATION
==========================================================*/

.footer{

animation:footerFade 1s ease;

}

@keyframes footerFade{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*==========================================================
SOCIAL ICONS
==========================================================*/

.footer-social a{

transition:.45s;

}

.footer-social a:hover{

transform:

translateY(-8px)
rotate(360deg)
scale(1.08);

}


/*==========================================================
COUNTER POP
==========================================================*/

.counter{

display:inline-block;

animation:counterPop 1s ease;

}

@keyframes counterPop{

0%{

opacity:0;

transform:scale(.5);

}

60%{

transform:scale(1.15);

}

100%{

opacity:1;

transform:scale(1);

}

}


/*==========================================================
TEXT REVEAL
==========================================================*/

.text-reveal{

overflow:hidden;

}

.text-reveal span{

display:inline-block;

transform:translateY(100%);

animation:textReveal .8s forwards;

}

@keyframes textReveal{

to{

transform:translateY(0);

}

}


/*==========================================================
BACKGROUND FLOAT
==========================================================*/

.bg-shape{

animation:bgFloat 14s ease-in-out infinite;

}

@keyframes bgFloat{

0%,100%{

transform:

translateY(0)
rotate(0);

}

50%{

transform:

translateY(-40px)
rotate(10deg);

}

}


/*==========================================================
CARD GLOW
==========================================================*/

.card:hover{

animation:cardGlow 2s infinite;

}

@keyframes cardGlow{

0%,100%{

box-shadow:

0 15px 40px rgba(0,0,0,.25);

}

50%{

box-shadow:

0 20px 50px rgba(0,217,255,.20);

}

}


/*==========================================================
NAVBAR SCROLL EFFECT
==========================================================*/

.navbar.scrolled{

animation:navbarBlur .4s ease;

}

@keyframes navbarBlur{

from{

transform:translateY(-100%);

opacity:.5;

}

to{

transform:translateY(0);

opacity:1;

}

}


/*==========================================================
SECTION DIVIDER
==========================================================*/

.section-divider{

animation:dividerGlow 4s linear infinite;

}

@keyframes dividerGlow{

0%{

background-position:0%;

}

100%{

background-position:200%;

}

}


/*==========================================================
BUTTON RIPPLE
==========================================================*/

.btn{

position:relative;

overflow:hidden;

}

.btn::after{

content:"";

position:absolute;

width:20px;

height:20px;

border-radius:50%;

background:rgba(255,255,255,.35);

transform:scale(0);

opacity:0;

pointer-events:none;

}

.btn:active::after{

animation:ripple .6s ease;

}

@keyframes ripple{

0%{

transform:scale(0);

opacity:.8;

}

100%{

transform:scale(12);

opacity:0;

}

}


/*==========================================================
HOVER LIFT
==========================================================*/

.hover-lift{

transition:.4s;

}

.hover-lift:hover{

transform:

translateY(-10px);

}


/*==========================================================
ICON SPIN
==========================================================*/

.icon-spin:hover{

animation:spin .8s linear;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}


/*==========================================================
FADE LOOP
==========================================================*/

.fade-loop{

animation:fadeLoop 3s infinite;

}

@keyframes fadeLoop{

0%,100%{

opacity:1;

}

50%{

opacity:.5;

}

}


/*==========================================================
SCROLL REVEAL DELAYS
==========================================================*/

.reveal.delay-1{transition-delay:.1s;}
.reveal.delay-2{transition-delay:.2s;}
.reveal.delay-3{transition-delay:.3s;}
.reveal.delay-4{transition-delay:.4s;}
.reveal.delay-5{transition-delay:.5s;}


/*==========================================================
REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

*,
*::before,
*::after{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}


/*==========================================================
GPU ACCELERATION
==========================================================*/

.hero,
.card,
.gallery-item,
.footer,
.btn,
.hero-image img{

transform:translateZ(0);

backface-visibility:hidden;

will-change:transform,opacity;

}


/*==========================================================
END OF FILE
==========================================================*/