/* ============================================================================
   OakTree Games — Landing Page Styles
   Hero stage (living-oak centerpiece + hotspots), game strip, growth report,
   devlog strip, per-game card identities, feature grid, tier ladder, ticker,
   ARIA quote, big CTA.
   2026-07-11: dead v1 blocks pruned (hero-grid/preview/meta, showcase,
   kardashev-tease, tilt, corner emblem — git history keeps them); the v2
   landing styles that lived inline in index.html now live here where they
   cache and participate in the design system.
   ============================================================================ */

/* ---------- THE SKY BAND ----------
   The living painted welcome above the hero, drawn by main.js. Height is
   claimed by html.sky-live (set by an inline <head> script before first
   paint, so the band never causes layout shift) — with JS off the class
   is absent and the band simply doesn't exist. The CSS gradient is only
   the pre-first-frame backdrop; the canvas paints everything real. */
.skyband {
    position: relative;
    height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #04060e 0%, #0b101e 68%, var(--bg-void) 100%);
}
html.sky-live .skyband {
    height: 58vh;
    min-height: 380px;
}
@media (max-width: 980px) {
    html.sky-live .skyband { height: 46vh; min-height: 300px; }
}
.skyband canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- HERO ---------- */
.hero {
    position: relative;
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: var(--sp-9) 0;
}
@media (max-width: 980px) {
    .hero { min-height: auto; padding: var(--sp-7) 0; }
}

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-pixel);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-oak);
    background: rgba(124,192,134,0.08);
    border: 1px solid var(--line-soft);
    padding: 6px 12px;
    margin-bottom: var(--sp-4);
}
.hero-eyebrow span.dot {
    width: 8px; height: 8px; background: var(--accent-oak);
    box-shadow: 0 0 10px var(--accent-oak);
    animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot { 50% { opacity: 0.35; } }

.hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 6.4vw, 92px);
    line-height: 0.98;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-5);
    color: var(--text-pri);
}
.hero-title .accent {
    background: linear-gradient(120deg, var(--accent-oak), var(--accent-aurora), var(--accent-cosmic));
    background-size: 200% 100%;
    background-position: 0 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: shift-gradient 8s ease-in-out infinite;
}
@keyframes shift-gradient { 50% { background-position: 100% 50%; } }

.hero-sub {
    font-size: clamp(15px, 1.4vw, 18px);
    color: var(--text-sec);
    max-width: 52ch;
    margin-bottom: var(--sp-6);
    line-height: 1.65;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

/* The text column leaves the right side of the viewport to the oak crown
   (drawn on the fixed canvas by main.js). Below 980px the crown thins out
   and drifts behind the content instead. */
.hero .hero-content { max-width: 600px; position: relative; z-index: 2; }

/* ---------- HERO: living-oak hotspots ----------
   The crown itself is canvas (pointer-events:none, behind content), so the
   interactive pieces are real DOM: one focusable <a> per game-fruit and a
   <button> over the trunk that counts the growth rings. main.js positions
   them in the hero's coordinate space after building the skeleton; they're
   desktop-only (≤980px hides them — the game chips right below the headline
   carry the same three links everywhere). */
.oak-hotspots {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.oak-fruit-hotspot {
    position: absolute;
    width: 64px; height: 64px;
    margin: -32px 0 0 -32px;
    pointer-events: auto;
    border-radius: 50%;
    display: none; /* shown by main.js once positioned */
}
.oak-fruit-hotspot:focus-visible {
    outline: 2px dashed var(--fruit-color, var(--accent-oak));
    outline-offset: 4px;
}
.oak-fruit-hotspot .fruit-tip {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    white-space: nowrap;
    padding: 7px 11px;
    background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
    border: 1px solid var(--fruit-color, var(--accent-oak));
    color: var(--text-pri);
    font-family: var(--font-pixel);
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms cubic-bezier(.21,.92,.32,1);
}
.oak-fruit-hotspot .fruit-tip small {
    display: block;
    margin-top: 3px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-sec);
}
.oak-fruit-hotspot:hover .fruit-tip,
.oak-fruit-hotspot:focus-visible .fruit-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.oak-rings-hotspot {
    position: absolute;
    width: 76px; height: 170px;
    margin: -85px 0 0 -38px;
    pointer-events: auto;
    cursor: pointer;
    background: none;
    border: none;
    display: none; /* shown by main.js once positioned */
}
.oak-rings-hotspot:focus-visible {
    outline: 2px dashed var(--accent-cosmic);
    outline-offset: 4px;
}
.oak-fact {
    position: absolute;
    max-width: 300px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--bg-panel) 90%, transparent);
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--accent-cosmic);
    color: var(--text-sec);
    font-size: 14px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 320ms ease, transform 320ms cubic-bezier(.21,.92,.32,1);
    pointer-events: none;
}
.oak-fact.is-live {
    opacity: 1;
    transform: translateY(0);
}
.oak-fact .fact-kicker {
    display: block;
    font-family: var(--font-pixel);
    font-size: 7px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-cosmic);
    margin-bottom: 4px;
}
@media (max-width: 980px) {
    .oak-hotspots { display: none; }
}

/* Scroll cue at the hero's floor — the tree keeps growing below. */
.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 2;
    font-family: var(--font-pixel);
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-mute);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    animation: cue-drift 3.2s ease-in-out infinite;
}
@keyframes cue-drift {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.75; }
    50%      { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* ---------- HERO: the three games, named up front ---------- */
.hero-game-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--sp-5);
}
.hero-game-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border: 1px solid var(--line-faint);
    background: color-mix(in srgb, var(--bg-panel) 62%, transparent);
    text-decoration: none;
    color: var(--text-pri);
    font-family: var(--font-pixel);
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: transform 220ms cubic-bezier(.21,.92,.32,1),
                border-color 220ms ease, box-shadow 220ms ease;
}
.hero-game-chip small {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-mute);
}
.hero-game-chip .chip-dot {
    width: 6px; height: 6px;
    background: var(--chip, var(--accent-oak));
    box-shadow: 0 0 8px var(--chip, var(--accent-oak));
    flex: none;
}
.hero-game-chip:hover,
.hero-game-chip:focus-visible {
    transform: translateY(-2px);
    border-color: var(--chip, var(--accent-oak));
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
}

/* ---------- Growth report: one honest status line per game ---------- */
.growth-report {
    margin-top: var(--sp-5);
    border: 1px solid var(--line-faint);
    background: var(--bg-panel);
}
.growth-row {
    display: grid;
    grid-template-columns: 12px auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px dashed var(--line-faint);
    text-decoration: none;
    color: inherit;
    transition: background 200ms ease;
}
.growth-row:last-child { border-bottom: none; }
.growth-row:hover,
.growth-row:focus-visible { background: rgba(124, 192, 134, 0.05); }
.growth-dot {
    width: 8px; height: 8px;
    background: var(--row-accent, var(--accent-oak));
    box-shadow: 0 0 6px var(--row-accent, var(--accent-oak));
    animation: lg-dot-pulse 2.8s ease-in-out infinite;
}
.growth-row:nth-child(2) .growth-dot { animation-delay: 0.9s; }
.growth-row:nth-child(3) .growth-dot { animation-delay: 1.8s; }
@keyframes lg-dot-pulse {
    0%, 100% { box-shadow: 0 0 3px var(--row-accent, var(--accent-oak)); }
    50%      { box-shadow: 0 0 12px var(--row-accent, var(--accent-oak)); }
}
.growth-name {
    font-family: var(--font-pixel);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-pri);
    white-space: nowrap;
}
.growth-status {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-sec);
}
.growth-go {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--row-accent, var(--accent-oak));
    transition: transform 200ms cubic-bezier(.21,.92,.32,1);
}
.growth-row:hover .growth-go,
.growth-row:focus-visible .growth-go { transform: translateX(4px); }
@media (max-width: 640px) {
    .growth-row { grid-template-columns: 12px 1fr auto; }
    .growth-status { grid-column: 1 / -1; padding-left: 24px; margin-top: -4px; }
}

/* ---------- Latest-from-the-devlog strip ---------- */
.devlog-strip { margin-top: var(--sp-5); }
.devlog-strip-link {
    display: block;
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg-panel);
    border: 1px solid var(--line-faint);
    border-left: 3px solid var(--accent-cosmic);
    text-decoration: none;
    color: inherit;
    transition: transform 220ms cubic-bezier(.21,.92,.32,1),
                border-color 220ms ease, box-shadow 220ms ease;
}
.devlog-strip-link:hover,
.devlog-strip-link:focus-visible {
    transform: translateY(-2px);
    border-color: var(--accent-cosmic);
    box-shadow: var(--shadow-pixel-md);
}
.dstrip-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: var(--sp-3);
}
.dstrip-kicker {
    font-family: var(--font-pixel);
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-cosmic);
}
.dstrip-week {
    font-family: var(--font-pixel);
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.dstrip-cat {
    display: none;
    padding: 3px 8px;
    font-family: var(--font-pixel);
    font-size: 7px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid var(--dstrip-cat-color, var(--line-soft));
    color: var(--dstrip-cat-color, var(--text-sec));
}
.dstrip-title {
    font-family: var(--font-pixel);
    font-size: 12px;
    line-height: 1.7;
    margin: 0 0 var(--sp-3);
    color: var(--text-pri);
    text-transform: none;
    transition: color 200ms ease;
}
.devlog-strip-link:hover .dstrip-title { color: var(--accent-cosmic); }
.dstrip-teaser {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-sec);
    margin: 0 0 var(--sp-3);
}
.dstrip-cta {
    display: inline-block;
    font-family: var(--font-pixel);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-oak);
    transition: transform 200ms cubic-bezier(.21,.92,.32,1);
}
.devlog-strip-link:hover .dstrip-cta { transform: translateX(4px); }
.dstrip-hook {
    margin-top: var(--sp-3);
    font-size: 14px;
    color: var(--text-mute);
}

/* ---------- Game cards: one distinct hover identity per game ----------
   A .lg-fx overlay div sits inside each cover (above the art, below the
   status badge). It fades in on hover / keyboard focus. */
#games .game-card .cover-type { z-index: 2; }
#games .game-card .lg-fx {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 420ms ease;
}
#games .game-card:hover .lg-fx,
#games .game-card:focus-within .lg-fx { opacity: 1; }
#games .game-card .lg-fx::before,
#games .game-card .lg-fx::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

/* Cosmic Scale — a quiet starfield settles over the key art */
.lg-cosmic .lg-fx {
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.85) 50%, transparent 51%),
        radial-gradient(1px 1px at 24% 68%, rgba(255,255,255,0.50) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 33% 28%, rgba(255,216,107,0.80) 50%, transparent 51%),
        radial-gradient(1px 1px at 47% 82%, rgba(255,255,255,0.55) 50%, transparent 51%),
        radial-gradient(1px 1px at 58% 14%, rgba(255,255,255,0.80) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 71% 52%, rgba(102,224,198,0.70) 50%, transparent 51%),
        radial-gradient(1px 1px at 84% 30%, rgba(255,255,255,0.60) 50%, transparent 51%),
        radial-gradient(1px 1px at 92% 74%, rgba(255,255,255,0.50) 50%, transparent 51%),
        linear-gradient(180deg, rgba(4,6,13,0.55), rgba(4,6,13,0.18) 55%, rgba(6,16,10,0.40));
}
.lg-cosmic .lg-fx::before {
    inset: 0;
    opacity: 0.4;
    background-image:
        radial-gradient(1px 1px at 16% 44%, rgba(255,255,255,0.90) 50%, transparent 51%),
        radial-gradient(1px 1px at 29% 12%, rgba(255,255,255,0.65) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 41% 58%, rgba(255,216,107,0.85) 50%, transparent 51%),
        radial-gradient(1px 1px at 55% 36%, rgba(255,255,255,0.70) 50%, transparent 51%),
        radial-gradient(1px 1px at 68% 80%, rgba(255,255,255,0.60) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 79% 18%, rgba(165,131,255,0.70) 50%, transparent 51%),
        radial-gradient(1px 1px at 90% 48%, rgba(255,255,255,0.75) 50%, transparent 51%);
}
#games .lg-cosmic:hover .lg-fx::before,
#games .lg-cosmic:focus-within .lg-fx::before {
    animation: lg-twinkle 2.8s ease-in-out infinite;
}
@keyframes lg-twinkle {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}
#games .lg-cosmic:hover,
#games .lg-cosmic:focus-within {
    box-shadow: var(--shadow-pixel-lg), 0 0 26px rgba(255, 216, 107, 0.16);
}

/* Infinite Initiative — the table gets its felt */
.lg-ii .lg-fx {
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(255,216,107,0.09), transparent 55%),
        radial-gradient(150% 130% at 50% 60%, rgba(24,94,56,0.60), rgba(6,34,20,0.85));
    box-shadow: inset 0 0 0 2px rgba(255,216,107,0.20), inset 0 0 48px rgba(0,0,0,0.50);
}
#games .lg-ii .lg-fx::after {
    content: "\2660 \2665 \2666 \2663"; /* spade heart diamond club */
    left: 0; right: 0; bottom: 12px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 20px;
    letter-spacing: 0.6em;
    color: rgba(255, 216, 107, 0.45);
    transform: translateY(8px);
    transition: transform 420ms cubic-bezier(.21,.92,.32,1);
}
#games .lg-ii:hover .lg-fx::after,
#games .lg-ii:focus-within .lg-fx::after { transform: translateY(0); }
#games .lg-ii:hover,
#games .lg-ii:focus-within {
    box-shadow: var(--shadow-pixel-lg), 0 0 26px rgba(46, 138, 86, 0.22);
}

/* Cc: — two clock hands sweep the face: the day runs at whatever speed
   you earn. Same two-pseudo-element structure the card system gives every
   .lg-fx; here they're hands pinned at the center, not rings. */
.lg-cc .lg-fx {
    background: radial-gradient(90% 90% at 50% 50%, rgba(77,240,138,0.12), rgba(5,12,8,0.55));
}
.lg-cc .lg-fx::before,
.lg-cc .lg-fx::after {
    left: 50%; top: 50%;
    width: 2px;
    background: rgba(77, 240, 138, 0.70);
    transform-origin: 50% 100%;
    transform: translate(-50%, 0) rotate(0deg);
    opacity: 0;
}
.lg-cc .lg-fx::before { height: 48px; margin-top: -48px; }
.lg-cc .lg-fx::after  { height: 30px; margin-top: -30px; background: rgba(77, 240, 138, 0.40); }
#games .lg-cc:hover .lg-fx::before,
#games .lg-cc:focus-within .lg-fx::before {
    animation: lg-cc-sweep 2.4s linear infinite;
}
#games .lg-cc:hover .lg-fx::after,
#games .lg-cc:focus-within .lg-fx::after {
    animation: lg-cc-sweep 14s linear infinite;
}
/* Opacity rides the keyframes (not the hover rule) so that when animation
   is killed for reduced motion the hands simply never appear — the same
   contract the ring effect that lived here used. */
@keyframes lg-cc-sweep {
    from { opacity: 1; transform: translate(-50%, 0) rotate(0deg); }
    to   { opacity: 1; transform: translate(-50%, 0) rotate(360deg); }
}
.lg-cc .cover-type-title { transition: text-shadow 300ms ease; }
#games .lg-cc:hover .cover-type-title,
#games .lg-cc:focus-within .cover-type-title {
    text-shadow: 0 0 14px rgba(77, 240, 138, 0.9);
}
#games .lg-cc:hover,
#games .lg-cc:focus-within {
    border-color: #4df08a;
    box-shadow: var(--shadow-pixel-lg), 0 0 26px rgba(77, 240, 138, 0.20);
}

/* ---------- TICKER ---------- */
.ticker {
    overflow: hidden;
    border-top: 1px solid var(--line-faint);
    border-bottom: 1px solid var(--line-faint);
    background: rgba(0,0,0,0.4);
    padding: 14px 0;
    margin-top: 0;
}
.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker-slide 38s linear infinite;
    gap: var(--sp-6);
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}
.ticker-item::before {
    content: "▶";
    color: var(--accent-oak);
    font-size: 8px;
}
@keyframes ticker-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- FEATURE GRID ---------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
    margin-top: var(--sp-6);
}
@media (max-width: 880px) {
    .feature-grid { grid-template-columns: 1fr; }
}
.feature-card {
    background: var(--bg-panel);
    border: 1px solid var(--line-faint);
    padding: var(--sp-5);
    position: relative;
    /* shared interaction tokens (main.css) — snappy lift, softer glow tail */
    transition: transform var(--t-press) var(--ease-settle),
                border-color var(--t-quick) ease,
                box-shadow var(--t-settle) ease;
}
.feature-card:hover {
    border-color: var(--accent-oak);
    transform: translateY(-3px);
    box-shadow: var(--shadow-pixel-md), var(--glow-lift);
}
.feature-card .icon {
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(124,192,134,0.10);
    border: 1px solid var(--line-soft);
    color: var(--accent-oak);
    font-family: var(--font-pixel);
    font-size: 22px;
    margin-bottom: var(--sp-4);
}
.feature-card h3 {
    font-family: var(--font-pixel);
    font-size: 14px;
    letter-spacing: 0.04em;
    margin-bottom: var(--sp-3);
}
.feature-card p { font-size: 14px; line-height: 1.6; }

/* ---------- TIER LADDER ----------
   Eight tier-cards laid out as a grid that wraps responsively. Each
   card has its own --tier-bg color (passed inline) plus a layered
   background that includes a per-tier radial glow + a pixel-grid
   pattern for texture. Hover is instant (no easing delay on
   transform) so the user gets immediate feedback. */
.tier-ladder {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    margin-top: var(--sp-6);
}
@media (max-width: 980px) {
    .tier-ladder { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 540px) {
    .tier-ladder { grid-template-columns: repeat(2, 1fr); }
}
.tier-card {
    position: relative;
    padding: var(--sp-4) var(--sp-3);
    text-align: center;
    border: 1px solid var(--line-faint);
    background:
        radial-gradient(ellipse 100% 60% at 50% 100%,
            color-mix(in srgb, var(--tier-bg, var(--accent-oak)) 14%, transparent),
            transparent 70%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--tier-bg, var(--accent-oak)) 6%, var(--bg-panel)) 0%,
            var(--bg-panel) 100%);
    overflow: hidden;
    cursor: default;
    /* Snappier hover: transform is 110ms (was 220ms) so the lift fires
       immediately on cursor entry. Color/border transitions stay 200ms
       for a softer glow. */
    transition: transform 110ms cubic-bezier(.16, 1, .32, 1),
                border-color 200ms ease,
                box-shadow 200ms ease;
    will-change: transform;
}
/* top bar in tier color */
.tier-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0;
    height: 3px;
    background: var(--tier-bg, var(--accent-oak));
    box-shadow: 0 0 12px color-mix(in srgb, var(--tier-bg, var(--accent-oak)) 50%, transparent);
}
/* faint pixel-grid texture overlay */
.tier-card::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 8px 8px;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 200ms ease;
}
.tier-card:hover {
    /* instant lift */
    transform: translateY(-6px);
    border-color: var(--tier-bg, var(--accent-oak));
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 0 1px color-mix(in srgb, var(--tier-bg, var(--accent-oak)) 30%, transparent),
        0 0 28px color-mix(in srgb, var(--tier-bg, var(--accent-oak)) 35%, transparent);
}
.tier-card:hover::after { opacity: 1; }
/* Keyboard focus parity */
.tier-card:focus-visible {
    outline: none;
    transform: translateY(-6px);
    border-color: var(--tier-bg, var(--accent-oak));
    box-shadow: 0 0 0 2px var(--tier-bg, var(--accent-oak));
}
.tier-card .label {
    position: relative; z-index: 1;
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--tier-bg, var(--accent-oak));
    letter-spacing: 0.06em;
    text-shadow: 0 0 10px color-mix(in srgb, var(--tier-bg, var(--accent-oak)) 50%, transparent);
}
.tier-card .name {
    position: relative; z-index: 1;
    margin-top: var(--sp-2);
    font-size: 12px;
    color: var(--text-pri);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.tier-card .blurb {
    position: relative; z-index: 1;
    font-size: 11px;
    color: var(--text-mute);
    margin-top: var(--sp-2);
    line-height: 1.4;
}

/* ---------- BIOME PREVIEW STRIP ---------- */
.biome-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-6);
}
.biome-card {
    aspect-ratio: 4 / 5;
    background: var(--bg-panel);
    border: 1px solid var(--line-faint);
    position: relative;
    overflow: hidden;
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
    transition: transform 220ms ease, border-color 220ms ease;
}
.biome-card:hover {
    transform: translateY(-4px);
    border-color: var(--biome-color, var(--accent-oak));
}
.biome-card::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--biome-bg, linear-gradient(180deg, #2e4a2c, #1a2d18));
    opacity: 0.78;
}
.biome-card::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.20), transparent 35%),
        radial-gradient(circle at 70% 70%, rgba(0,0,0,0.45), transparent 50%);
    mix-blend-mode: overlay;
}
.biome-card-content {
    position: relative;
    z-index: 2;
}
.biome-card-content h4 {
    font-family: var(--font-pixel);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #ffffff;
    text-shadow: 0 2px 0 rgba(0,0,0,0.5);
    margin-bottom: 4px;
}
.biome-card-content span {
    display: inline-block;
    padding: 2px 8px;
    font-family: var(--font-pixel);
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.8);
}

/* ---------- ARIA QUOTE ---------- */
.aria-quote {
    margin-top: var(--sp-8);
    padding: var(--sp-6);
    background: linear-gradient(135deg, rgba(102,224,198,0.06), rgba(165,131,255,0.04));
    border: 1px solid var(--line-soft);
    position: relative;
    overflow: hidden;
}
.aria-quote::before {
    content: "ARIA";
    position: absolute;
    top: 8px; right: 16px;
    font-family: var(--font-pixel);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--accent-aurora);
    opacity: 0.7;
}
.aria-quote::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent-aurora);
    box-shadow: 0 0 16px var(--accent-aurora);
}
.aria-quote p {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--text-pri);
    line-height: 1.7;
    max-width: 64ch;
}
.aria-quote .signoff {
    display: block;
    margin-top: var(--sp-3);
    font-family: var(--font-pixel);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--accent-aurora);
}

/* ---------- BIG CTA ---------- */
.cta-big {
    padding: var(--sp-9) 0;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(124,192,134,0.12), transparent 60%),
        linear-gradient(180deg, transparent, rgba(0,0,0,0.5));
    position: relative;
}
.cta-big h2 {
    font-size: clamp(32px, 5vw, 60px);
    margin-bottom: var(--sp-4);
}
.cta-big p {
    margin: 0 auto var(--sp-6) auto;
    max-width: 56ch;
    color: var(--text-sec);
    font-size: 17px;
}
.cta-row {
    display: inline-flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center;
}

/* ---------- PIXEL ART FRAME WRAPPER ---------- */
.pix-frame {
    padding: 8px;
    background: var(--bg-panel-hi);
    border: 1px solid var(--line-soft);
    position: relative;
}
.pix-frame::before,
.pix-frame::after {
    content: "";
    position: absolute;
    background: var(--accent-oak);
    width: 8px; height: 8px;
}
.pix-frame::before { top: -1px; left: -1px; }
.pix-frame::after  { bottom: -1px; right: -1px; }


/* ============================================================================
   THE LIVING OAK — landing centerpiece + background tree (drawn by main.js)
   ----------------------------------------------------------------------------
   One continuous procedural oak: the crown grows in the hero viewport the
   moment the page loads (interactive — game-fruits, wind, ring-facts), and
   the same trunk keeps growing down the page in document space as you
   scroll. Layering: .grove gradients (-10) < tree (-2) < grove ambient
   particles (-1) < content. Sections tagged data-oak-branch hide ONLY while
   the engine is running (html.oak-growing) and pop in when their branch
   arrives — with JS off, everything is visible.
   ============================================================================ */
.oak-tree-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -2;
}
html.oak-growing [data-oak-branch] {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    transition:
        opacity 720ms cubic-bezier(0.22, 0.9, 0.32, 1),
        transform 720ms cubic-bezier(0.22, 0.9, 0.32, 1);
    will-change: opacity, transform;
}
html.oak-growing [data-oak-branch].is-grown {
    opacity: 1;
    transform: none;
}

/* ---------- REDUCED MOTION (landing-specific mirrors) ----------
   The global prefers-reduced-motion kill in main.css already zeroes every
   animation/transition; these mirrors also honor the site's own settings
   toggle (html[data-motion="reduced"]) for the landing's bespoke pieces. */
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-cue { animation: none; opacity: 0.75; }
}
html[data-motion="reduced"] .growth-dot,
html[data-motion="reduced"] .hero-eyebrow span.dot,
html[data-motion="reduced"] .hero-title .accent,
html[data-motion="reduced"] .hero-scroll-cue,
html[data-motion="reduced"] .ticker-track,
html[data-motion="reduced"] #games .game-card .lg-fx::before,
html[data-motion="reduced"] #games .game-card .lg-fx::after { animation: none !important; }
html[data-motion="reduced"] .lg-cc .lg-fx::before,
html[data-motion="reduced"] .lg-cc .lg-fx::after { display: none; }
html[data-motion="reduced"] #games .lg-ii .lg-fx::after { transform: none; transition: none; }
html[data-motion="reduced"] .hero-game-chip:hover,
html[data-motion="reduced"] .hero-game-chip:focus-visible,
html[data-motion="reduced"] .growth-row:hover .growth-go,
html[data-motion="reduced"] .growth-row:focus-visible .growth-go,
html[data-motion="reduced"] .devlog-strip-link:hover,
html[data-motion="reduced"] .devlog-strip-link:focus-visible,
html[data-motion="reduced"] .devlog-strip-link:hover .dstrip-cta { transform: none !important; }


/* ============================================================================
   THE 3D LANDING (js/scene-oak.js) · layout under html.oak3d-live
   ----------------------------------------------------------------------------
   2026-09-02, to Kyle's second red pen on the landing. The tree grows
   against the WHOLE page now (no pinned hero, no runway spacer), so the
   copy has to live BESIDE it rather than on top of it. On desktop every
   section carries data-oak-lane="left|right": its container narrows to a
   column on that side, and the scene slides the tree into the free side.
   Below 1100px there are no lanes, the tree sits behind the content and
   the text carries a shadow so it reads over a sky that is no longer
   always night. With the 3D standing down none of this applies and the
   page is byte-for-byte what it was.
   ============================================================================ */
/* the 2D engine still creates its (undrawn) tree canvas; keep it out of the stack */
html.oak3d-live .oak-tree-canvas { display: none !important; }
/* The painted pixel band collapses: the scene draws its own sky, from the
   same clock, season and daily weather seed the band uses. */
html.oak3d-live .skyband { height: 0 !important; min-height: 0 !important; border: 0 !important; }
/* page content stacks above the scene. header.nav keeps its own fixed
   position and z-index:100 and is deliberately not in this list. */
html.oak3d-live footer,
html.oak3d-live .section,
html.oak3d-live .cta-big,
html.oak3d-live .hero .container,
html.oak3d-live .hero-scroll-cue { position: relative; z-index: 1; }
html.oak3d-live .hero { overflow: visible; }
/* legibility over a daytime sky */
html.oak3d-live .hero-content,
html.oak3d-live .section,
html.oak3d-live .cta-big { text-shadow: 0 1px 14px rgba(4, 6, 13, 0.85); }
/* sections rise as the tree grows past them (.reveal is main.js's observer) */
html.oak3d-live .section.reveal,
html.oak3d-live .cta-big.reveal { transform: translateY(54px); }
html.oak3d-live .section.reveal.is-visible,
html.oak3d-live .cta-big.reveal.is-visible { transform: translateY(0); }
/* hotspots float over the viewport and ride the projected fruits */
html.oak3d-live .oak-hotspots { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .8s; }
html.oak3d-live.oak3d-ready .oak-hotspots { opacity: 1; }
html.oak3d-live .oak-hotspots > * { pointer-events: auto; }
/* the big CTA's own full-width wash would sit over the finished tree */
html.oak3d-live .cta-big { background: none; }

/* ---- the lanes (desktop) ---- */
@media (min-width: 1100px) {
    html.oak3d-live [data-oak-lane] > .container,
    html.oak3d-live [data-oak-lane] > .container-narrow {
        width: min(640px, 45vw);
        max-width: none;
        margin: 0;
        padding: var(--sp-6) var(--sp-6);
        background: linear-gradient(180deg, rgba(4, 6, 13, 0.68), rgba(4, 6, 13, 0.56));
        border: 1px solid rgba(124, 192, 134, 0.10);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    }
    html[data-gfx="full"].oak3d-live [data-oak-lane] > .container,
    html[data-gfx="full"].oak3d-live [data-oak-lane] > .container-narrow {
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
    }
    html.oak3d-live [data-oak-lane="left"] > .container,
    html.oak3d-live [data-oak-lane="left"] > .container-narrow {
        margin-left: max(var(--sp-5), calc(50vw - 640px));
    }
    html.oak3d-live [data-oak-lane="right"] > .container,
    html.oak3d-live [data-oak-lane="right"] > .container-narrow {
        margin-left: auto;
        margin-right: max(var(--sp-5), calc(50vw - 640px));
    }
    /* the hero's own container stays the page-wide one; its content is a
       left column already, so it simply reads as the first left lane */
    html.oak3d-live [data-oak-lane] .games-grid { grid-template-columns: 1fr; }
    html.oak3d-live [data-oak-lane] .game-card.featured { grid-column: span 1; }
    html.oak3d-live [data-oak-lane] .text-center p { margin-left: 0; margin-right: 0; }
}
/* ---- phones and tablets: no lanes, a soft scrim behind the copy ---- */
@media (max-width: 1099px) {
    html.oak3d-live .oak-scrim {
        position: fixed; inset: 0; z-index: 0; pointer-events: none;
        background: linear-gradient(180deg, rgba(4, 6, 13, 0.10) 0%, rgba(4, 6, 13, 0.42) 100%);
    }
}