/* ==========================================================================
   KASHI RAMYA - motion.css
   Entrances, hover feedback and micro-interactions. See docs/polish.md §4.

   PROGRESSIVE ENHANCEMENT: every element is fully visible by default. Hiding
   for animation only happens once motion.js sets .motion-ready on <html>, so
   with JavaScript disabled the site looks complete and static.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared timings
   -------------------------------------------------------------------------- */
:root {
    --m-micro: .16s;
    --m-base: .26s;
    --m-enter: .42s;
    --m-hero: .9s;
    --m-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. M-1  Scroll reveal
   -------------------------------------------------------------------------- */
.motion-ready .m-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    will-change: opacity, transform;
}

.motion-ready .m-reveal.m-is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity var(--m-enter) var(--m-ease), transform var(--m-enter) var(--m-ease);
}

/* Stagger children of a revealed group. */
.motion-ready .m-stagger > * {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
}

.motion-ready .m-stagger.m-is-revealed > * {
    opacity: 1;
    transform: none;
    transition: opacity var(--m-enter) var(--m-ease), transform var(--m-enter) var(--m-ease);
}

.motion-ready .m-stagger.m-is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.motion-ready .m-stagger.m-is-revealed > *:nth-child(2) { transition-delay: 55ms; }
.motion-ready .m-stagger.m-is-revealed > *:nth-child(3) { transition-delay: 110ms; }
.motion-ready .m-stagger.m-is-revealed > *:nth-child(4) { transition-delay: 165ms; }
.motion-ready .m-stagger.m-is-revealed > *:nth-child(5) { transition-delay: 220ms; }
.motion-ready .m-stagger.m-is-revealed > *:nth-child(6) { transition-delay: 275ms; }
.motion-ready .m-stagger.m-is-revealed > *:nth-child(7) { transition-delay: 330ms; }
.motion-ready .m-stagger.m-is-revealed > *:nth-child(8) { transition-delay: 385ms; }
.motion-ready .m-stagger.m-is-revealed > *:nth-child(n+9) { transition-delay: 440ms; }

/* --------------------------------------------------------------------------
   3. M-2  Hero cross-fade with a slow drift
   -------------------------------------------------------------------------- */
/* The drift is timed to the 6s autoplay so each slide visibly breathes while
   it is on screen, and starts slightly zoomed so activation never pops. */
.motion-ready .hero-slide-media img {
    transform: scale(1.02);
    transition: transform 9s linear;
}

.motion-ready .hero-slide.is-active .hero-slide-media img {
    transform: scale(1.07);
}

/* Hero content entrance fade-up */
.motion-ready .hero-content { opacity: 0; transform: translate3d(0, 24px, 0); will-change: opacity, transform; }
.motion-ready .hero-slide.is-active .hero-content { opacity: 1; transform: none; transition: opacity var(--m-enter) var(--m-ease), transform var(--m-enter) var(--m-ease); }

/* --------------------------------------------------------------------------
   4. M-3  Card lift (extends the base hover in components.css)
   -------------------------------------------------------------------------- */
.motion-ready .card {
    transition: transform var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease);
}

/* --------------------------------------------------------------------------
   5. M-4  Button ripple from the click point
   -------------------------------------------------------------------------- */
.m-ripple {
    position: relative;
    overflow: hidden;
}

.m-ripple > .m-ripple-wave {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, .38);
    pointer-events: none;
    animation: m-ripple .55s var(--m-ease) forwards;
}

.btn-gold.m-ripple > .m-ripple-wave,
.btn-secondary.m-ripple > .m-ripple-wave,
.btn-ghost.m-ripple > .m-ripple-wave {
    background: rgba(139, 0, 0, .18);
}

@keyframes m-ripple {
    to { transform: scale(2.6); opacity: 0; }
}

/* --------------------------------------------------------------------------
   6. M-6  Sticky header condense
   -------------------------------------------------------------------------- */
.site-header {
    transition: box-shadow var(--m-base) var(--m-ease), background-color var(--m-base) var(--m-ease);
}

.site-header .brand-logo,
.site-header .header-inner {
    transition: transform var(--m-base) var(--m-ease);
    transform-origin: left center;
}

.site-header.is-condensed { box-shadow: var(--kr-sh-md); }
.site-header.is-condensed .brand-logo { transform: scale(.9); }

/* --------------------------------------------------------------------------
   7. M-7  Scroll progress bar
   -------------------------------------------------------------------------- */
.m-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--kr-maroon), var(--kr-red), var(--kr-orange), var(--kr-gold));
    transform-origin: left center;
    transition: opacity var(--m-base) var(--m-ease);
    pointer-events: none;
}

.m-progress[hidden] { display: none; }

/* --------------------------------------------------------------------------
   8. M-8  Nav underline sweep
   -------------------------------------------------------------------------- */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: var(--kr-s3);
    right: var(--kr-s3);
    bottom: 6px;
    height: 2px;
    background: var(--kr-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--m-micro) var(--m-ease);
}

.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }

.nav-link.is-active::after { transform: scaleX(1); }

/* The mega-menu trigger uses a button; keep the same affordance. */
button.nav-link::after { left: var(--kr-s3); right: var(--kr-s3); }

/* --------------------------------------------------------------------------
   9. M-9  Accordion ease
   -------------------------------------------------------------------------- */
.faq-item {
    transition: border-color var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease);
}

.faq-chevron { transition: transform var(--m-base) var(--m-ease); }

/* --------------------------------------------------------------------------
   10. M-10  Timeline node pop
   -------------------------------------------------------------------------- */
.motion-ready .timeline-node {
    transform: scale(.6);
    opacity: 0;
    transition: transform var(--m-enter) var(--m-ease), opacity var(--m-enter) var(--m-ease);
}

.motion-ready .timeline-item.m-is-revealed .timeline-node {
    transform: none;
    opacity: 1;
}

.motion-ready .timeline-item.m-is-revealed .timeline-node::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--kr-gold);
    animation: m-ring 1.1s var(--m-ease) .1s 1 both;
}

@keyframes m-ring {
    from { transform: scale(.7); opacity: .8; }
    to { transform: scale(1.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   11. M-13  Skeleton shimmer
   -------------------------------------------------------------------------- */
.m-skeleton {
    background: linear-gradient(90deg, var(--kr-sand) 25%, #fff 50%, var(--kr-sand) 75%);
    background-size: 200% 100%;
    animation: m-shimmer 1.4s linear infinite;
    border-radius: var(--kr-r-xs);
}

@keyframes m-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   12. M-14  WhatsApp float entrance
   -------------------------------------------------------------------------- */
.motion-ready .float-actions { opacity: 0; transform: translateY(14px); }

.motion-ready .float-actions.m-is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity var(--m-enter) var(--m-ease), transform var(--m-enter) var(--m-ease);
}

.motion-ready .float-btn-whatsapp.m-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--kr-whatsapp);
    animation: m-pulse 1.4s var(--m-ease) 2 both;
}

@keyframes m-pulse {
    from { transform: scale(1); opacity: .9; }
    to { transform: scale(1.6); opacity: 0; }
}

/* --------------------------------------------------------------------------
   13. M-15  Back-to-top reveal
   -------------------------------------------------------------------------- */
.float-btn-top { transition: opacity var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease); }

/* --------------------------------------------------------------------------
   14. M-16  Form focus lift
   -------------------------------------------------------------------------- */
.input, .select, .textarea {
    transition: border-color var(--m-micro) var(--m-ease),
                box-shadow var(--m-micro) var(--m-ease),
                transform var(--m-micro) var(--m-ease);
}

.input:focus, .select:focus, .textarea:focus { transform: translateY(-1px); }

.field-label { transition: color var(--m-micro) var(--m-ease); }
.field:focus-within .field-label { color: var(--kr-orange-600); }

/* --------------------------------------------------------------------------
   15. M-17  Price tick
   -------------------------------------------------------------------------- */
.m-tick { display: inline-block; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   16. M-18  Image blur-up
   -------------------------------------------------------------------------- */
.motion-ready img.m-blur {
    filter: blur(12px);
    transform: scale(1.02);
    transition: filter .6s var(--m-ease), transform .6s var(--m-ease);
}

.motion-ready img.m-blur.m-is-loaded {
    filter: none;
    transform: none;
}

/* --------------------------------------------------------------------------
   17. M-11 / M-12  Overlay entrances
   -------------------------------------------------------------------------- */
.modal-panel, .search-panel {
    transition: opacity var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease);
}

.lightbox-image { transition: opacity var(--m-micro) var(--m-ease), transform var(--m-micro) var(--m-ease); }

/* --------------------------------------------------------------------------
   18. Section-band fade for alternating backgrounds
   -------------------------------------------------------------------------- */
.motion-ready .section-alt.m-reveal,
.motion-ready .counter-band.m-reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   19. REDUCED MOTION — non-negotiable
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .motion-ready .m-reveal,
    .motion-ready .m-stagger > *,
    .motion-ready .timeline-node,
    .motion-ready .float-actions,
    .motion-ready img.m-blur {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .motion-ready .hero-slide.is-active .hero-slide-media img { transform: none; }
    .motion-ready .hero-slide-media img { transition: none; }

    .m-progress { display: none; }

    .m-ripple > .m-ripple-wave { display: none; }
    .motion-ready .timeline-item.m-is-revealed .timeline-node::after { animation: none; }
    .motion-ready .float-btn-whatsapp.m-pulse::after { animation: none; }

    .m-skeleton { animation: none; background: var(--kr-sand); }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}