/*==================================================
BETHSAIDA HERITAGE
animations.css
PART 1
==================================================*/

/*==================================
Animation Variables
==================================*/

:root{

    --ease:cubic-bezier(.215,.61,.355,1);

    --duration-fast:.35s;

    --duration:.8s;

    --duration-slow:1.4s;

}

/*==================================
Animation Helpers
==================================*/

.animate{

    animation-duration:var(--duration);

    animation-fill-mode:both;

    animation-timing-function:var(--ease);

}

.animate-fast{

    animation-duration:var(--duration-fast);

}

.animate-slow{

    animation-duration:var(--duration-slow);

}

/*==================================
Fade In
==================================*/

.fade-in{

    animation:fadeIn 1s forwards;

}

@keyframes fadeIn{

0%{

opacity:0;

}

100%{

opacity:1;

}

}

/*==================================
Fade Up
==================================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

}

.fade-up.show{

    animation:fadeUp .9s var(--ease) forwards;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/*==================================
Fade Down
==================================*/

.fade-down{

    opacity:0;

    transform:translateY(-60px);

}

.fade-down.show{

    animation:fadeDown .9s forwards;

}

@keyframes fadeDown{

0%{

opacity:0;

transform:translateY(-60px);

}

100%{

opacity:1;

transform:none;

}

}

/*==================================
Fade Left
==================================*/

.fade-left{

    opacity:0;

    transform:translateX(-80px);

}

.fade-left.show{

    animation:fadeLeft .9s forwards;

}

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-80px);

}

100%{

opacity:1;

transform:none;

}

}

/*==================================
Fade Right
==================================*/

.fade-right{

    opacity:0;

    transform:translateX(80px);

}

.fade-right.show{

    animation:fadeRight .9s forwards;

}

@keyframes fadeRight{

0%{

opacity:0;

transform:translateX(80px);

}

100%{

opacity:1;

transform:none;

}

}

/*==================================
Zoom In
==================================*/

.zoom-in{

    opacity:0;

    transform:scale(.85);

}

.zoom-in.show{

    animation:zoomIn .8s forwards;

}

@keyframes zoomIn{

0%{

opacity:0;

transform:scale(.85);

}

100%{

opacity:1;

transform:scale(1);

}

}

/*==================================
Zoom Out
==================================*/

.zoom-out{

    animation:zoomOut .8s forwards;

}

@keyframes zoomOut{

0%{

opacity:1;

transform:scale(1);

}

100%{

opacity:0;

transform:scale(.8);

}

}

/*==================================
Rotate In
==================================*/

.rotate-in{

    opacity:0;

    transform:rotate(-8deg) scale(.95);

}

.rotate-in.show{

    animation:rotateIn 1s forwards;

}

@keyframes rotateIn{

0%{

opacity:0;

transform:rotate(-8deg) scale(.95);

}

100%{

opacity:1;

transform:rotate(0) scale(1);

}

}

/*==================================
Scale Up
==================================*/

.scale-up{

    transform:scale(.92);

    opacity:0;

}

.scale-up.show{

    animation:scaleUp .8s forwards;

}

@keyframes scaleUp{

0%{

opacity:0;

transform:scale(.92);

}

100%{

opacity:1;

transform:scale(1);

}

}

/*==================================
Floating Animation
==================================*/

.float{

    animation:float 5s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

25%{

transform:translateY(-8px);

}

50%{

transform:translateY(-14px);

}

75%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

/*==================================
Pulse
==================================*/

.pulse{

    animation:pulse 2.5s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

/*==================================
Bounce
==================================*/

.bounce{

    animation:bounce 2s infinite;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

/*==================================
Animation Delays
==================================*/

.delay-100{

animation-delay:.1s;

}

.delay-200{

animation-delay:.2s;

}

.delay-300{

animation-delay:.3s;

}

.delay-400{

animation-delay:.4s;

}

.delay-500{

animation-delay:.5s;

}

.delay-700{

animation-delay:.7s;

}

.delay-1000{

animation-delay:1s;

}

/*==================================
Infinite Slow Rotation
==================================*/

.rotate-slow{

    animation:rotateSlow 18s linear infinite;

}

@keyframes rotateSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/*==================================
Opacity Utilities
==================================*/

.opacity-0{

opacity:0;

}

.opacity-1{

opacity:1;

}
/*==================================================
BETHSAIDA HERITAGE
animations.css
PART 2
Hero • Gallery • Buttons
==================================================*/

/*==================================
Ken Burns Hero Animation
==================================*/

.hero-kenburns{

    animation:kenBurns 24s ease-in-out infinite alternate;

    transform-origin:center center;

}

@keyframes kenBurns{

0%{

transform:scale(1) translate(0,0);

}

25%{

transform:scale(1.05) translate(-1%,-1%);

}

50%{

transform:scale(1.08) translate(1%,0);

}

75%{

transform:scale(1.10) translate(0,1%);

}

100%{

transform:scale(1.12) translate(-1%,0);

}

}

/*==================================
Hero Overlay Fade
==================================*/

.hero-overlay{

    animation:heroOverlay 2.2s ease forwards;

}

@keyframes heroOverlay{

from{

opacity:0;

}

to{

opacity:1;

}

}

/*==================================
Hero Title Reveal
==================================*/

.hero-title{

    overflow:hidden;

}

.hero-title span{

    display:block;

    transform:translateY(110%);

    animation:titleReveal 1.2s forwards;

}

@keyframes titleReveal{

to{

transform:translateY(0);

}

}

/*==================================
Subtitle Animation
==================================*/

.hero-subtitle{

    opacity:0;

    letter-spacing:12px;

    animation:subtitleReveal 1.2s .4s forwards;

}

@keyframes subtitleReveal{

0%{

opacity:0;

letter-spacing:12px;

}

100%{

opacity:1;

letter-spacing:5px;

}

}

/*==================================
Paragraph Reveal
==================================*/

.hero-description{

    opacity:0;

    transform:translateY(30px);

    animation:paragraphReveal 1.1s .8s forwards;

}

@keyframes paragraphReveal{

to{

opacity:1;

transform:none;

}

}

/*==================================
Buttons Fade
==================================*/

.hero-buttons{

    opacity:0;

    transform:translateY(40px);

    animation:buttonReveal 1s 1.2s forwards;

}

@keyframes buttonReveal{

to{

opacity:1;

transform:none;

}

}

/*==================================
Luxury Button Hover
==================================*/

.btn{

    position:relative;

    overflow:hidden;

    z-index:1;

}

.btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:120%;

height:100%;

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

transform:skewX(-25deg);

transition:.7s;

z-index:-1;

}

.btn:hover::before{

left:130%;

}

.btn:hover{

transform:translateY(-4px);

box-shadow:0 20px 40px rgba(0,0,0,.18);

}

/*==================================
Gold Button Glow
==================================*/

.btn-gold{

box-shadow:0 0 0 rgba(200,169,106,.4);

animation:goldGlow 3s infinite;

}

@keyframes goldGlow{

0%{

box-shadow:0 0 0 rgba(200,169,106,.4);

}

50%{

box-shadow:0 0 28px rgba(200,169,106,.45);

}

100%{

box-shadow:0 0 0 rgba(200,169,106,.4);

}

}

/*==================================
Image Reveal
==================================*/

.image-reveal{

overflow:hidden;

position:relative;

}

.image-reveal img{

transform:scale(1.2);

opacity:0;

animation:imageReveal 1.4s forwards;

}

@keyframes imageReveal{

to{

transform:scale(1);

opacity:1;

}

}

/*==================================
Image Mask
==================================*/

.image-reveal::before{

content:"";

position:absolute;

inset:0;

background:var(--primary);

animation:imageMask 1.3s forwards;

z-index:5;

}

@keyframes imageMask{

0%{

left:0;

}

100%{

left:100%;

}

}

/*==================================
Gallery Hover
==================================*/

.gallery-card{

transition:.45s ease;

overflow:hidden;

}

.gallery-card img{

transition:transform .9s ease, filter .5s;

}

.gallery-card:hover img{

transform:scale(1.12);

filter:brightness(1.08);

}

.gallery-card::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

transparent,

rgba(0,0,0,.35)

);

opacity:0;

transition:.45s;

}

.gallery-card:hover::after{

opacity:1;

}

/*==================================
Gallery Caption
==================================*/

.gallery-caption{

position:absolute;

left:30px;

bottom:20px;

color:#fff;

opacity:0;

transform:translateY(25px);

transition:.4s;

z-index:3;

}

.gallery-card:hover .gallery-caption{

opacity:1;

transform:translateY(0);

}

/*==================================
Shine Effect
==================================*/

.shine{

position:relative;

overflow:hidden;

}

.shine::before{

content:"";

position:absolute;

top:-50%;

left:-130%;

width:70%;

height:200%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:rotate(25deg);

transition:1s;

}

.shine:hover::before{

left:160%;

}

/*==================================
Underline Animation
==================================*/

.animated-link{

position:relative;

display:inline-block;

}

.animated-link::after{

content:"";

position:absolute;

left:0;

bottom:-5px;

width:0;

height:2px;

background:var(--gold);

transition:.4s;

}

.animated-link:hover::after{

width:100%;

}

/*==================================
Section Divider Fade
==================================*/

.pattern-divider{

animation:dividerFade 2s ease;

}

@keyframes dividerFade{

from{

opacity:0;

}

to{

opacity:1;

}

}
/*==================================================
BETHSAIDA HERITAGE
animations.css
PART 3
Luxury Effects & Interactive Animations
==================================================*/

/*==================================
Floating Leaves
==================================*/

.floating-leaf{

    position:fixed;

    top:-80px;

    color:rgba(200,169,106,.75);

    pointer-events:none;

    z-index:2;

    animation:leafFall linear forwards;

}

@keyframes leafFall{

0%{

transform:
translateY(-100px)
translateX(0)
rotate(0deg);

opacity:0;

}

10%{

opacity:1;

}

50%{

transform:
translateY(50vh)
translateX(40px)
rotate(180deg);

}

100%{

transform:
translateY(110vh)
translateX(-60px)
rotate(360deg);

opacity:0;

}

}

/*==================================
Cursor Glow
==================================*/

.cursor-glow{

position:fixed;

width:28px;

height:28px;

border-radius:50%;

background:rgba(200,169,106,.18);

backdrop-filter:blur(6px);

pointer-events:none;

z-index:99999;

transform:translate(-50%,-50%);

transition:
left .08s linear,
top .08s linear;

box-shadow:

0 0 30px rgba(200,169,106,.35),
0 0 60px rgba(200,169,106,.18);

}

/*==================================
Ripple Effect
==================================*/

.btn{

overflow:hidden;

}

.ripple{

position:absolute;

width:20px;

height:20px;

border-radius:50%;

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

transform:translate(-50%,-50%) scale(0);

animation:ripple .7s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:
translate(-50%,-50%)
scale(18);

opacity:0;

}

}

/*==================================
Timeline Animation
==================================*/

.timeline-item{

opacity:0;

transform:translateY(80px);

transition:

opacity .8s ease,
transform .8s ease;

}

.timeline-item.show{

opacity:1;

transform:none;

}

.timeline-item::before{

transition:.5s;

}

.timeline-item:hover::before{

background:var(--gold);

transform:
translate(-50%,-50%)
scale(1.35);

}

/*==================================
Timeline Image
==================================*/

.timeline-image{

overflow:hidden;

border-radius:18px;

}

.timeline-image img{

transition:
transform .9s ease,
filter .5s ease;

}

.timeline-item:hover img{

transform:scale(1.08);

filter:brightness(1.08);

}

/*==================================
Philosophy Cards
==================================*/

.philosophy-card{

overflow:hidden;

}

.philosophy-card::before{

content:"";

position:absolute;

width:250px;

height:250px;

background:

radial-gradient(

rgba(255,255,255,.15),

transparent

);

top:-180px;

left:-180px;

transition:.8s;

}

.philosophy-card:hover::before{

top:-80px;

left:-80px;

}

.philosophy-card:hover{

transform:

translateY(-12px)

rotateX(4deg);

}

/*==================================
Floating Card
==================================*/

.floating-card{

animation:

floatingCard 5s ease-in-out infinite;

}

@keyframes floatingCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/*==================================
Glass Cards
==================================*/

.glass{

background:

rgba(255,255,255,.08);

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

border:

1px solid

rgba(255,255,255,.15);

}

/*==================================
Image Lift
==================================*/

.image-card{

transition:.5s;

transform-style:preserve-3d;

}

.image-card:hover{

transform:

translateY(-8px)

rotateX(2deg)

rotateY(-2deg);

}

/*==================================
Decorative Gold Circle
==================================*/

.gold-circle{

position:absolute;

width:120px;

height:120px;

border-radius:50%;

border:2px solid

rgba(200,169,106,.35);

animation:

circlePulse 6s infinite;

}

@keyframes circlePulse{

0%{

transform:scale(.9);

opacity:.4;

}

50%{

transform:scale(1.1);

opacity:1;

}

100%{

transform:scale(.9);

opacity:.4;

}

}

/*==================================
Section Decoration
==================================*/

.section-decoration{

position:absolute;

opacity:.15;

animation:

floatSlow 8s ease-in-out infinite;

}

@keyframes floatSlow{

0%{

transform:

translateY(0);

}

50%{

transform:

translateY(-20px);

}

100%{

transform:

translateY(0);

}

}

/*==================================
Icon Bounce
==================================*/

.icon-hover{

transition:.4s;

}

.icon-hover:hover{

animation:

iconBounce .8s;

}

@keyframes iconBounce{

0%,100%{

transform:translateY(0);

}

30%{

transform:translateY(-10px);

}

60%{

transform:translateY(4px);

}

}

/*==================================
Image Shadow Animation
==================================*/

.shadow-hover{

transition:.4s;

}

.shadow-hover:hover{

box-shadow:

0 25px 60px

rgba(0,0,0,.25);

}

/*==================================
Section Fade Overlay
==================================*/

.fade-overlay{

position:relative;

overflow:hidden;

}

.fade-overlay::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.12),

transparent

);

transform:translateX(-100%);

transition:1s;

}

.fade-overlay:hover::after{

transform:translateX(120%);

}

/*==================================
Divider Animation
==================================*/

.gold-line{

animation:

goldLineGrow

1.2s ease;

}

@keyframes goldLineGrow{

from{

width:0;

}

to{

width:80px;

}

}
/*==================================================
BETHSAIDA HERITAGE
animations.css
PART 4
Loader • Footer • Navigation • Responsive
==================================================*/

/*==================================
Page Loader
==================================*/

.page-loader{

    position:fixed;
    inset:0;
    background:#183126;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999999;
    transition:opacity .8s ease, visibility .8s ease;

}

.page-loader.hidden{

    opacity:0;
    visibility:hidden;

}

.loader-ring{

    width:90px;
    height:90px;
    border-radius:50%;
    border:4px solid rgba(255,255,255,.15);
    border-top-color:var(--gold);
    animation:loaderSpin 1s linear infinite;

}

@keyframes loaderSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==================================
Logo Fade Animation
==================================*/

.loader-logo{

    position:absolute;
    color:#fff;
    font-size:34px;
    font-family:'Cormorant Garamond', serif;
    letter-spacing:4px;
    animation:logoFade 2.5s infinite;

}

@keyframes logoFade{

    0%,100%{

        opacity:.4;

    }

    50%{

        opacity:1;

    }

}

/*==================================
Navigation Underline
==================================*/

.nav-link{

    position:relative;

}

.nav-link::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--gold);
    transition:width .4s ease;

}

.nav-link:hover::after,
.nav-link.active::after{

    width:100%;

}

/*==================================
Navigation Fade
==================================*/

.navbar{

    animation:navFade 1s ease;

}

@keyframes navFade{

    from{

        opacity:0;
        transform:translateY(-30px);

    }

    to{

        opacity:1;
        transform:none;

    }

}

/*==================================
Footer Reveal
==================================*/

.footer{

    animation:footerReveal 1.2s ease;

}

@keyframes footerReveal{

    from{

        opacity:0;
        transform:translateY(60px);

    }

    to{

        opacity:1;
        transform:none;

    }

}

/*==================================
Footer Social Hover
==================================*/

.social-icons a{

    transition:all .35s ease;

}

.social-icons a:hover{

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

}

/*==================================
CTA Glow
==================================*/

.cta-section{

    position:relative;

}

.cta-section::before{

    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:radial-gradient(

        rgba(200,169,106,.15),

        transparent 70%

    );

    top:-220px;
    right:-220px;

    animation:ctaGlow 10s infinite alternate;

}

@keyframes ctaGlow{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.3);

    }

}

/*==================================
Section Transition
==================================*/

section{

    transition:

        opacity .8s ease,

        transform .8s ease,

        background-color .5s ease;

}

/*==================================
Background Float
==================================*/

.bg-float{

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

}

@keyframes bgFloat{

    0%{

        background-position:center top;

    }

    50%{

        background-position:center 20px;

    }

    100%{

        background-position:center top;

    }

}

/*==================================
Scroll Progress Glow
==================================*/

#scroll-progress{

    box-shadow:

    0 0 15px rgba(200,169,106,.6);

}

/*==================================
Card Lift
==================================*/

.lift{

    transition:all .4s ease;

}

.lift:hover{

    transform:

        translateY(-10px);

    box-shadow:

        0 25px 60px rgba(0,0,0,.18);

}

/*==================================
Blur Fade
==================================*/

.blur-fade{

    opacity:0;

    filter:blur(10px);

    transform:translateY(40px);

}

.blur-fade.show{

    animation:blurFade .9s forwards;

}

@keyframes blurFade{

    to{

        opacity:1;
        filter:blur(0);
        transform:none;

    }

}

/*==================================
Image Overlay Fade
==================================*/

.overlay-hover{

    position:relative;
    overflow:hidden;

}

.overlay-hover::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        rgba(24,49,38,.25);

    opacity:0;

    transition:.45s;

}

.overlay-hover:hover::before{

    opacity:1;

}

/*==================================
Responsive Animation Speed
==================================*/

@media(max-width:991px){

    *{

        animation-duration:.8s !important;

    }

}

@media(max-width:768px){

    .floating-leaf,
    .cursor-glow{

        display:none;

    }

}

/*==================================
Reduced Motion Accessibility
==================================*/

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*==================================
Performance Optimisation
==================================*/

.gallery-card,
.image-card,
.timeline-image,
.architecture-image,
.philosophy-card,
.hospitality-card{

    will-change:transform;

}

.hero-content,
.hero-title,
.hero-buttons{

    backface-visibility:hidden;

    transform:translateZ(0);

}

/*==================================
End of Animations
==================================*/