/*======================================================================

CTM PATH™ Guided Journey v6.0

Purpose
Premium Motion Engine

Responsibility
• Screen Transitions
• Hero Animation
• Logo Animation
• Button Animation
• Text Reveal
• Divider Animation
• Ambient Glow
• Floating Effects
• Accessibility

======================================================================*/


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

:root{

    --ease-premium:cubic-bezier(.22,.61,.36,1);

    --ease-cinematic:cubic-bezier(.19,1,.22,1);

    --speed-fast:.25s;

    --speed-normal:.45s;

    --speed-slow:.8s;

    --speed-extra:1.4s;

    --speed-cinematic:2s;

}


/*==================================================
Screen Fade
==================================================*/

@keyframes screenFade{

    from{

        opacity:0;

        transform:

            translateY(20px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}


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

@keyframes heroReveal{

    from{

        opacity:0;

        transform:

            translateY(42px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}


/*==================================================
Soft Fade
==================================================*/

@keyframes softFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/*==================================================
Logo Float
==================================================*/

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}


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

@keyframes goldGlow{

    0%{

        filter:

            drop-shadow(0 0 8px rgba(216,179,106,.12));

    }

    50%{

        filter:

            drop-shadow(0 0 24px rgba(216,179,106,.26));

    }

    100%{

        filter:

            drop-shadow(0 0 8px rgba(216,179,106,.12));

    }

}

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

@keyframes buttonPulse{

    0%{

        box-shadow:

            0 0 0 rgba(22,165,106,.14);

    }

    50%{

        box-shadow:

            0 0 30px rgba(22,165,106,.24);

    }

    100%{

        box-shadow:

            0 0 0 rgba(22,165,106,.14);

    }

}


/*==================================================
Shimmer
==================================================*/

@keyframes shimmer{

    from{

        transform:translateX(-160%);

    }

    to{

        transform:translateX(220%);

    }

}


/*==================================================
Divider Glow
==================================================*/

@keyframes dividerGlow{

    0%{

        opacity:.35;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.35;

    }

}


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

@keyframes backgroundPulse{

    0%{

        transform:scale(1);

        opacity:.22;

    }

    50%{

        transform:scale(1.06);

        opacity:.42;

    }

    100%{

        transform:scale(1);

        opacity:.22;

    }

}


/*==================================================
Text Fade
==================================================*/

@keyframes textFade{

    from{

        opacity:0;

        transform:

            translateY(18px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}


/*==================================================
Sequential Reveal
==================================================*/

@keyframes sequenceReveal{

    from{

        opacity:0;

        transform:

            translateY(24px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}


/*==================================================
Application
==================================================*/

.screen{

    animation:

        screenFade .8s var(--ease-cinematic);

}


.hero{

    animation:

        heroReveal 1.15s var(--ease-cinematic);

}


.brand-logo{

    animation:

        softFade .9s var(--ease-cinematic),

        logoFloat 7s ease-in-out infinite 1s,

        goldGlow 7s ease-in-out infinite 1s;

}


.welcome-block{

    animation:

        sequenceReveal 1s var(--ease-cinematic);

    animation-delay:.35s;

    animation-fill-mode:both;

}


.introduction-block{

    animation:

        sequenceReveal 1s var(--ease-cinematic);

    animation-delay:.8s;

    animation-fill-mode:both;

}


.cta-block{

    animation:

        sequenceReveal 1s var(--ease-cinematic);

    animation-delay:1.3s;

    animation-fill-mode:both;

}


.tamil{

    animation:

        textFade .9s var(--ease-cinematic);

}


.english{

    animation:

        textFade 1.2s var(--ease-cinematic);

}


.gold-divider{

    animation:

        dividerGlow 4.5s ease-in-out infinite;

}


.btn-primary{

    animation:

        buttonPulse 5s ease-in-out infinite;

}

/*==================================================
Hover Motion
==================================================*/

.card,

.btn,

.choice,

.booking-card,

.booking-date,

.booking-slot{

    transition:

        transform .35s var(--ease-premium),

        box-shadow .35s var(--ease-premium),

        border-color .35s var(--ease-premium),

        background .35s var(--ease-premium),

        opacity .35s var(--ease-premium),

        filter .35s var(--ease-premium);

}


.card:hover{

    transform:

        translateY(-8px);

}


.btn:hover{

    transform:

        translateY(-3px);

}


.choice:hover{

    transform:

        translateY(-5px);

}


.booking-date:hover,

.booking-slot:hover{

    transform:

        translateY(-4px);

}


/*==================================================
Shimmer Utility
==================================================*/

.shimmer{

    position:relative;

    overflow:hidden;

}


.shimmer::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.16),

            transparent

        );

    animation:

        shimmer 4s linear infinite;

}


/*==================================================
Glow Utility
==================================================*/

.glow{

    animation:

        goldGlow 5s ease-in-out infinite;

}


/*==================================================
Float Utility
==================================================*/

.float{

    animation:

        logoFloat 7s ease-in-out infinite;

}


/*==================================================
Fade Utilities
==================================================*/

.fade-in{

    animation:

        screenFade .8s var(--ease-cinematic) forwards;

}


.fade-up{

    animation:

        heroReveal 1s var(--ease-cinematic) forwards;

}


.fade-text{

    animation:

        textFade .9s var(--ease-cinematic) forwards;

}


/*==================================================
Stagger Utilities
==================================================*/

.delay-1{

    animation-delay:.20s;

}

.delay-2{

    animation-delay:.40s;

}

.delay-3{

    animation-delay:.60s;

}

.delay-4{

    animation-delay:.80s;

}

.delay-5{

    animation-delay:1.00s;

}


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

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

    *,

    *::before,

    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}