/* --- Hero gradient mesh --- */
.hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-10) 0 var(--space-9);
    isolation: isolate;
}
.hero::before {
    opacity: var(--hero-glow-opacity);
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 10% 15%, var(--accent-glow), transparent 60%), radial-gradient(ellipse at 90% 80%, var(--accent-glow), transparent 65%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--mask-solid) 15%, var(--mask-solid) 65%, transparent), linear-gradient(to right, transparent, var(--mask-solid) 12%, var(--mask-solid) 88%, transparent);
    mask-image: linear-gradient(to bottom, transparent, var(--mask-solid) 15%, var(--mask-solid) 65%, transparent), linear-gradient(to right, transparent, var(--mask-solid) 12%, var(--mask-solid) 88%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* --- Scroll reveals --- */
.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.reveal-ready .reveal.in {
    opacity: 1;
    transform: none;
}
.reveal-ready .reveal-stagger > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.reveal-ready .reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-ready .reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-ready .reveal-stagger.in > *:nth-child(2) { transition-delay: 60ms; }
.reveal-ready .reveal-stagger.in > *:nth-child(3) { transition-delay: 120ms; }
.reveal-ready .reveal-stagger.in > *:nth-child(4) { transition-delay: 180ms; }
.reveal-ready .reveal-stagger.in > *:nth-child(5) { transition-delay: 240ms; }
.reveal-ready .reveal-stagger.in > *:nth-child(6) { transition-delay: 300ms; }

/* --- Magnetic CTA --- */
.magnetic {
    transition: transform var(--t-fast) var(--ease);
    will-change: transform;
}

/* --- View transitions --- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 250ms;
    animation-timing-function: var(--ease);
}

/* --- Reduced motion: kill non-essential --- */
@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;
    }
    .hero::before, .hero::after { animation: none; }
    .reveal-ready .reveal, .reveal-ready .reveal-stagger > * { opacity: 1; transform: none; }
}

/* Paths are complete without enhancement. pathLength=1 normalizes lengths. */
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.draw.draw-ready { stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease); }
.draw.draw-ready.is-drawn { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
    .draw.draw-ready { stroke-dashoffset: 0; transition: none; }
}

/* Individual rotate composes with existing scroll-reveal transforms. */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
    .card.sheet--vellum:nth-child(3n+2) { --sheet-angle: .35deg; }
    .card.sheet--vellum:nth-child(3n+3) { --sheet-angle: -.35deg; }
    .sheet--vellum { rotate: var(--sheet-angle); transition: rotate var(--t-med) var(--ease), translate var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .sheet--vellum:has(a):hover, a.sheet--vellum:hover { translate: 0 -3px; rotate: 0deg; box-shadow: inset 0 1px 0 var(--sheet-inner), 0 18px 32px -14px var(--sheet-shadow); }
    .sheet.sheet--vellum.is-surface-hot {
        background-image: radial-gradient(circle at var(--px) var(--py), var(--sheet-glint), transparent 65%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sheet.sheet--vellum { rotate: none; translate: none; }
    a.sheet.sheet--vellum:hover { transform: none; }
}