/* ══════════════════════════════════════════
   WORDGRID — style.css

   1.  Variables & Reset
   2.  Grid & Cells
   3.  Cell States
   4.  Scene Overlays (base)
   5.  Home Overlay (store front)
   6.  Section Overlays
   7.  Transition Overlay
   8.  Scene Indicator
   9.  Language Selector
   10. Animations
   11. Utility States
   12. No-JS Fallback
   13. Prefers-reduced-motion
══════════════════════════════════════════ */


/* ──────────────────────────────────────────
   1. VARIABLES & RESET
────────────────────────────────────────── */

:root {
    --bg:             #080808;
    --text:           #f5f5f5;
    --text-dim:       rgba(255, 255, 255, 0.07);
    --text-muted:     rgba(255, 255, 255, 0.32);
    --text-hint:      rgba(255, 255, 255, 0.50);
    --accent:         #b47cff;
    --accent-glow:    rgba(180, 124, 255, 0.70);
    --accent-soft:    rgba(180, 124, 255, 0.30);
    --accent-dim:     rgba(180, 124, 255, 0.12);

    --font-display:   'Syne', sans-serif;
    --font-mono:      'JetBrains Mono', monospace;

    --cell-size:      60px;
    --cell-size-mob:  36px;

    --fade-dur:       580ms;

    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-expo:   cubic-bezier(0.7, 0, 0.84, 1);

    color-scheme: dark;
}

*, *::before, *::after {
    margin: 0; padding: 0; box-sizing: border-box;
}

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-display);
    -webkit-font-smoothing: antialiased;
}


/* ──────────────────────────────────────────
   2. GRID & CELLS
────────────────────────────────────────── */

#grid-container {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#grid {
    display: grid;
    user-select: none;
    touch-action: none;
}

.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-dim);
    /* crosshair signals the grid is interactive */
    cursor: crosshair;
    transition:
        color       0.18s ease,
        transform   0.18s ease,
        text-shadow 0.18s ease,
        opacity     0.45s var(--ease-out-expo);
}

@media (max-width: 767px) {
    .cell {
        width: var(--cell-size-mob);
        height: var(--cell-size-mob);
        font-size: 0.72rem;
    }
}


/* ──────────────────────────────────────────
   3. CELL STATES
   Specificity order is intentional:
   word-letter < is-hinted < glitch < glitch-fail < selected < found
────────────────────────────────────────── */

/* All word-letters start identical to the noise.
   HintEngine adds .is-hinted after the delay. */
.cell.word-letter {
    color: var(--text-dim);
}

/* HintEngine: reveal letter by letter with a soft transition */
.cell.word-letter.is-hinted:not(.found) {
    color: var(--accent-soft);
    transition: color 1.1s ease, text-shadow 1.1s ease;
    text-shadow: 0 0 6px rgba(180, 124, 255, 0.15);
}

/* Glitch: lateral micro-movement — feels like data corruption */
.cell.glitch {
    animation: glitchFlash 0.26s ease forwards;
}

/* Reject glitch: a selection that did NOT form a word.
   Same spirit as .glitch but red — "not here". */
.cell.glitch-fail {
    animation: glitchFail 0.34s ease forwards;
}

/* Selected: the CSS class uses !important on transform to always win
   over any inline transform applied via rAF. */
.cell.selected {
    color: var(--text) !important;
    transform: translateY(-2px) scale(1.06) !important;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.25) !important;
}

/* Found: slow pulse — breathes like a live signal */
.cell.found {
    color: var(--accent) !important;
    transform: none !important;
    animation: foundPulse 2.8s ease-in-out infinite !important;
}

/* Hover on plain cells: minimal feedback before the drag */
.cell:not(.found):not(.selected):hover {
    color: var(--text-muted);
    transform: scale(1.04);
}


/* ──────────────────────────────────────────
   4. SCENE OVERLAYS — base
────────────────────────────────────────── */

.scene-overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
    /* pointer-events:none by default — the grid stays interactive */
    pointer-events: none;
    opacity: 0;
}

.scene-overlay.is-visible {
    opacity: 1;
}

.scene-overlay.fade-in {
    animation: fadeIn var(--fade-dur) var(--ease-out-expo) forwards;
}


/* ──────────────────────────────────────────
   5. HOME OVERLAY — store front
   Never captures clicks except on interactive items,
   so the grid stays reachable everywhere else.
────────────────────────────────────────── */

#home-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    pointer-events: none !important;
}

.hero {
    text-align: center;
    position: relative;
    padding: 1rem;
}

/* Soft vignette behind the hero so the content reads cleanly over the grid.
   Decorative only → never captures clicks. */
.hero::before {
    content: '';
    position: absolute;
    inset: -10% -14%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        rgba(8, 8, 8, 0.92) 32%,
        rgba(8, 8, 8, 0)    74%);
}

.hero-name {
    font-weight: 800;
    font-size: clamp(4rem, 11vw, 9rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
    /* Semi-transparent: the grid is sensed behind the name */
    color: rgba(245, 245, 245, 0.78);
}

.hero-tagline {
    margin-top: 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 300;
    color: var(--text-hint);
    letter-spacing: 0.04em;
    line-height: 1.5;
    max-width: 30ch;
    margin-inline: auto;
}

/* ── Offerings (the "store" menu) ──
   Each is an email link → pointer-events re-enabled just on these. */
.offerings {
    list-style: none;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: center;
}

.offering {
    display: block;
    width: 100%;
    max-width: 34ch;
    margin: 0 auto;
    font-family: var(--font-mono);
    text-align: center;
    text-decoration: none;
    color: inherit;
    background: none;
    border: 0;
    pointer-events: auto;          /* re-enable click over the (none) overlay */
    cursor: pointer;
    transition: transform 0.2s ease;
}
.offering:hover { transform: translateY(-2px); }
.offering:hover .offering-title { color: var(--accent); }
.offering:focus-visible { outline: 1px solid var(--accent-soft); outline-offset: 5px; }

.offering-title {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.02em;
    transition: color 0.25s ease;
}
.offering-desc {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── Primary CTA: WhatsApp ── */
.cta {
    display: inline-block;
    margin-top: 1.8rem;
    padding: 0.7rem 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--accent);
    border: 1px solid var(--accent-soft);
    border-radius: 2px;
    background: var(--accent-dim);
    pointer-events: auto;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease,
                box-shadow 0.25s ease, background 0.25s ease;
}
.cta:hover {
    color: var(--text);
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 18px rgba(180, 124, 255, 0.25);
}
.cta:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* ── Secondary nav (PROJECTS / INFO / CONTACT) ── */
.word-list {
    list-style: none;
    margin-top: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    align-items: center;
}

.word-item {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

/* Home nav words are clickable shortcuts (the rest of the overlay is click-through) */
#home-overlay .word-item {
    pointer-events: auto;
    cursor: pointer;
}
#home-overlay .word-item:hover { color: var(--text-hint); }

.word-item.is-found {
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
}

/* hero-hint breathes slowly to invite interaction without nagging. */
.hero-hint {
    margin-top: 1.4rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 300;
    color: var(--text-hint);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    animation: hintBreathe 3.5s ease-in-out infinite;
    animation-delay: 1.8s;
}


/* ──────────────────────────────────────────
   6. SECTION OVERLAYS
   The full overlay is invisible to clicks.
   Only .section-content captures events.
   The grid stays interactive for finding BACK.
────────────────────────────────────────── */

.section-overlay {
    z-index: 15;
    display: flex;
    align-items: flex-end;
    padding: clamp(2rem, 6vw, 5rem);
}

.section-overlay.is-visible .section-content {
    pointer-events: auto;
}

.section-content { max-width: 600px; }

/* ── Staggered entrance when a section is revealed ──
   animation-fill-mode: both keeps elements hidden during the delay
   (backwards) and visible at the end (forwards). */
.section-overlay.fade-in .section-label {
    animation: revealUp 0.38s var(--ease-out-expo) both;
    animation-delay: 40ms;
}
/* The title does NOT use revealUp — its entrance is the decode (UICtrl). */
.section-overlay.fade-in .section-body {
    animation: revealUp 0.38s var(--ease-out-expo) both;
    animation-delay: 150ms;
}
.section-overlay.fade-in .section-word-list {
    animation: revealUp 0.32s var(--ease-out-expo) both;
    animation-delay: 230ms;
}

.section-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--accent);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    opacity: 0.75;
}

.section-title {
    font-weight: 800;
    font-size: clamp(3.2rem, 8.5vw, 7rem);
    line-height: 0.90;
    letter-spacing: -0.025em;
    margin-bottom: 1.8rem;
}

/* Title decode (UICtrl._decodeTitle) */
.section-title .dc {
    color: var(--accent-soft);
    transition: color 0.28s ease, text-shadow 0.45s ease;
}
.section-title .dc.lit   { color: var(--text); }
.section-title .dc.flash { text-shadow: 0 0 18px var(--accent-glow), 0 0 34px var(--accent-soft); }

.section-body {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.9;
    color: var(--text-hint);
    max-width: 40ch;
    margin-bottom: 2.2rem;
}

/* "How I work" steps (INFO section) */
.howto-title {
    color: var(--text);
    opacity: 0.85;
    letter-spacing: 0.04em;
}
.howto {
    margin: 0.6rem 0 0 1.1rem;
    padding: 0;
    color: var(--text-hint);
}
.howto li { margin-bottom: 0.35rem; }
.howto li::marker { color: var(--accent); }

/* ── Project entries (Projects section) ── */
.project { margin-bottom: 1.6rem; }
.project:last-child { margin-bottom: 0; }

.project-name {
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.project-name .idx {
    color: var(--accent);
    margin-right: 0.6rem;
    opacity: 0.8;
}

.project-desc { margin-top: 0.35rem; opacity: 0.55; }

.project-stack {
    margin-top: 0.3rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.32;
}

.project-links { margin-top: 0.55rem; font-size: 0.72rem; }
.project-links a {
    color: var(--accent);
    text-decoration: none;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--accent-soft);
    padding-bottom: 1px;
    transition: border-color 0.25s ease, text-shadow 0.25s ease;
}
.project-links a:hover {
    border-color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
}
.project-links .sep { opacity: 0.25; margin: 0 0.6rem; }

.project-links a svg {
    width: 0.95em;
    height: 0.95em;
    vertical-align: -0.15em;
    margin-right: 0.4em;
    fill: currentColor;
}

/* BACK / VOLVER: visible and clearly pulsing — the user must be able to find it. */
.section-word-list { align-items: flex-start; }

.section-word-list .word-item {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(180, 124, 255, 0.85);
    letter-spacing: 0.2em;
}

.section-word-list .word-item.is-found {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent-glow);
    animation: none;
}

.section-word-list .word-item::before {
    content: '↩ ';
    color: var(--accent);
    opacity: 0.7;
}


/* ──────────────────────────────────────────
   7. TRANSITION OVERLAY
────────────────────────────────────────── */

#transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    background: var(--bg);
    /* Opacity only — cheap and smooth. No animated backdrop-filter. */
    transition: opacity 0.28s ease;
}

#transition-overlay.is-active {
    opacity: 1;
}

#transition-word {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    /* Large final size: rasterized at this scale; the animation only scales
       UP TO 1 → the text stays crisp. */
    font-size: clamp(3.5rem, 13vw, 11rem);
    color: var(--accent);
    letter-spacing: -0.02em;
    text-shadow:
        0 0 60px var(--accent-glow),
        0 0 120px rgba(180, 124, 255, 0.25);
    white-space: nowrap;
    opacity: 0;
    will-change: transform, opacity;
    transform: translateZ(0);
}


/* ──────────────────────────────────────────
   8. SCENE INDICATOR — bottom right
────────────────────────────────────────── */

#scene-indicator {
    position: fixed;
    bottom: 1.5rem;
    right: 1.8rem;
    z-index: 200;
    pointer-events: none;
}

#scene-label {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    color: rgba(255, 255, 255, 0.14);
    letter-spacing: 0.28em;
    text-transform: uppercase;
}


/* ──────────────────────────────────────────
   9. LANGUAGE SELECTOR — top left
────────────────────────────────────────── */

#lang-indicator {
    position: fixed;
    top: 1.4rem;
    left: 1.8rem;
    z-index: 200;
    display: flex;
    gap: 0.55rem;
}

.lang-opt {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22);
    background: none;
    border: none;
    padding: 0.1rem 0.2rem;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.lang-opt:hover { color: var(--text-hint); }
.lang-opt.is-active {
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
}
.lang-opt:focus-visible { outline: 1px solid var(--accent-soft); outline-offset: 3px; }


/* ──────────────────────────────────────────
   10. ANIMATIONS
────────────────────────────────────────── */

@keyframes fadeIn {
    0%   { opacity: 0; }
    26%  { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes revealUp {
    from { opacity: 0; transform: translateY(24px); filter: blur(7px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@keyframes foundPulse {
    0%, 100% { text-shadow: 0 0 8px rgba(180, 124, 255, 0.5); }
    50%       { text-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-soft); }
}

/* Glitch: abrupt lateral movement — intentionally unsmoothed */
@keyframes glitchFlash {
    0%   { color: var(--text-dim);           transform: none; }
    22%  { color: rgba(180,124,255,0.55);    transform: translateX(1.5px); }
    44%  { color: rgba(180,124,255,0.18);    transform: translateX(-1px); }
    66%  { color: rgba(180,124,255,0.48);    transform: translateX(0.8px); }
    88%  { color: rgba(180,124,255,0.22);    transform: translateX(0); }
    100% { color: var(--text-dim);           transform: none; }
}

/* Reject glitch: the red twin of glitchFlash */
@keyframes glitchFail {
    0%   { color: var(--text-dim);          transform: none; }
    20%  { color: rgba(255, 70, 70, 0.85);  transform: translateX(2px); }
    40%  { color: rgba(255, 70, 70, 0.35);  transform: translateX(-2px); }
    60%  { color: rgba(255, 70, 70, 0.70);  transform: translateX(1.5px); }
    80%  { color: rgba(255, 70, 70, 0.28);  transform: translateX(0); }
    100% { color: var(--text-dim);          transform: none; }
}

@keyframes hintBreathe {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}


/* ──────────────────────────────────────────
   11. UTILITY STATES
────────────────────────────────────────── */

#grid-container.is-locked { pointer-events: none; }

/* Grid dimmed when a section is active. */
#grid-container.is-dimmed .cell:not(.found) {
    opacity: 0.28;
}

/* In sections, grid words (BACK / VOLVER) must stay findable:
   we tint them with the accent instead of hiding them. */
#grid-container.is-dimmed .cell.word-letter:not(.found) {
    opacity: 1;
    color: var(--accent-soft);
    text-shadow: 0 0 6px rgba(180, 124, 255, 0.15);
}

/* Compact the hero stack on mobile so it doesn't overflow. */
@media (max-width: 767px) {
    .offerings      { gap: 0.65rem; margin-top: 1.1rem; }
    .hero-tagline   { font-size: 0.74rem; }
    .offering-title { font-size: 0.76rem; }
    .offering-desc  { font-size: 0.64rem; }
    .cta            { margin-top: 1.4rem; }
    .word-list      { margin-top: 1.2rem; }
}


/* ──────────────────────────────────────────
   11b. CURSOR GLOW (ProximityEngine) + CONTACT FORM
────────────────────────────────────────── */

/* The light that follows the pointer */
#cursor-glow {
    position: fixed;
    top: 0; left: 0;
    width: 460px; height: 460px;
    border-radius: 50%;
    z-index: 5;                 /* over the grid (1), under the overlays (10+) */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    mix-blend-mode: screen;     /* adds light over the dark grid */
    will-change: transform, opacity;
    background: radial-gradient(circle at center,
        rgba(180, 124, 255, 0.20) 0%,
        rgba(180, 124, 255, 0.08) 38%,
        rgba(180, 124, 255, 0)    70%);
}

/* Contact form (Web3Forms) */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 360px;
    margin-bottom: 2rem;
}
.contact-form .hidden { display: none; }

.cf-input {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    padding: 0.65rem 0.8rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    resize: vertical;
}
.cf-input::placeholder { color: var(--text-muted); }
.cf-input:focus {
    outline: none;
    border-color: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent-soft);
}

.cf-submit {
    align-self: flex-start;
    margin-top: 0.2rem;
    padding: 0.65rem 1.4rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid var(--accent-soft);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.cf-submit:hover:not(:disabled) {
    color: var(--text);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.cf-submit:disabled { opacity: 0.5; cursor: default; }

.cf-status {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    min-height: 1em;
}
.cf-status.is-ok  { color: var(--accent); }
.cf-status.is-err { color: rgba(255, 90, 90, 0.9); }

/* Package modal */
.modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 4, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.modal-dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 2rem 1.8rem 1.8rem;
    background: #0e0e0e;
    border: 1px solid rgba(180, 124, 255, 0.18);
    border-radius: 6px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(180, 124, 255, 0.08);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.28s var(--ease-out-expo);
}
.modal.is-open .modal-dialog { transform: translateY(0) scale(1); }

.modal-close {
    position: absolute;
    top: 0.6rem; right: 0.8rem;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}
.modal-close:hover { color: var(--text); }

.modal-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    opacity: 0.85;
    margin-bottom: 0.3rem;
}
.modal-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.8rem;
    letter-spacing: -0.02em;
    margin-bottom: 1.3rem;
}
.modal .contact-form { margin-bottom: 0; max-width: 100%; }


/* ──────────────────────────────────────────
   12. NO-JS FALLBACK
────────────────────────────────────────── */

.noscript {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
    padding: 2rem;
    background: var(--bg);
}
.noscript h1 { font-size: clamp(3rem, 10vw, 6rem); font-weight: 800; }
.noscript p  { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-hint); }
.noscript a  { color: var(--accent); text-decoration: none; }


/* ──────────────────────────────────────────
   13. PREFERS-REDUCED-MOTION
   Accessibility for users sensitive to motion
   (vestibular disorders, epilepsy).
────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero-hint { animation: none; opacity: 1; }

    .section-overlay.fade-in .section-label,
    .section-overlay.fade-in .section-title,
    .section-overlay.fade-in .section-body,
    .section-overlay.fade-in .section-word-list {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .cell.found  { animation: none; text-shadow: 0 0 10px var(--accent-glow); }
    .cell.glitch { animation: none; }
    /* .glitch-fail intentionally NOT disabled here: the global 0.01ms rule
       still fires animationend so the class is cleaned up (and the flash
       is invisible to reduced-motion users). */

    .section-word-list .word-item { animation: none; opacity: 1; }
}