/* ── ANIMATIONS & MOTION SYSTEM ───────────────────────────────────────── */

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes lineGrow {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}
@keyframes wordReveal {
    from { opacity: 0; transform: translateY(110%) skewY(4deg); }
    to   { opacity: 1; transform: translateY(0) skewY(0deg); }
}
@keyframes counterUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Base reveal — fade + rise ──────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
    will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Directional variants ────────────────────────────────────────────── */
.reveal-left  { opacity: 0; transform: translateX(-36px); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); }
.reveal-right { opacity: 0; transform: translateX(36px);  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); }
.reveal-scale { opacity: 0; transform: scale(0.93);        transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); }
.reveal-left.visible, .reveal-right.visible, .reveal-scale.visible {
    opacity: 1; transform: translateX(0) scale(1);
}

/* ── Section tag line accent ─────────────────────────────────────────── */
.section-tag {
    position: relative;
    overflow: hidden;
}
.section-tag::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    height: 1px; width: 100%;
    background: var(--gold-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-out) 0.3s;
}
.reveal.visible .section-tag::after,
.reveal-left.visible .section-tag::after,
.reveal-right.visible .section-tag::after,
.section-tag.line-ready::after {
    transform: scaleX(1);
}

/* ── Word-by-word heading animation ─────────────────────────────────── */
/*
 * The clip mask sits on .word-mask — NOT on the word itself.
 * Extra padding-bottom prevents descender clipping (g, y, p, q, j).
 * overflow:hidden lives only on .word-mask so the word can slide fully
 * into view before the mask boundary is visible.
 */
.word-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /* Extra room below baseline for descenders */
    padding-bottom: 0.18em;
    margin-bottom: -0.18em;
    /* Extra room above cap-height */
    padding-top: 0.08em;
    margin-top: -0.08em;
}
.word-unit {
    display: inline-block;
    opacity: 0;
    transform: translateY(1.1em);
    transition: opacity 0.62s var(--ease-out), transform 0.62s var(--ease-out);
    white-space: pre; /* preserve trailing space */
    will-change: transform, opacity;
}
.split-heading.is-visible .word-unit {
    opacity: 1;
    transform: translateY(0);
}

/* ── Stagger children ────────────────────────────────────────────────── */
/*
 * Only targets direct children that do NOT already have .reveal
 * (which manages their own opacity). This prevents double-hiding on
 * blog-grid and portfolio-grid cards.
 */
.stagger > *:not(.reveal):not(.reveal-left):not(.reveal-right):not(.reveal-scale) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.stagger.visible > *:not(.reveal):not(.reveal-left):not(.reveal-right):not(.reveal-scale) {
    opacity: 1;
    transform: none;
}
.stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.13s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.21s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.29s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.37s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.45s; }
.stagger.visible > *:nth-child(7) { transition-delay: 0.53s; }
.stagger.visible > *:nth-child(8) { transition-delay: 0.61s; }

/* ── Delay utilities ─────────────────────────────────────────────────── */
.reveal-delay-1, .reveal-left.reveal-delay-1, .reveal-right.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2, .reveal-left.reveal-delay-2, .reveal-right.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3, .reveal-left.reveal-delay-3, .reveal-right.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4, .reveal-left.reveal-delay-4, .reveal-right.reveal-delay-4 { transition-delay: 0.40s; }
.reveal-delay-5 { transition-delay: 0.50s; }
.reveal-delay-6 { transition-delay: 0.60s; }

/* ── Parallax scroll (JS-driven via inline style) ────────────────────── */
.parallax-slow  { will-change: transform; }
.parallax-fast  { will-change: transform; }

/* ── Honour reduced motion preference ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .reveal-scale,
    .stagger > *, .word-reveal-wrap .word {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}