/* ══════════════════════════════════════════════════════════════
   KSM × TECH — VRINDAVAN MOTION ENGINE
   Budget: 0 KB of JS.  Only transform + opacity are animated.
   Single easing: cubic-bezier(0.25, 0.1, 0.25, 1.0)  ← Law 3
   ══════════════════════════════════════════════════════════════ */


/* ─── 1 · SCROLL-ENTRY REVEAL ──────────────────────────── */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .v-enter {
            animation: v-enter-up linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 50%;
        }
        @keyframes v-enter-up {
            from { opacity: 0; transform: translateY(24px); }
            to   { opacity: 1; transform: none; }
        }

        /* Stagger children — optional: add .v-enter-stagger to parent */
        .v-enter-stagger > :nth-child(1) { animation-range: entry 10% cover 40%; }
        .v-enter-stagger > :nth-child(2) { animation-range: entry 15% cover 45%; }
        .v-enter-stagger > :nth-child(3) { animation-range: entry 20% cover 50%; }
    }
}

/* Fallback: no scroll-timeline → visible immediately */
@supports not (animation-timeline: view()) {
    .v-enter {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ─── 2 · HORIZONTAL SCROLL DRIFT ──────────────────────── */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .v-scroll-x {
            animation: v-drift-x linear both;
            animation-timeline: scroll(root);
        }
        @keyframes v-drift-x {
            from { transform: translateX(0); }
            to   { transform: translateX(calc(var(--v-drift, -40px))); }
        }
    }
}

@supports not (animation-timeline: scroll()) {
    .v-scroll-x { transform: none !important; }
}


/* ─── 3 · SCROLL ROTATION ──────────────────────────────── */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .v-scroll-rotate {
            animation: v-rotate linear both;
            animation-timeline: scroll(root);
        }
        @keyframes v-rotate {
            from { transform: rotate(0deg); }
            to   { transform: rotate(calc(var(--v-rotate-deg, 360deg))); }
        }
    }
}

@supports not (animation-timeline: scroll()) {
    .v-scroll-rotate { transform: none !important; }
}


/* ─── 4 · IMAGE UNVEIL ─────────────────────────────────── */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .v-unveil {
            animation: v-unveil linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 40%;
        }
        @keyframes v-unveil {
            from { clip-path: inset(0 0 88% 0); }
            to   { clip-path: inset(0 0 0 0); }
        }
    }
}


/* ─── 5 · STICKY SECTION PIN ───────────────────────────── */
.v-pin-track { position: relative; }
.v-pin-item  { position: sticky; top: 12vh; }


/* ─── 6 · VIEW TRANSITIONS — cross-document ────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root) {
    animation: vt-out .18s cubic-bezier(0.25, 0.1, 0.25, 1.0) both;
}
::view-transition-new(root) {
    animation: vt-in  .28s cubic-bezier(0.25, 0.1, 0.25, 1.0) both;
}

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

.header, .footer { view-transition-name: chrome; }


/* ─── 7 · V-ART — base class for all SVG illustrations ── */
.v-art {
    display: block;
    pointer-events: none;
    color: var(--text, currentColor);
}

.v-art-muted {
    opacity: 0.25;
}


/* ══════════════════════════════════════════════════════════════
   THE TEN SCENES
   ══════════════════════════════════════════════════════════════ */

/* ─── SCENE 1 · YAMUNA WAVES — / ───────────────────────── */
.scene-waves {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 0.30;
}
.scene-waves svg {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 100%;
    color: var(--peacock, #0F6E6E);
}
.scene-waves .wave-1 { bottom: 0; }
.scene-waves .wave-2 { bottom: 2vh; opacity: 0.6; }

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .scene-waves .wave-1 {
            --v-drift: -25%;
            animation: v-drift-x linear both;
            animation-timeline: scroll(root);
        }
        .scene-waves .wave-2 {
            --v-drift: 15%;
            animation: v-drift-x linear both;
            animation-timeline: scroll(root);
        }
    }
}


/* ─── SCENE 2 · IMPLIED FLUTE — /about/ ────────────────── */
.scene-flute {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.40;
    z-index: 0;
}
.scene-flute .flute-art {
    width: 180px;
    color: var(--art-a, var(--marigold, #E8A33D));
    transform: rotate(-15deg);
}
.scene-flute .cow-art {
    width: 100px;
    margin-top: 20px;
    color: var(--text, currentColor);
}


/* ─── SCENE 3 · UNFURLING PEACOCK — /build/ ────────────── */
.scene-peacock {
    position: fixed;
    right: -40px;
    top: 20vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}
.scene-peacock svg {
    width: 200px;
    height: 600px;
    color: var(--peacock, #0F6E6E);
    transform-origin: bottom center;
}

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .scene-peacock svg {
            animation: peacock-unfurl linear both;
            animation-timeline: scroll(root);
        }
        @keyframes peacock-unfurl {
            from { transform: scaleY(0.3) rotate(-5deg); opacity: 0; }
            50%  { opacity: 1; }
            to   { transform: scaleY(1) rotate(0deg); opacity: 1; }
        }
    }
}


/* ─── SCENE 4 · CHARIOT WHEEL — /meaning/ ──────────────── */
.scene-wheel {
    position: fixed;
    left: -15%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.30;
}
.scene-wheel svg {
    width: 60vw;
    max-width: 500px;
    color: var(--marigold, #E8A33D);
}

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .scene-wheel svg {
            --v-rotate-deg: 360deg;
            animation: v-rotate linear both;
            animation-timeline: scroll(root);
        }
    }
}


/* ─── SCENE 5 · MONSOON CLEARING — /writing/ ───────────── */
.scene-monsoon {
    position: relative;
    height: 20vh;
    overflow: hidden;
    pointer-events: none;
    margin: 40px 0;
}
.scene-monsoon .cloud-left,
.scene-monsoon .cloud-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    color: var(--indigo, #1B3A6B);
    opacity: 0.30;
}
.scene-monsoon .cloud-left  { left: 0; }
.scene-monsoon .cloud-right { right: 0; transform: scaleX(-1); }

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .scene-monsoon .cloud-left {
            animation: cloud-part-left linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 60%;
        }
        .scene-monsoon .cloud-right {
            animation: cloud-part-right linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 60%;
        }
        @keyframes cloud-part-left  { from { transform: translateX(30%); } to { transform: translateX(-20%); } }
        @keyframes cloud-part-right { from { transform: scaleX(-1) translateX(30%); } to { transform: scaleX(-1) translateX(-20%); } }
    }
}

/* Rain lines via stroke-dashoffset */
.scene-monsoon .rain-lines {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 100%;
    opacity: 0.15;
}
.scene-monsoon .rain-lines line {
    stroke: currentColor;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 8 16;
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .scene-monsoon .rain-lines line {
            animation: rain-fall linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 80%;
        }
        @keyframes rain-fall {
            from { stroke-dashoffset: 48; }
            to   { stroke-dashoffset: 0; }
        }
    }
}


/* ─── SCENE 6 · FOOTPRINTS — /work/* ───────────────────── */
.scene-footprints {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 32px 0;
    pointer-events: none;
    opacity: 0.25;
}
.scene-footprints svg {
    width: 16px;
    height: 16px;
    color: var(--text, currentColor);
}
.scene-footprints svg:nth-child(odd) { transform: rotate(-15deg); }
.scene-footprints svg:nth-child(even) { transform: rotate(15deg) translateY(6px); }


/* ─── SCENE 7 · RAAS CIRCLE — / ───────────────────────── */
.scene-raas {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    pointer-events: none;
}
.scene-raas .raas-ring {
    position: absolute;
    width: 80%;
    max-width: 500px;
    aspect-ratio: 1;
    border: 1px solid var(--line, #DCC9A6);
    border-radius: 50%;
    opacity: 0.30;
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .scene-raas .raas-ring {
            animation: raas-spin linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 100%;
        }
        @keyframes raas-spin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(15deg); }
        }
    }
}


/* ─── SCENE 8 · HIDDEN BUTTER POT — 404 ───────────────── */
.scene-pot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 80px 0;
}
.scene-pot .pot-art {
    width: 120px;
    color: var(--terracotta, #B33A2B);
    transform: rotate(25deg);
    transform-origin: bottom center;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}
@media (hover: hover) {
    .scene-pot .pot-art:hover {
        transform: rotate(-5deg);
    }
}
.scene-pot .spill {
    width: 80px;
    height: 20px;
    background: var(--marigold, #E8A33D);
    border-radius: 50%;
    opacity: 0.3;
    transform: scaleX(0.4);
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}
@media (hover: hover) {
    .scene-pot:hover .spill {
        transform: scaleX(1);
    }
}


/* ─── SCENE 9 · FALLING FLOWERS — /meaning/ ────────────── */
.scene-flowers {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    height: 30vh;
    margin: 40px 0;
}
.scene-flowers .flower {
    position: absolute;
    width: 20px;
    height: 20px;
    color: var(--marigold, #E8A33D);
    opacity: 0.35;
}
.scene-flowers .flower:nth-child(1) { left: 15%; top: -10%; }
.scene-flowers .flower:nth-child(2) { left: 35%; top: -20%; }
.scene-flowers .flower:nth-child(3) { left: 55%; top: -5%; }
.scene-flowers .flower:nth-child(4) { left: 75%; top: -15%; }
.scene-flowers .flower:nth-child(5) { left: 45%; top: -25%; }

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .scene-flowers .flower {
            animation: flower-fall linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 100%;
        }
        @keyframes flower-fall {
            from { transform: translateY(0) rotate(0deg); opacity: 0; }
            20%  { opacity: 0.2; }
            to   { transform: translateY(35vh) rotate(180deg); opacity: 0.05; }
        }
        .scene-flowers .flower:nth-child(2) { animation-range: entry 5% cover 90%; }
        .scene-flowers .flower:nth-child(3) { animation-range: entry 10% cover 95%; }
        .scene-flowers .flower:nth-child(4) { animation-range: entry 3% cover 85%; }
        .scene-flowers .flower:nth-child(5) { animation-range: entry 8% cover 100%; }
    }
}


/* ─── SCENE 10 · FIREFLIES — footer, all pages ─────────── */
.scene-fireflies {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}
.scene-fireflies .firefly {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--marigold, #E8A33D);
    opacity: 0;
}
.scene-fireflies .firefly:nth-child(1) { left: 12%; top: 30%; }
.scene-fireflies .firefly:nth-child(2) { left: 28%; top: 60%; }
.scene-fireflies .firefly:nth-child(3) { left: 55%; top: 25%; }
.scene-fireflies .firefly:nth-child(4) { left: 72%; top: 55%; }
.scene-fireflies .firefly:nth-child(5) { left: 88%; top: 40%; }

@media (prefers-reduced-motion: no-preference) {
    .scene-fireflies .firefly {
        animation: firefly-glow 20s cubic-bezier(0.25, 0.1, 0.25, 1.0) infinite;
    }
    .scene-fireflies .firefly:nth-child(2) { animation-delay: -4s; }
    .scene-fireflies .firefly:nth-child(3) { animation-delay: -8s; }
    .scene-fireflies .firefly:nth-child(4) { animation-delay: -12s; }
    .scene-fireflies .firefly:nth-child(5) { animation-delay: -16s; }

    @keyframes firefly-glow {
        0%, 100% { opacity: 0; transform: translate(0, 0); }
        15%      { opacity: 0.8; }
        30%      { opacity: 0.1; transform: translate(12px, -8px); }
        50%      { opacity: 0.7; transform: translate(-6px, -14px); }
        70%      { opacity: 0.15; transform: translate(8px, 4px); }
        85%      { opacity: 0.6; transform: translate(-4px, -6px); }
    }
}

/* Footer needs relative positioning for fireflies */
.footer-night { position: relative; }


/* ─── RESPONSIVE — hide heavy scenes on small screens ──── */
@media (max-width: 640px) {
    .scene-peacock { display: none; }
    .scene-wheel svg { max-width: 300px; }
    .scene-flute { display: none; }
    .scene-waves { height: 10vh; }
}


/* ─── 8 · REDUCED MOTION — finished states as defaults ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    ::view-transition-group(*) { animation-duration: 0s; }
    .v-scroll-x { transform: none !important; }
    .v-scroll-rotate { transform: none !important; }
    .scene-peacock svg { transform: scaleY(1) !important; opacity: 1 !important; }
    .scene-wheel svg { transform: none !important; }
    .scene-flowers .flower { opacity: 0.1 !important; transform: translateY(15vh) !important; }
    .scene-fireflies .firefly { opacity: 0.3 !important; }
    .scene-pot .pot-art { transform: rotate(25deg) !important; }
}