/* =====================================================================
 * About SSHOW — brand story page (v2).
 *
 * Refactor goals vs v1:
 *   • Layout was drifting right because `.about-section` was flex with
 *     the default row direction; multi-child sections spread instead of
 *     stacking. Now every section is a pure block centered by
 *     `margin: 0 auto` on its content. Zero surprise alignment.
 *   • Scrollbar gutter stabilised so the viewport doesn't jog when a
 *     section toggles a scrollable child.
 *   • Continuous (text) and Showcase (image) split — the editor shot
 *     sits right after the intro, so the first scroll delivers value.
 *   • New Usability section with four quiet cards (typography matches
 *     the pillar cards exactly).
 *   • A WebGL aurora canvas powers the intro backdrop (see about.js).
 *
 * Typography / color rules (unchanged, enforced):
 *   • Exactly ONE iridescent moment on the page — the hero SVG mark.
 *   • Every eyebrow / number / caption: 13px · 400 · 0.24em · muted.
 *   • Korean text never breaks mid-word. `word-break: keep-all` sits on
 *     the page root so every descendant inherits.
 * ===================================================================== */

/* ---------- Page shell ------------------------------------------------ */

/* The site-wide #wrapper-contents is `display:flex; align-items:center;
 * float:left;` with horizontal padding from --global-padding. The flex +
 * float combo paired with that padding caused the page to lean right
 * (empty space on the left). For the about page we want a pure block
 * column — every section centers itself with `margin: 0 auto` on its
 * inner content. So we collapse the wrapper to a clean block here. */
#wrapper-contents:has(#about-page) {
    padding: 0;
    margin: 0;
    display: block;
    float: none;
    align-items: initial;
    justify-content: initial;
    background-color: var(--global-body-background);
    overflow-x: clip;
}

/* No scrollbar-gutter override — letting the browser reserve gutter only
   when needed avoids the asymmetric look on macOS where it does not
   reserve at all and the symptom looked like "shifted right". */

#about-page {
    /* Iridescent palette flattened to monochrome — see variables.css
       `--brand-iridescent-gradient` for rationale. Kept as a custom
       property so consumers (hero SVG mark, aurora blobs) keep their
       existing references; the value is now a single brand tone. */
    --about-iridescent: var(--global-text-color);

    --about-section-pad-y: clamp(96px, 16vh, 200px);
    --about-section-pad-x: clamp(24px, 5vw, 80px);
    --about-content-max: 1080px;
    --about-content-narrow: 950px;
    --about-content-wide: 1240px;
    --about-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --about-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

    display: block;
    width: 100%;
    color: var(--global-text-color);
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: clip;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* ---------- Section base — BLOCK, not flex.
   Fixes the right-drift: flex row was stretching multi-child sections. */

.about-section {
    position: relative;
    display: block;
    width: calc(100% - var(--about-section-pad-x) * 2);
    padding: var(--about-section-pad-y) var(--about-section-pad-x);
    isolation: isolate;
    overflow: hidden;
}

.about-content {
    position: relative;
    width: 100%;
    max-width: var(--about-content-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vh, 36px);
    text-align: center;
    align-items: center;
}

.about-content-narrow { max-width: var(--about-content-narrow); }
.about-content-wide   { max-width: var(--about-content-wide); }

/* ---------- Shared atoms — unified with stage.css eyebrow spec */

.about-eyebrow {
    margin: 0;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--global-text-muted);
}

.about-eyebrow-light { color: rgba(255, 255, 255, 0.68); }

/* Orphan-word guard — balance short display/lead text so the final word
   never wraps onto a line by itself. Progressive enhancement: ignored
   where unsupported, and never alters box dimensions. */
.about-headline,
.about-headline-display,
.about-intro-title,
.about-pillar-title,
.about-usability-title,
.about-craft-title,
.about-cta-headline {
    text-wrap: balance;
}

.about-headline {
    margin: 0;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 900;
    font-size: clamp(34px, 5.4vw, 68px);
    line-height: 1.14;
    letter-spacing: -0.032em;
    color: var(--global-text-color);
    max-width: 35ch;
}

.about-headline-display {
    font-size: clamp(38px, 6.4vw, 84px);
    line-height: 1.1;
    letter-spacing: -0.038em;
}

.about-headline-line { display: block; }

.about-body {
    margin: 0;
    max-width: 640px;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.72;
    letter-spacing: -0.005em;
    color: var(--global-text-muted);
}

.about-body-wide { max-width: 720px; }

/* ---------- Reveal mechanic ----------------------------------------- */

[data-reveal],
[data-reveal-line],
[data-reveal-brand] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.9s var(--about-ease),
        transform 0.9s var(--about-ease-spring);
    will-change: opacity, transform;
}

.is-revealed[data-reveal],
.is-revealed [data-reveal-line],
.is-revealed [data-reveal-brand] {
    opacity: 1;
    transform: translateY(0);
}

.is-revealed [data-reveal-stagger="0"] { transition-delay: 0.05s; }
.is-revealed [data-reveal-stagger="1"] { transition-delay: 0.18s; }
.is-revealed [data-reveal-stagger="2"] { transition-delay: 0.31s; }
.is-revealed [data-reveal-stagger="3"] { transition-delay: 0.44s; }

/* ====================================================================
 * 01 · INTRO — WebGL aurora + brand mark + fade-in title
 * ==================================================================== */

.about-intro {
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    padding-top: clamp(80px, 12vh, 140px);
    padding-bottom: clamp(80px, 12vh, 140px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-intro-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3.2vh, 38px);
    text-align: center;
    width: 100%;
    max-width: var(--about-content-narrow);
    margin: 0 auto;
}

/* WebGL aurora canvas — drawn by about.js. Sits behind everything
   with a gentle luminosity so text still reads at 7:1 contrast. */
.about-aurora {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.55;
    pointer-events: none;
    mix-blend-mode: screen;
    transition: opacity 1.2s var(--about-ease);
}

/* Soft aura layer on top of the aurora, keeping the old vocabulary
   so dark-mode fallback (no WebGL) still feels alive. */
.about-aura-soft {
    position: absolute;
    inset: -25% -15% auto -15%;
    height: 110%;
    z-index: -1;
    background:
        radial-gradient(38% 48% at 22% 30%, rgba(var(--brand-violet-rgb), 0.18), transparent 70%),
        radial-gradient(34% 42% at 78% 22%, rgba(var(--brand-rose-rgb),   0.14), transparent 72%),
        radial-gradient(40% 46% at 62% 72%, rgba(var(--brand-teal-rgb),   0.14), transparent 70%),
        radial-gradient(36% 40% at 18% 78%, rgba(var(--brand-cognac-rgb), 0.12), transparent 72%);
    filter: blur(74px) saturate(120%);
    opacity: 0.7;
    pointer-events: none;
    animation: about-aura-drift 28s ease-in-out infinite alternate;
}

@keyframes about-aura-drift {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1) rotate(0deg); }
    50%  { transform: translate3d(2%, 1%, 0) scale(1.08) rotate(2deg); }
    100% { transform: translate3d(3%, -1%, 0) scale(1.04) rotate(-2deg); }
}

.about-mark {
    width: clamp(72px, 9vw, 116px);
    aspect-ratio: 603 / 958;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    animation: about-fade-in-mark 1.4s var(--about-ease-spring) 0.1s forwards;
}

.about-mark svg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Brand-tinted drop-shadow per DESIGN.md §6.2 — never plain black.
       Uses the brand-violet token; alphas track light vs. dark mode. */
    filter: drop-shadow(0 12px 40px rgba(var(--brand-violet-rgb), 0.22));
}

/* Mark stays static — no spin, no hue cycle, no sweep. The iridescent
   gradient + frozen sheen overlay carry the brand on their own. */
.about-mark-base {
    transform-origin: 50% 50%;
    transform-box: fill-box;
}

.about-mark-sweep {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    transform: rotate(20deg) translateX(-40%);
    mix-blend-mode: overlay;
}
@keyframes about-fade-in-mark {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes about-fade-in { to { opacity: 1; transform: translateY(0); } }

.about-overline {
    margin: 0;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--global-text-color);
    opacity: 0;
    transform: translateY(8px);
    animation: about-fade-in 1.1s var(--about-ease) 0.3s forwards;
}

.about-intro-title {
    margin: 0;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 300;
    font-size: clamp(26px, 4.2vw, 52px);
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--global-text-color);
    max-width: 35ch;
}

.about-intro-line {
    display: block;
    opacity: 0;
    transform: translateY(14px);
    animation: about-fade-in 1.2s var(--about-ease-spring) forwards;
}

.about-intro-line:nth-child(1) { animation-delay: 0.5s; }
.about-intro-line:nth-child(2) { animation-delay: 0.7s; }
.about-intro-line:nth-child(3) { animation-delay: 0.9s; }


/* ====================================================================
 * 02 · SHOWCASE — the real editor, moved up from old §07
 * The frame uses perspective so the scroll-driven tilt (JS) feels
 * physical without distorting the pixels.
 * ==================================================================== */

.about-showcase {
    padding-top: clamp(40px, 7vh, 88px);
    padding-bottom: clamp(80px, 14vh, 160px);
}

.about-showcase .about-content {
    margin-bottom: clamp(28px, 4vh, 56px);
}

.about-shot {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    perspective: 1800px;
}

.about-shot-frame {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    box-shadow:
        0 40px 120px -40px rgba(var(--global-text-color-rgb), 0.32),
        0 28px 80px -30px rgba(var(--global-text-color-rgb), 0.28),
        0 2px 8px rgba(var(--global-text-color-rgb), 0.05);
    transform: rotateX(8deg) scale(0.97);
    transform-origin: center 80%;
    transition: transform 1.6s var(--about-ease-spring);
}

.is-revealed .about-shot-frame {
    transform: rotateX(0deg) scale(1);
}

.about-shot-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    background: rgba(var(--global-text-color-rgb), 0.04);
    border-bottom: 1px solid var(--global-border-color);
}

.about-shot-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(var(--global-text-color-rgb), 0.16);
}

.about-shot-image {
    display: block;
    width: 100%;
    height: auto;
    background: #1d1d20;
}

/* Cursor-tracked glow — JS sets --glow-x / --glow-y on the frame */
.about-shot-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s var(--about-ease);
    background: radial-gradient(
        280px 280px at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(255, 255, 255, 0.20) 0%,
        rgba(255, 255, 255, 0.06) 30%,
        transparent 70%
    );
    mix-blend-mode: screen;
}

.about-shot-frame:hover .about-shot-glow { opacity: 1; }

.about-shot-caption {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--global-text-muted);
    text-align: center;
    max-width: 560px;
}

/* ====================================================================
 * 03 · PROBLEM
 * ==================================================================== */

.about-problem { background: var(--global-body-background); }

.about-pain-list {
    list-style: none;
    margin: clamp(18px, 2.5vh, 28px) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.about-pain-item {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    font-size: clamp(15px, 1.35vw, 17px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--global-text-color);
    opacity: 0.8;
}

.about-pain-item::before {
    content: '';
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    transform: translateY(-3px);
}

/* ====================================================================
 * 04 · REFRAME
 * ==================================================================== */

.about-reframe { background: var(--global-body-background); }

.about-reframe-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
        60% 60% at 50% 50%,
        rgba(var(--global-text-color-rgb), 0.08) 0%,
        rgba(var(--global-text-color-rgb), 0.04) 35%,
        transparent 75%
    );
    filter: blur(40px);
    pointer-events: none;
}

/* ====================================================================
 * 05 · PILLARS — magnetic hover driven by JS data-about-magnet
 * ==================================================================== */

.about-pillars-grid {
    list-style: none;
    margin: clamp(40px, 6vh, 72px) 0 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.4vw, 36px);
    text-align: left;
}

.about-pillar {
    position: relative;
    padding: clamp(28px, 3.4vw, 44px);
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Shadow direction — written by JS pointer tracking, defaults to top-left.
       Range: -1 → 1 on each axis. See about.js attachMagnetTilt(). */
    --hover-x: -1;
    --hover-y: -1;
    transition:
        transform 0.6s var(--about-ease-spring),
        box-shadow 0.6s var(--about-ease),
        border-color 0.6s var(--about-ease);
    transform-style: preserve-3d;
    will-change: transform;
}

/* Iridescent ambient hover — four directional colored drop-shadows so
   violet · rose · cognac · teal are all visible simultaneously around
   the card, like ambient light from a chromatic source. The cursor's
   position rotates the source axis (see --hover-x / --hover-y above). */
.about-pillar:hover {
    border-color: rgba(var(--global-text-color-rgb), 0.04);
    box-shadow:
        calc( 22px * var(--hover-x)) calc( 14px * var(--hover-y)) 56px -10px rgba(var(--brand-violet-rgb), 0.22),
        calc(-22px * var(--hover-x)) calc( 14px * var(--hover-y)) 56px -10px rgba(var(--brand-rose-rgb),   0.20),
        calc(-22px * var(--hover-x)) calc(-22px * var(--hover-y)) 60px -10px rgba(var(--brand-cognac-rgb), 0.18),
        calc( 22px * var(--hover-x)) calc(-22px * var(--hover-y)) 60px -10px rgba(var(--brand-teal-rgb),   0.22),
          0 28px 56px -24px rgba(var(--global-text-color-rgb), 0.10);
}

.about-pillar-num {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.24em;
    color: var(--global-text-muted);
}

.about-pillar-title {
    margin: 0;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.028em;
    color: var(--global-text-color);
}

.about-pillar-body {
    margin: 0;
    font-size: 15px;
    line-height: 1.68;
    color: var(--global-text-muted);
}

/* .about-pillars-grid .is-revealed[data-reveal][data-pillar="1"] { transition-delay: 0.1s; }
.about-pillars-grid .is-revealed[data-reveal][data-pillar="2"] { transition-delay: 0.25s; }
.about-pillars-grid .is-revealed[data-reveal][data-pillar="3"] { transition-delay: 0.4s; } */

/* ====================================================================
 * 06 · REVEAL — quiet punchline.
 *
 * Earlier this section was dark with a four-stop iridescent aura,
 * which fought the rest of the page (light body, single iridescent
 * moment on the hero mark only). It now sits on the body background
 * with a single hairline rule that draws in on reveal, an eyebrow,
 * a tight two-word line, and the wordmark in solid text color. No
 * theatrics, no "and we built it…" beat — just the punctuation.
 * ==================================================================== */

.about-reveal {
    background: var(--global-body-background);
    color: var(--global-text-color);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-reveal-content {
    position: relative;
    z-index: 1;
    gap: clamp(20px, 3.4vh, 40px);
}

/* Hairline that draws in horizontally on reveal — a quiet "page turn"
   instead of an aurora flare. Width transitions from 0 to 64px. */
.about-reveal-rule {
    display: block;
    width: 0;
    height: 1px;
    background: rgba(var(--global-text-color-rgb), 0.5);
    transition: width 1.1s var(--about-ease-spring) 0.05s;
}

.is-revealed .about-reveal-rule { width: 64px; }

.about-reveal-line {
    margin: 0;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 300;
    font-size: clamp(22px, 3vw, 38px);
    line-height: 1.35;
    letter-spacing: -0.018em;
    color: var(--global-text-muted);
}

.about-reveal-word {
    display: inline-block;
    margin-right: 0.3em;
}

.about-reveal-brand {
    margin: 0;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 900;
    font-size: clamp(64px, 12vw, 168px);
    line-height: 0.95;
    letter-spacing: -0.05em;
    color: var(--global-text-color);
}

.is-revealed [data-reveal-brand] {
    transition-duration: 1.2s;
    transition-delay: 0.35s;
}

/* ====================================================================
 * 07 · ENGINE
 * ==================================================================== */

.about-chip-row {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.about-chip {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 400;
    color: var(--global-text-color);
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    border-radius: 999px;
    transition: border-color 0.3s var(--about-ease), transform 0.3s var(--about-ease);
}

.about-chip:hover {
    border-color: rgba(var(--global-text-color-rgb), 0.32);
    transform: translateY(-2px);
}

/* Engine stats — quantitative spec strip. Big figure in display weight,
   tiny label in eyebrow spec. Sits in a 4-column grid that collapses to
   2-column on mobile. The figure uses tabular-nums so widths line up. */
.about-engine-stats {
    list-style: none;
    margin: clamp(28px, 4vh, 48px) 0 0;
    padding: clamp(24px, 3.2vh, 36px) 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 28px);
    border-top: 1px solid var(--global-border-color);
    border-bottom: 1px solid var(--global-border-color);
}

.about-engine-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.about-engine-stat-figure {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: clamp(34px, 4.4vw, 56px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--global-text-color);
    font-variant-numeric: tabular-nums;
    /* Single-token stat values (e.g. "WebGPU") must never break mid-word.
       Overrides the inherited `overflow-wrap: anywhere` from the section root. */
    overflow-wrap: normal;
    word-break: keep-all;
}

.about-engine-stat-label {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--global-text-muted);
    max-width: 18ch;
    line-height: 1.45;
}

/* Foundation line — the "everything you saw runs on this" closer.
   Hairline rule + small caption-weight text. Quiet, technical. */
.about-engine-foundation {
    margin: clamp(20px, 3vh, 32px) 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 640px;
}

.about-engine-foundation-rule {
    width: 32px;
    height: 1px;
    background: rgba(var(--global-text-color-rgb), 0.45);
}

.about-engine-foundation-text {
    font-size: clamp(14px, 1.25vw, 16px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: -0.005em;
    color: var(--global-text-color);
    text-align: center;
}

/* ====================================================================
 * 08 · CONTINUOUS — text only
 * ==================================================================== */

.about-continuous { background: var(--global-body-background); }

/* ====================================================================
 * 09 · USABILITY — quiet 2x2 grid of cards, mirroring pillars
 * ==================================================================== */

.about-usability {
    background: var(--global-body-background);
    position: relative;
}

.about-usability::before {
    content: '';
    position: absolute;
    inset: 10% 0 auto 0;
    height: 420px;
    z-index: 0;
    background:
        radial-gradient(40% 50% at 20% 50%, rgba(var(--brand-violet-rgb), 0.08), transparent 70%),
        radial-gradient(36% 42% at 82% 40%, rgba(var(--brand-teal-rgb),   0.07), transparent 72%);
    filter: blur(50px);
    pointer-events: none;
}

.about-usability .about-content { position: relative; z-index: 1; }

.about-usability-grid {
    list-style: none;
    margin: clamp(40px, 6vh, 72px) 0 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(18px, 2.2vw, 28px);
    text-align: left;
}

.about-usability-item {
    position: relative;
    padding: clamp(24px, 3vw, 36px);
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    --hover-x: -1;
    --hover-y: -1;
    transition:
        transform 0.6s var(--about-ease-spring),
        border-color 0.6s var(--about-ease),
        box-shadow 0.6s var(--about-ease);
}

.about-usability-item:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--global-text-color-rgb), 0.04);
    box-shadow:
        calc( 18px * var(--hover-x)) calc( 10px * var(--hover-y)) 46px -8px  rgba(var(--brand-violet-rgb), 0.18),
        calc(-18px * var(--hover-x)) calc( 10px * var(--hover-y)) 46px -8px  rgba(var(--brand-rose-rgb),   0.16),
        calc(-18px * var(--hover-x)) calc(-18px * var(--hover-y)) 50px -10px rgba(var(--brand-cognac-rgb), 0.14),
        calc( 18px * var(--hover-x)) calc(-18px * var(--hover-y)) 50px -10px rgba(var(--brand-teal-rgb),   0.18),
          0 22px 44px -22px rgba(var(--global-text-color-rgb), 0.08);
}

.about-usability-index {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.24em;
    color: var(--global-text-muted);
}

.about-usability-title {
    margin: 0;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.024em;
    color: var(--global-text-color);
}

.about-usability-body {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--global-text-muted);
}

/* .about-usability-grid .is-revealed[data-reveal][data-usability="1"] { transition-delay: 0.05s; }
.about-usability-grid .is-revealed[data-reveal][data-usability="2"] { transition-delay: 0.14s; }
.about-usability-grid .is-revealed[data-reveal][data-usability="3"] { transition-delay: 0.23s; }
.about-usability-grid .is-revealed[data-reveal][data-usability="4"] { transition-delay: 0.32s; } */

/* ====================================================================
 * 10 · CRAFT — distinctive engine capabilities
 * Same card vocabulary as usability, but a 3-column grid with brand-
 * tinted index numerals. The hover bloom uses the jewel palette
 * directly so the section reads as a peek into the engine's surface.
 * ==================================================================== */

.about-craft { background: var(--global-body-background); }
.about-craft .about-content { position: relative; z-index: 1; }

.about-craft-grid {
    list-style: none;
    margin: clamp(40px, 6vh, 72px) 0 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2.2vw, 28px);
    text-align: left;
}

.about-craft-item {
    position: relative;
    padding: clamp(22px, 2.6vw, 32px);
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    --hover-x: -1;
    --hover-y: -1;
    transition:
        transform 0.6s var(--about-ease-spring),
        border-color 0.6s var(--about-ease),
        box-shadow 0.6s var(--about-ease);
}

.about-craft-item:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--global-text-color-rgb), 0.04);
    box-shadow:
        calc( 18px * var(--hover-x)) calc( 10px * var(--hover-y)) 46px -8px  rgba(var(--brand-iris-rgb),     0.20),
        calc(-18px * var(--hover-x)) calc( 10px * var(--hover-y)) 46px -8px  rgba(var(--brand-mulberry-rgb), 0.16),
        calc(-18px * var(--hover-x)) calc(-18px * var(--hover-y)) 50px -10px rgba(var(--brand-brass-rgb),    0.14),
        calc( 18px * var(--hover-x)) calc(-18px * var(--hover-y)) 50px -10px rgba(var(--brand-lichen-rgb),   0.18),
          0 22px 44px -22px rgba(var(--global-text-color-rgb), 0.08);
}

.about-craft-num {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.24em;
    background-image: linear-gradient(
        135deg,
        var(--brand-iris) 0%,
        var(--brand-mulberry) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.about-craft-title {
    margin: 0;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: clamp(18px, 1.7vw, 22px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.022em;
    color: var(--global-text-color);
}

.about-craft-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--global-text-muted);
}

/* ====================================================================
 * 10b · SURFACES — where the finished work goes (Stage + Works)
 * Two destination cards beyond the canvas. Same card vocabulary as
 * pillars/craft: magnetic tilt (data-about-magnet → --hover-x/y),
 * pointer sheen (data-about-sheen → --mx/--my), jewel hover bloom.
 * Each card carries a small CSS-built motif — a showcase mosaic for
 * Stage, a /@handle profile for Works — so it reads at a glance.
 * ==================================================================== */

.about-surfaces { background: var(--global-body-background); }

.about-surfaces-grid {
    list-style: none;
    margin: clamp(40px, 6vh, 72px) 0 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(18px, 2.2vw, 28px);
    text-align: left;
}

.about-surface {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 3vw, 40px);
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2vw, 26px);
    text-decoration: none;
    color: inherit;
    --hover-x: -1;
    --hover-y: -1;
    transition:
        transform 0.6s var(--about-ease-spring),
        border-color 0.6s var(--about-ease),
        box-shadow 0.6s var(--about-ease);
}

.about-surface:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--global-text-color-rgb), 0.04);
    box-shadow:
        calc( 20px * var(--hover-x)) calc( 12px * var(--hover-y)) 52px -10px rgba(var(--brand-violet-rgb), 0.20),
        calc(-20px * var(--hover-x)) calc( 12px * var(--hover-y)) 52px -10px rgba(var(--brand-rose-rgb),   0.18),
        calc(-20px * var(--hover-x)) calc(-20px * var(--hover-y)) 56px -10px rgba(var(--brand-cognac-rgb), 0.16),
        calc( 20px * var(--hover-x)) calc(-20px * var(--hover-y)) 56px -10px rgba(var(--brand-teal-rgb),   0.20),
          0 26px 52px -24px rgba(var(--global-text-color-rgb), 0.10);
}

.about-surface-works:hover {
    box-shadow:
        calc( 20px * var(--hover-x)) calc( 12px * var(--hover-y)) 52px -10px rgba(var(--brand-iris-rgb),     0.20),
        calc(-20px * var(--hover-x)) calc( 12px * var(--hover-y)) 52px -10px rgba(var(--brand-mulberry-rgb), 0.18),
        calc(-20px * var(--hover-x)) calc(-20px * var(--hover-y)) 56px -10px rgba(var(--brand-brass-rgb),    0.16),
        calc( 20px * var(--hover-x)) calc(-20px * var(--hover-y)) 56px -10px rgba(var(--brand-lichen-rgb),   0.20),
          0 26px 52px -24px rgba(var(--global-text-color-rgb), 0.10);
}

/* Pointer-tracked sheen (data-about-sheen sets --mx/--my; gentle, fades
   in only on hover so the resting card stays calm). */
.about-surface-sheen {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s var(--about-ease);
    background: radial-gradient(
        220px 220px at var(--mx, 50%) var(--my, 50%),
        rgba(var(--global-text-color-rgb), 0.06) 0%,
        transparent 70%
    );
}

.about-surface:hover .about-surface-sheen { opacity: 1; }

.about-surface-head,
.about-surface > .about-surface-body,
.about-surface-cue,
.about-surface-visual { position: relative; z-index: 1; }

.about-surface-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-surface-kicker {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--global-text-muted);
}

.about-surface-title {
    margin: 0;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: -0.028em;
    color: var(--global-text-color);
}

.about-surface > .about-surface-body {
    display: block;
    margin: 0;
    font-size: 15px;
    line-height: 1.68;
    color: var(--global-text-muted);
}

/* ---------- Shared motif frame ---------- */
.about-surface-visual {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(var(--global-text-color-rgb), 0.03);
    border: 1px solid var(--global-border-color);
}

.about-surface-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    background: rgba(var(--global-text-color-rgb), 0.04);
    border-bottom: 1px solid var(--global-border-color);
}

.about-surface-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(var(--global-text-color-rgb), 0.16);
}

.about-surface-url {
    margin-left: 8px;
    padding: 2px 11px;
    border-radius: 999px;
    background: rgba(var(--global-text-color-rgb), 0.05);
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--global-text-muted);
    white-space: nowrap;
}

/* ---------- Stage motif — showcase mosaic ---------- */
.about-mosaic-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    padding: 12px;
    height: 150px;
}

.about-mosaic-hero,
.about-mosaic-tile {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(135deg,
            rgba(var(--brand-violet-rgb), 0.20),
            rgba(var(--brand-rose-rgb), 0.16) 55%,
            rgba(var(--brand-teal-rgb), 0.18));
    border: 1px solid rgba(var(--global-text-color-rgb), 0.05);
    transition: transform 0.6s var(--about-ease-spring);
}

.about-mosaic-hero {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    background:
        linear-gradient(150deg,
            rgba(var(--brand-violet-rgb), 0.28),
            rgba(var(--brand-rose-rgb), 0.20) 50%,
            rgba(var(--brand-cognac-rgb), 0.18));
}

.about-mosaic-tile:nth-child(3) {
    background:
        linear-gradient(135deg,
            rgba(var(--brand-teal-rgb), 0.22),
            rgba(var(--brand-violet-rgb), 0.16));
}

.about-mosaic-tile:nth-child(4) {
    background:
        linear-gradient(135deg,
            rgba(var(--brand-cognac-rgb), 0.20),
            rgba(var(--brand-rose-rgb), 0.16));
}

/* Play badge centred on the hero tile — reads as a playable showcase. */
.about-mosaic-play {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--global-card-background);
    box-shadow: 0 6px 18px -7px rgba(var(--global-text-color-rgb), 0.45);
    transition: transform 0.5s var(--about-ease-spring);
}

.about-mosaic-play::before {
    content: '';
    width: 0;
    height: 0;
    margin-left: 3px;
    border-left: 11px solid var(--global-primary-color);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.about-mosaic-play::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid rgba(var(--global-primary-color-rgb), 0.45);
    opacity: 0;
}

.about-surface-stage:hover .about-mosaic-hero { transform: scale(1.015); }
.about-surface-stage:hover .about-mosaic-play { transform: scale(1.1); }
.about-surface-stage:hover .about-mosaic-play::after { animation: aboutPlayPulse 1.7s var(--about-ease) infinite; }

@keyframes aboutPlayPulse {
    0%   { transform: scale(0.92); opacity: 0.55; }
    100% { transform: scale(1.55); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .about-surface-stage:hover .about-mosaic-play::after { animation: none; }
}

/* ---------- Works motif — /@handle profile ---------- */
.about-surface-profile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    height: 150px;
}

.about-profile-head {
    display: flex;
    align-items: center;
    gap: 9px;
}

.about-profile-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-iris) 0%, var(--brand-mulberry) 100%);
    border: 2px solid var(--global-card-background);
    box-shadow: 0 0 0 1px var(--global-border-color);
}

.about-profile-handle {
    display: inline-flex;
    align-self: flex-start;
    align-items: baseline;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.about-profile-host { color: var(--global-text-muted); }

.about-profile-at {
    background-image: linear-gradient(135deg, var(--brand-iris) 0%, var(--brand-mulberry) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.about-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 7px;
    flex: 1;
}

.about-profile-tile {
    border-radius: 8px;
    background:
        linear-gradient(135deg,
            rgba(var(--brand-iris-rgb), 0.18),
            rgba(var(--brand-mulberry-rgb), 0.14) 55%,
            rgba(var(--brand-lichen-rgb), 0.16));
    border: 1px solid rgba(var(--global-text-color-rgb), 0.05);
    transition: transform 0.6s var(--about-ease-spring);
}

.about-profile-tile:nth-child(2) {
    background:
        linear-gradient(135deg,
            rgba(var(--brand-lichen-rgb), 0.20),
            rgba(var(--brand-iris-rgb), 0.14));
}

.about-profile-tile:nth-child(3) {
    background:
        linear-gradient(135deg,
            rgba(var(--brand-brass-rgb), 0.18),
            rgba(var(--brand-mulberry-rgb), 0.14));
}

.about-profile-tile:nth-child(5) {
    background:
        linear-gradient(135deg,
            rgba(var(--brand-mulberry-rgb), 0.18),
            rgba(var(--brand-lichen-rgb), 0.14));
}

.about-profile-tile:nth-child(6) {
    background:
        linear-gradient(135deg,
            rgba(var(--brand-iris-rgb), 0.20),
            rgba(var(--brand-brass-rgb), 0.14));
}

.about-surface-works:hover .about-profile-tile { transform: scale(1.025); }

/* ---------- Cue row ---------- */
.about-surface-cue {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--global-text-color);
}

.about-surface-cue svg {
    width: 17px;
    height: 17px;
    transition: transform 0.4s var(--about-ease-spring);
}

.about-surface:hover .about-surface-cue svg { transform: translateX(4px); }

/* ====================================================================
 * 11 · VISION
 * ==================================================================== */

.about-vision {
    background: #0a0a0c;
    color: #ffffff;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-vision-aura {
    position: absolute;
    inset: -10%;
    z-index: 0;
    background:
        radial-gradient(50% 40% at 50% 30%, rgba(var(--brand-iris-rgb),     0.34), transparent 70%),
        radial-gradient(40% 35% at 30% 70%, rgba(var(--brand-lichen-rgb),   0.28), transparent 72%),
        radial-gradient(40% 35% at 70% 70%, rgba(var(--brand-mulberry-rgb), 0.28), transparent 72%);
    filter: blur(120px) saturate(125%);
    opacity: 0.6;
    pointer-events: none;
}

/* Constellation canvas — slow drifting brand-color particles connected
   by hairlines when close. Painted by about.js. Sits above the aura
   blobs but below text. Opacity stays gentle so the headline reads. */
.about-constellation {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.55;
    pointer-events: none;
    mix-blend-mode: screen;
}

.about-vision .about-content { position: relative; z-index: 1; }
.about-headline-vision { color: #ffffff; }
.about-body-vision { color: rgba(255, 255, 255, 0.78); }

/* ====================================================================
 * 12 · ONE MORE THING
 * ==================================================================== */

.about-tag-row {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.about-tag {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 400;
    color: var(--global-text-color);
    background: var(--global-card-background);
    border: 1px solid var(--global-border-color);
    border-radius: 999px;
    transition: transform 0.4s var(--about-ease-spring), border-color 0.4s var(--about-ease);
}

.about-tag:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--global-text-color-rgb), 0.3);
}

/* Stagger entry on reveal — gives the tag row a quiet wave. */
.is-revealed .about-tag {
    animation: about-tag-pop 0.7s var(--about-ease-spring) backwards;
}
.is-revealed .about-tag[data-tag="1"] { animation-delay: 0.10s; }
.is-revealed .about-tag[data-tag="2"] { animation-delay: 0.22s; }
.is-revealed .about-tag[data-tag="3"] { animation-delay: 0.34s; }
.is-revealed .about-tag[data-tag="4"] { animation-delay: 0.46s; }

@keyframes about-tag-pop {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ====================================================================
 * 13 · CTA
 * ==================================================================== */

.about-cta {
    min-height: 80vh;
    background: var(--global-body-background);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-cta-aura {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 100%;
    z-index: -1;
    background:
        radial-gradient(40% 50% at 25% 40%, rgba(var(--brand-violet-rgb), 0.18), transparent 70%),
        radial-gradient(36% 44% at 75% 30%, rgba(var(--brand-rose-rgb),   0.14), transparent 72%),
        radial-gradient(40% 46% at 60% 80%, rgba(var(--brand-teal-rgb),   0.14), transparent 70%);
    filter: blur(80px) saturate(118%);
    opacity: 0.85;
    pointer-events: none;
}

.about-cta-headline {
    margin: 0;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 900;
    font-size: clamp(38px, 5.6vw, 72px);
    line-height: 1.1;
    letter-spacing: -0.038em;
    color: var(--global-text-color);
}

.about-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(12px, 2vh, 20px);
}

.about-cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 26px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
    border-radius: 999px;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.35s var(--about-ease-spring),
        opacity 0.25s var(--about-ease),
        border-color 0.25s var(--about-ease),
        background 0.25s var(--about-ease),
        box-shadow 0.4s var(--about-ease);
}

.about-cta-button-label {
    position: relative;
    z-index: 2;
}

/* Pointer-tracked iridescent sheen — JS sets --mx / --my on the button.
   Fades in on hover, ties the CTA to the brand palette without making
   the button itself a permanent rainbow. */
.about-cta-button[data-about-sheen]::before {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: 1;
    border-radius: inherit;
    background: radial-gradient(
        140px 140px at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.18) 35%,
        rgba(255, 255, 255, 0.06) 60%,
        transparent 75%
    );
    opacity: 0;
    transition: opacity 0.35s var(--about-ease);
    pointer-events: none;
    mix-blend-mode: screen;
}

.about-cta-button[data-about-sheen]:hover::before {
    opacity: 1;
}

.about-cta-button-primary {
    background: var(--global-button-background-color);
    color: var(--global-button-text-color, var(--global-body-background));
    border: 1px solid transparent;
    box-shadow: 0 8px 24px -10px rgba(var(--global-text-color-rgb), 0.32);
}

.about-cta-button-primary:hover {
    transform: translateY(-3px);
    opacity: 0.92;
    box-shadow:
        0 18px 42px -16px rgba(var(--global-text-color-rgb), 0.45),
        0 8px 20px -8px rgba(var(--global-text-color-rgb), 0.20);
}

.about-cta-button-ghost {
    background: transparent;
    color: var(--global-text-color);
    border: 1px solid rgba(var(--global-text-color-rgb), 0.18);
}

.about-cta-button-ghost:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--global-text-color-rgb), 0.38);
    background: rgba(var(--global-text-color-rgb), 0.04);
}

/* Iridescent CTA — same recipe as the marketing header Studio
   button (`#button-header-studio` in index.css) and the editor Save
   button (`.header-editor-btn-iridescent` in studio/editor.css).
   Single source of truth: `--brand-iridescent-gradient` +
   `brand-iridescent-shift` keyframe in common.css.
   See docs/DESIGN.md §7.4. Used on the "See the stage" CTA
   so the entry point to /studio reads as the brand action across
   every surface (marketing header, About hero CTA, editor save). */
.about-cta-button-iridescent {
    background: var(--brand-iridescent-gradient,
        linear-gradient(135deg, #B85970 0%, #C97A6F 25%, #C99464 50%, #7595B5 80%, #6750D8 100%));
    background-size: 300% 300%;
    color: #fff;
    border: 1px solid transparent;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    animation: brand-iridescent-shift 20s ease infinite;
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.28);
}

.about-cta-button-iridescent:hover {
    /* Re-assert the gradient so the inherited base `transition:
       background` doesn't tween toward a flat color. Same defensive
       pattern as `.header-editor-btn-iridescent:hover`. */
    background: var(--brand-iridescent-gradient,
        linear-gradient(135deg, #B85970 0%, #C97A6F 25%, #C99464 50%, #7595B5 80%, #6750D8 100%));
    background-size: 300% 300%;
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px);
    opacity: 1;
    box-shadow:
        0 22px 48px -16px rgba(0, 0, 0, 0.40),
        0 10px 22px -8px rgba(0, 0, 0, 0.20);
}

/* ====================================================================
 * Responsive
 * ==================================================================== */

@media (max-width: 1100px) {
    .about-craft-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
    .about-pillars-grid { grid-template-columns: 1fr; }
    .about-usability-grid { grid-template-columns: 1fr; }
    .about-craft-grid { grid-template-columns: 1fr; }
    .about-surfaces-grid { grid-template-columns: 1fr; }
    .about-engine-stats { grid-template-columns: repeat(2, 1fr); }
    .about-headline-display { font-size: clamp(30px, 8vw, 48px); }
    .about-reveal-brand { font-size: clamp(64px, 22vw, 140px); }
    .about-cta-headline { font-size: clamp(32px, 8vw, 52px); }
    .about-intro-title  { font-size: clamp(22px, 6vw, 36px); }

    .about-shot-frame { transform: rotateX(4deg) scale(0.98); }
    .is-revealed .about-shot-frame { transform: rotateX(0deg) scale(1); }
}

/* ====================================================================
 * Reduced motion
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {
    .about-aurora,
    .about-constellation,
    .about-aura-soft,
    .about-mark,
    .about-overline,
    .about-intro-line,
    .about-scroll-hint,
    .about-scroll-hint-line::after,
    .about-vision-aura {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    [data-reveal],
    [data-reveal-line],
    [data-reveal-brand] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .about-shot-frame { transform: none !important; }

    .about-progress-fill,
    .about-cursor-bloom,
    .about-engine-shimmer { animation: none !important; transition: none !important; }
    .about-cursor-bloom { opacity: 0 !important; }
}

/* ====================================================================
 * Scroll progress bar — fixed jewel-gradient line at the very top.
 *   JS writes --about-scroll (0..1) on the bar; CSS scales the fill.
 *   Hidden until first scroll so the page opens clean.
 * ==================================================================== */

.about-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 100;
    pointer-events: none;
    background: transparent;
    --about-scroll: 0;
}

.about-progress-fill {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(var(--about-scroll));
    background: linear-gradient(
        90deg,
        var(--brand-iris)     0%,
        var(--brand-mulberry) 35%,
        var(--brand-brass)    65%,
        var(--brand-lichen)   100%
    );
    box-shadow: 0 0 12px rgba(var(--brand-iris-rgb), 0.45);
    transition: transform 0.12s linear, opacity 0.5s var(--about-ease);
    opacity: 0;
}

.about-progress[data-active="1"] .about-progress-fill { opacity: 1; }

/* ====================================================================
 * Cursor-tracked ambient bloom — single fixed radial that follows the
 * pointer across the whole page. Sits beneath every section; multiplies
 * the existing aurora's ambient warmth into wherever the eye sits.
 *   JS sets --cursor-x/y (px) on #about-page; CSS positions a radial.
 *   pointer-events:none, mix-blend so it never grabs hits or covers text.
 * ==================================================================== */

#about-page {
    /* default centre so the bloom isn't stuck at (0,0) before first move */
    --cursor-x: 50vw;
    --cursor-y: 40vh;
}

.about-cursor-bloom {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s var(--about-ease);
    background:
        radial-gradient(
            420px 420px at var(--cursor-x) var(--cursor-y),
            rgba(var(--brand-iris-rgb), 0.10),
            rgba(var(--brand-mulberry-rgb), 0.06) 35%,
            rgba(var(--brand-brass-rgb), 0.04) 60%,
            transparent 75%
        );
    mix-blend-mode: screen;
    filter: blur(20px) saturate(115%);
    will-change: background;
}

#about-page[data-cursor-active="1"] .about-cursor-bloom { opacity: 1; }

@media (pointer: coarse) {
    .about-cursor-bloom { display: none; }
}

/* ====================================================================
 * Engine section backdrop — SVG grid + slow diagonal shimmer.
 * Reads like a quiet engineering blueprint behind the headline.
 * ==================================================================== */

.about-engine { position: relative; }

.about-engine-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    color: var(--global-text-color);
    pointer-events: none;
    opacity: 0.55;
}

.about-engine-shimmer {
    position: absolute;
    inset: -10%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(28% 50% at 25% 30%, rgba(var(--brand-iris-rgb), 0.12), transparent 70%),
        radial-gradient(28% 50% at 80% 70%, rgba(var(--brand-lichen-rgb), 0.10), transparent 72%);
    filter: blur(40px) saturate(110%);
    opacity: 0.85;
    animation: about-engine-shimmer-drift 22s ease-in-out infinite alternate;
}

@keyframes about-engine-shimmer-drift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
    100% { transform: translate3d(3%, 2%, 0) scale(1.05); }
}

/* Engine stats — slight bloom on hover, brand-tinted figure on hover.
   Pure CSS, no JS needed. */
.about-engine-stat {
    transition: transform 0.5s var(--about-ease-spring), color 0.5s var(--about-ease);
}

.about-engine-stat:hover .about-engine-stat-figure {
    background-image: linear-gradient(
        135deg,
        var(--brand-iris) 0%,
        var(--brand-mulberry) 50%,
        var(--brand-brass) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-image 0.4s var(--about-ease);
}