/* ============================================================
   Motion system.
   Everything here is opt-in and lives inside a
   prefers-reduced-motion guard — the layout is identical without it.
   ============================================================ */

@keyframes ky-fade-up   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ky-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ky-scale-in  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ky-slide-right { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes ky-draw      { to { stroke-dashoffset: 0; } }
@keyframes ky-float     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ky-pulse-ring{ 0% { transform: scale(.85); opacity: .55; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }
@keyframes ky-dash-flow { to { stroke-dashoffset: -18; } }
@keyframes ky-pop       { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes ky-nudge     { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes ky-sheen     { to { transform: translateX(220%); } }

@media (prefers-reduced-motion: no-preference) {

    /* ------------------------------------------------- entrance helpers */
    .anim            { animation: ky-fade-up .46s var(--ease) both; }
    .anim-fade       { animation: ky-fade-in .4s var(--ease) both; }
    .anim-scale      { animation: ky-scale-in .38s var(--ease) both; }
    .anim-d1 { animation-delay: .06s; } .anim-d2 { animation-delay: .12s; }
    .anim-d3 { animation-delay: .18s; } .anim-d4 { animation-delay: .24s; }
    .anim-d5 { animation-delay: .30s; } .anim-d6 { animation-delay: .36s; }

    /* stagger any direct children — used by card grids and lists */
    .anim-stagger > * { animation: ky-fade-up .44s var(--ease) both; }
    .anim-stagger > *:nth-child(1) { animation-delay: .04s; }
    .anim-stagger > *:nth-child(2) { animation-delay: .09s; }
    .anim-stagger > *:nth-child(3) { animation-delay: .14s; }
    .anim-stagger > *:nth-child(4) { animation-delay: .19s; }
    .anim-stagger > *:nth-child(5) { animation-delay: .24s; }
    .anim-stagger > *:nth-child(6) { animation-delay: .29s; }
    .anim-stagger > *:nth-child(n+7) { animation-delay: .34s; }

    /* the page itself settles in — makes navigation feel native */
    .page, .reader-wrap, .adm-body { animation: ky-fade-in .26s var(--ease) both; }

    /* ------------------------------------------------------ brand mark */
    .brand-mark { position: relative; }
    .brand-mark svg { animation: ky-pop .5s var(--ease) both; }
    .brand-mark::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        border: 2px solid var(--primary);
        animation: ky-pulse-ring 2.8s var(--ease) 1.2s infinite;
        pointer-events: none;
    }

    /* ------------------------------------------------- SVG line drawing */
    .draw [pathLength] {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: ky-draw 1.1s var(--ease) forwards;
    }
    .draw [pathLength][style*="--d"] { animation-delay: var(--d); }

    /* ------------------------------------------------------ hero graphic */
    .hero-svg .hs-sheet   { animation: ky-fade-up .5s var(--ease) both; }
    .hero-svg .hs-line    { animation: ky-slide-right .4s var(--ease) both; animation-delay: calc(.25s + var(--i) * .07s); }
    .hero-svg .hs-flow    { stroke-dasharray: 6 8; animation: ky-dash-flow .9s linear infinite; }
    .hero-svg .hs-card    { animation: ky-scale-in .5s var(--ease) both; animation-delay: calc(.7s + var(--i) * .16s); transform-origin: center; }
    .hero-svg .hs-wand    { animation: ky-float 3.2s ease-in-out 1.4s infinite; transform-origin: center; }
    .hero-svg .hs-spark   { animation: ky-fade-in .5s var(--ease) both, ky-float 2.6s ease-in-out infinite; animation-delay: calc(1s + var(--i) * .25s); }

    /* -------------------------------------------------------- feedback */
    .opt.is-correct .opt__mark svg { animation: ky-pop .34s var(--ease) both; }
    .opt.is-wrong   .opt__mark svg { animation: ky-pop .34s var(--ease) both; }
    .mcq__feedback.is-open         { animation: ky-fade-up .3s var(--ease) both; }
    .runbox.is-open                { animation: ky-fade-up .28s var(--ease) both; }
    .toast                         { animation: ky-fade-up .24s var(--ease) both; }
    .badge--primary svg            { animation: ky-pop .4s var(--ease) both; }

    /* arrows lean forward when you hover the thing they belong to */
    .btn:hover svg:last-child, .tile:hover .tile-arrow { animation: ky-nudge .5s var(--ease); }

    /* progress bars grow instead of jumping */
    .bar > i { transform-origin: left center; animation: ky-grow .7s var(--ease) both; }
    @keyframes ky-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* the ring on the dashboard sweeps up to its value */
    .ring::before { animation: ky-fade-in .8s var(--ease) both; }

    /* loading sheen for the premium banner and hero */
    .sheen { position: relative; overflow: hidden; }
    .sheen::after {
        content: "";
        position: absolute;
        top: 0; bottom: 0; left: -60%;
        width: 45%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .13), transparent);
        transform: translateX(0);
        animation: ky-sheen 5.5s var(--ease) 1.5s infinite;
        pointer-events: none;
    }

    /* bottom-nav indicator slides rather than blinks */
    .bottomnav a.is-active::before { animation: ky-scale-in .3s var(--ease) both; }
    .bottomnav a.is-active svg     { animation: ky-pop .34s var(--ease) both; }

    /* smart-import cards land one after the other */
    .pv .pvcard { animation: ky-fade-up .34s var(--ease) both; }
    .pv .pvcard:nth-child(1) { animation-delay: .02s; }
    .pv .pvcard:nth-child(2) { animation-delay: .05s; }
    .pv .pvcard:nth-child(3) { animation-delay: .08s; }
    .pv .pvcard:nth-child(n+4) { animation-delay: .11s; }

    /* empty-state icons breathe so a blank screen still feels alive */
    .empty-ico svg { animation: ky-float 4s ease-in-out infinite; }
}

/* Reduced motion: keep only the state changes that carry meaning. */
@media (prefers-reduced-motion: reduce) {
    .anim, .anim-fade, .anim-scale, .anim-stagger > * { animation: none !important; opacity: 1 !important; transform: none !important; }
    .hero-svg * { animation: none !important; opacity: 1 !important; }
    .draw [pathLength] { stroke-dashoffset: 0 !important; }
}