/* =====================================================
   BLUE DOLPHIN WASSERSPORT
   Animation Stylesheet
===================================================== */



/* ==========================
   GLOBAL TRANSITIONS
========================== */


* {

    transition-timing-function:
    cubic-bezier(.4,0,.2,1);

}






/* ==========================
   HERO ANIMATIONS
========================== */


.hero-content {

    animation:

    heroFadeUp
    1.2s ease forwards;

}



.hero .subtitle {

    animation:

    fadeDown
    1s ease .2s forwards;

    opacity:0;

}



.hero h1 {

    animation:

    fadeUp
    1.2s ease .4s forwards;

    opacity:0;

}



.hero p {

    animation:

    fadeUp
    1.2s ease .6s forwards;

    opacity:0;

}



.hero-buttons {

    animation:

    fadeUp
    1.2s ease .8s forwards;

    opacity:0;

}





/* ===========================
   WAVE DIVIDER
=========================== */

.wave-divider{

    position:absolute;

    left:0;
    bottom:-2px;

    width:100%;
    height:120px;

    overflow:hidden;

    line-height:0;

    z-index:5;

}

.wave-track{

    display:flex;

    width:200%;

    height:100%;

    animation:waveMove 18s linear infinite;

}

.wave-track img{

    width:50%;
    height:100%;

    object-fit:cover;

    flex-shrink:0;

}

@keyframes waveMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}







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


.reveal {


    opacity:0;

    transform:

    translateY(60px);

    transition:

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


}



.reveal.active {


    opacity:1;

    transform:

    translateY(0);


}






/* ==========================
   FADE ANIMATIONS
========================== */


@keyframes fadeUp {


from {

    opacity:0;

    transform:

    translateY(40px);

}


to {

    opacity:1;

    transform:

    translateY(0);

}


}




@keyframes fadeDown {


from {

    opacity:0;

    transform:

    translateY(-40px);

}


to {

    opacity:1;

    transform:

    translateY(0);

}


}




@keyframes heroFadeUp {


from {


    opacity:0;

    transform:

    translateY(80px)
    scale(.96);


}



to {


    opacity:1;

    transform:

    translateY(0)
    scale(1);


}


}









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


.logo {

    animation:

    floating
    5s ease-in-out infinite;

}



@keyframes floating {


0%,
100% {

    transform:

    translateY(0);

}



50% {

    transform:

    translateY(-8px);

}


}







/* ==========================
   CARD HOVER EFFECTS
========================== */


.feature-card,
.price-card,
.opening-card {


    position:relative;

    overflow:hidden;


}




.feature-card::before,
.price-card::before,
.opening-card::before {


    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;


    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.35),

    transparent

    );


    transition:

    .8s;


}




.feature-card:hover::before,
.price-card:hover::before,
.opening-card:hover::before {


    left:120%;


}






/* ==========================
   BUTTON ANIMATION
========================== */


.btn {


    position:relative;

    overflow:hidden;

}



.btn::after {


    content:"";


    position:absolute;


    width:0;

    height:0;


    background:

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


    border-radius:50%;


    transform:

    translate(-50%,-50%);



}



.btn:hover {


    transform:

    translateY(-4px)
    scale(1.03);


}







/* ==========================
   IMAGE EFFECTS
========================== */


.gallery-grid img {


    animation:

    imageAppear
    .8s ease forwards;


}



.gallery-grid img:hover {


    filter:

    brightness(1.1)
    saturate(1.15);


}






@keyframes imageAppear {


from {


    opacity:0;

    transform:

    scale(.9);


}



to {


    opacity:1;

    transform:

    scale(1);


}


}







/* ==========================
   PRICE CARD FEATURED
========================== */


.price-card.featured {


    animation:

    pulseGlow
    4s infinite;


}



@keyframes pulseGlow {


0% {


    box-shadow:

    0 20px 50px
    rgba(0,174,234,.15);


}



50% {


    box-shadow:

    0 25px 70px
    rgba(0,174,234,.45);


}



100% {


    box-shadow:

    0 20px 50px
    rgba(0,174,234,.15);


}


}








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


.hero::after {


    content:"";


    position:absolute;


    bottom:40px;


    left:50%;


    width:30px;


    height:50px;


    border:

    2px solid white;


    border-radius:20px;


    transform:

    translateX(-50%);


}



.hero::before {


    content:"";


    position:absolute;


    bottom:70px;


    left:50%;


    width:6px;


    height:10px;


    background:white;


    border-radius:10px;


    transform:

    translateX(-50%);


    animation:

    scrollDown
    2s infinite;


}




@keyframes scrollDown {


0% {


    opacity:0;

    transform:

    translate(-50%,0);


}



50% {


    opacity:1;


}



100% {


    opacity:0;

    transform:

    translate(-50%,20px);


}


}








/* ==========================
   LOADING ANIMATION
========================== */


.loading {


    animation:

    loadingPulse
    1.5s infinite;


}



@keyframes loadingPulse {


50% {


    opacity:.5;


}


}






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


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


* {

    animation-duration:

    .01ms !important;


    transition-duration:

    .01ms !important;


}


}