/* EGNC motion layer — whimsy with discipline.
 *
 * Rules:
 *  - transform/opacity ONLY (compositor-friendly, no layout thrash, TBT-safe)
 *  - no-JS = fully visible (hiding requires .motion-ready set by motion.js)
 *  - prefers-reduced-motion: everything renders instantly, no movement
 */

/* ---- Scroll reveal -------------------------------------------------- */
.motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s cubic-bezier(.22,.61,.36,1),
                transform .6s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.motion-ready [data-reveal].in-view {
    opacity: 1;
    transform: none;
    will-change: auto;
}
.motion-ready [data-reveal="left"]  { transform: translateX(-26px); }
.motion-ready [data-reveal="right"] { transform: translateX(26px); }
.motion-ready [data-reveal="left"].in-view,
.motion-ready [data-reveal="right"].in-view { transform: none; }

/* ---- Hero entrance: pure CSS one-shot, ENDS fully visible ------------ */
/* Runs immediately on load (no JS gate) and settles at opacity 1, so
 * accessibility scanners (WAVE/axe) that snapshot after load always see
 * full-contrast content. Never use the JS reveal pattern above the fold. */
@media (prefers-reduced-motion: no-preference) {
    .enter-seq > * {
        opacity: 0;
        animation: enter-up .7s cubic-bezier(.22,.61,.36,1) forwards;
    }
    .enter-seq > *:nth-child(1) { animation-delay: .05s; }
    .enter-seq > *:nth-child(2) { animation-delay: .22s; }
    .enter-seq > *:nth-child(3) { animation-delay: .4s; }
    .enter-seq > *:nth-child(4) { animation-delay: .55s; }
}
@keyframes enter-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Hero slow living zoom ------------------------------------------- */
.motion-ready .hero-img,
.hero-img {
    animation: hero-breathe 24s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes hero-breathe {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}

/* ---- Grass underline: section headings sprout a lime line ----------- */
.grass-line {
    position: relative;
    display: inline-block;
}
.grass-line::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 64px;
    height: 4px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #4D7C0F, #84CC16);
    transform: translateX(-50%) scaleX(1);
    transform-origin: center;
}
.motion-ready .grass-line::after {
    transform: translateX(-50%) scaleX(0);
    transition: transform .7s cubic-bezier(.22,.61,.36,1) .25s;
}
.motion-ready .grass-line.in-view::after,
.motion-ready [data-reveal].in-view .grass-line::after {
    transform: translateX(-50%) scaleX(1);
}

/* ---- Card lift on hover --------------------------------------------- */
.lift {
    transition: transform .25s ease, box-shadow .25s ease;
}
.lift:hover {
    transform: translateY(-4px);
}

/* ---- Button press feedback ------------------------------------------ */
.press {
    transition: transform .15s ease;
}
.press:active {
    transform: scale(.97);
}

/* ---- FAQ details open ------------------------------------------------ */
details[open] > *:not(summary) {
    animation: faq-open .35s ease both;
}
@keyframes faq-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Reduced motion: everything instant, nothing moves --------------- */
@media (prefers-reduced-motion: reduce) {
    .motion-ready [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .enter-seq > * { opacity: 1 !important; animation: none !important; }
    .hero-img, .motion-ready .hero-img { animation: none !important; }
    .motion-ready .grass-line::after {
        transform: translateX(-50%) scaleX(1) !important;
        transition: none !important;
    }
    .lift, .lift:hover, .press, .press:active {
        transform: none !important;
        transition: none !important;
    }
    details[open] > *:not(summary) { animation: none !important; }
}