/* ==========================================================================
   GAMJA — base: tokens, reset, typography, shared layers
   ========================================================================== */

:root {
    /* colour */
    --ink: #070506;
    --ink-2: #0d0a0b;
    --char: #141112;
    --char-2: #1c1819;
    --char-3: #272122;
    --blood: #3a0508;
    --red-deep: #7a0a14;
    --red: #e3182d;
    --red-hot: #ff3a4c;
    --gold: #d9a24a;
    --gold-2: #f3c86a;
    --soil: #7a4a22;
    --cream: #f4ead8;
    --sprout: #4fae45;

    --text: var(--cream);
    --muted: rgba(244, 234, 216, .64);
    --dim: rgba(244, 234, 216, .38);
    --line: rgba(244, 234, 216, .09);
    --line-2: rgba(244, 234, 216, .17);

    --glow-sm: 0 0 12px rgba(227, 24, 45, .55);
    --glow: 0 0 24px rgba(227, 24, 45, .5), 0 0 70px rgba(227, 24, 45, .22);

    /* type */
    --f-display: "Bricolage Grotesque", "Noto Sans KR", system-ui, sans-serif;
    --f-body: "Manrope", "Noto Sans KR", system-ui, sans-serif;
    --f-kr: "Black Han Sans", "Noto Sans KR", sans-serif;
    --f-kr-body: "Noto Sans KR", "Manrope", sans-serif;

    --fs-mega: clamp(4.5rem, 21vw, 22rem);
    --fs-h1: clamp(3rem, 7.4vw, 7.6rem);
    --fs-h2: clamp(2.6rem, 6.2vw, 6.4rem);
    --fs-h3: clamp(1.55rem, 2.5vw, 2.35rem);
    --fs-lead: clamp(1.05rem, 1.3vw, 1.28rem);
    --fs-body: 1.0625rem;
    --fs-small: .875rem;
    --fs-label: .75rem;

    /* layout */
    --gutter: clamp(16px, 4.2vw, 72px);
    --container: 1360px;
    --radius: 22px;
    --radius-lg: 34px;
    --header-h: 76px;

    /* motion */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--red-deep) var(--ink); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
    min-height: 100vh;
    background: var(--ink);
    color: var(--text);
    font-family: var(--f-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    font-weight: 450;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-x: clip;
}
img, picture, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; user-select: none; -webkit-user-drag: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1; }
::selection { background: var(--red); color: var(--cream); }
:focus-visible { outline: 2px solid var(--red-hot); outline-offset: 4px; border-radius: 6px; }
[lang="ko"] { word-break: keep-all; }

html.has-cursor, html.has-cursor * { cursor: none !important; }
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
}

/* ---------- utilities ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 10px 16px; border-radius: 10px; background: var(--red); color: var(--cream); font-weight: 700; transform: translateY(-160%); transition: transform .3s var(--ease-out); }
.skip-link:focus { transform: none; }
.icon { width: 1em; height: 1em; flex: none; }

.page { position: relative; z-index: 2; }
section { position: relative; }

/* Shared typographic roles */
.display { font-family: var(--f-display); font-weight: 800; letter-spacing: -.045em; line-height: .92; font-variation-settings: "opsz" 96; }
.kr-display { font-family: var(--f-kr); font-weight: 400; letter-spacing: -.01em; }

/* Gamja picture element */
.gamja-img { display: block; }
.gamja-img img { width: 100%; height: auto; pointer-events: none; }
[data-poke] { cursor: pointer; }

/* Line / word wrappers produced by SplitText */
.split-line { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split-line > * { display: inline-block; }

/* ---------- section label ---------- */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
}
.section-label__num { color: var(--red-hot); font-variant-numeric: tabular-nums; }
.section-label__line { width: 44px; height: 1px; background: linear-gradient(90deg, var(--red), transparent); transform-origin: left; }
.section-label__kr { font-family: var(--f-kr-body); letter-spacing: .04em; font-weight: 500; color: var(--dim); text-transform: none; }

/* ---------- fixed world layers ---------- */
.world {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    height: 100lvh;
    pointer-events: none;
}
.world-fallback {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60vmax 40vmax at 50% 38%, rgba(122, 10, 20, .45), transparent 70%),
        radial-gradient(40vmax 30vmax at 85% 90%, rgba(58, 5, 8, .6), transparent 70%),
        var(--ink);
}
html.has-webgl .world-fallback { background: radial-gradient(80vmax 60vmax at 50% 40%, rgba(40, 4, 8, .55), transparent 70%), var(--ink); }

.grain {
    position: fixed;
    inset: -50%;
    z-index: 90;
    pointer-events: none;
    opacity: .07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 1s steps(6) infinite;
}
@keyframes grain {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-3%, 2%); }
    40% { transform: translate(2%, -3%); }
    60% { transform: translate(-2%, -1%); }
    80% { transform: translate(3%, 3%); }
    100% { transform: translate(0, 0); }
}
.vignette {
    position: fixed;
    inset: 0;
    z-index: 89;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

/* ---------- reveal defaults (JS sets start states; no-JS shows everything) ---------- */
html.js [data-reveal="fade"], html.js [data-reveal="stagger"] > * { will-change: transform, opacity; }

html.has-cursor input[type="text"], html.has-cursor textarea { cursor: text !important; }

/* reduced motion: show everything statically */
html.reduced-motion .trait { opacity: 1; }
html.reduced-motion .trait__line { max-height: none; opacity: 1; margin-top: 10px; }
html.reduced-motion .trait__bar span { transform: scaleX(1); }