/* Tiny Tomato Games — CINEMATIC HERO LAYER
   Loads after site.css + motion.css + showcase.css and takes over the hero:
   - low-poly shard assembly of the mark
   - continuous 3D rotation + pointer tilt
   - kinetic, word-by-word headline reveal
   - count-up stats
   The whole layer is gated on html.hero-cinematic (added by an inline head
   script only when motion is allowed). Reduced-motion / no-JS users get the
   fully-revealed final state for free. */

/* ============================================================
   STAGE
   ============================================================ */
.hero { perspective: 1300px; }
.hero { padding-top: 92px; padding-bottom: 104px; }

/* deeper, more cinematic ambient lighting */
.hero-aura {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(70% 55% at 50% 30%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(120% 80% at 50% 120%, color-mix(in oklab, #000 70%, transparent), transparent 60%);
  opacity: 0.9;
}
.hero > .wrap, .hero > .mono, .hero > h1, .hero > p,
.hero-stats, .hero-ctas, .scroll-cue, .mark-wrap { position: relative; z-index: 2; }
.hero-glow { z-index: 1; }

/* ============================================================
   MARK — 3D rig
   .mark-wrap (parallax translate, owned by motion.js)
     .mark-tilt  (pointer tilt — inline transform via JS)
       .mark-3d  (ambient rotate + float — CSS keyframes)
         img.mark + .mark-shards + .mark-ring
   ============================================================ */
.mark-wrap { perspective: 900px; }
.mark-tilt { display: inline-block; transform-style: preserve-3d; will-change: transform; transition: transform 0.25s ease-out; }
.mark-3d { position: relative; display: inline-block; transform-style: preserve-3d; will-change: transform; }
.hero img.mark { display: block; backface-visibility: hidden; }

/* expanding ring that blooms when the mark lands */
.mark-ring {
  position: absolute; left: 50%; top: 52%; width: 86%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.5);
  border: 1px solid color-mix(in oklab, var(--accent) 60%, transparent);
  border-radius: 50%; opacity: 0; pointer-events: none;
}

/* (specular sweep removed by request) */
.mark-3d::after { content: none; }

/* ---- shards ---- */
.mark-shards { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; z-index: 2; }
.mark-shards .shard {
  position: absolute; background-repeat: no-repeat;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4));
  backface-visibility: hidden;
}

/* ============================================================
   KINETIC HEADLINE
   ============================================================ */
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0; margin: -0.08em 0; }
.hero h1 .w > span { display: inline-block; }
.hero h1 .ws { display: inline-block; width: 0.28em; }

/* ============================================================
   STATS ROW
   ============================================================ */
.hero-stats {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 14px; margin: 34px auto 0; max-width: 720px;
}
.hero-stat {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 26px; min-width: 132px;
  border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px);
  background: color-mix(in oklab, var(--bg-card) 60%, transparent);
  backdrop-filter: blur(3px);
}
.hero-stat .v {
  font-weight: 900; font-size: clamp(30px, 3.4vw, 42px); line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--text), color-mix(in oklab, var(--accent) 60%, var(--text)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.hero-stat .l {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.22em;
  text-indent: 0.22em; color: var(--faint); text-transform: uppercase; text-align: center;
}

/* ============================================================
   ARMED / HIDDEN INITIAL STATES  (html.hero-cinematic only)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* neutralise the old hero entrance + float so they don't fight us */
  html.hero-cinematic .hero .mark-wrap,
  html.hero-cinematic .hero > .mono,
  html.hero-cinematic .hero h1,
  html.hero-cinematic .hero > p,
  html.hero-cinematic .hero .hero-ctas,
  html.hero-cinematic .hero .scroll-cue { animation: none !important; }
  html.hero-cinematic .hero img.mark { animation: none !important; }

  /* mark: hide the crisp image until shards have assembled */
  html.hero-cinematic .hero img.mark { opacity: 0; }
  html.hero-cinematic.assembled .hero img.mark {
    opacity: 1; transition: opacity 0.5s ease;
  }

  /* shards scattered + invisible at rest */
  html.hero-cinematic .mark-shards .shard {
    opacity: 0;
    transform: translate3d(var(--sx, 0), var(--sy, 0), var(--sz, 0))
               rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) scale(0.6);
    transition: transform 0.95s cubic-bezier(0.18, 0.9, 0.28, 1) var(--sd, 0s),
                opacity 0.5s ease var(--sd, 0s);
  }
  /* shards assemble */
  html.hero-cinematic.play .mark-shards .shard {
    opacity: 1; transform: none;
  }
  /* shards dissolve once the crisp image is shown */
  html.hero-cinematic.assembled .mark-shards .shard {
    opacity: 0; transition: opacity 0.45s ease; transform: none;
  }

  /* ring bloom */
  html.hero-cinematic.assembled .mark-ring { animation: ttg-ring 0.9s cubic-bezier(0.22,1,0.36,1) forwards; }
  @keyframes ttg-ring {
    0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.5); }
    35%  { opacity: 0.85; }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.45); }
  }

  /* glow blooms in */
  html.hero-cinematic .hero-glow { opacity: 0; }
  html.hero-cinematic.play .hero-glow { animation: ttg-bloom-in 1.1s ease-out forwards; }
  @keyframes ttg-bloom-in {
    0%   { opacity: 0; }
    45%  { opacity: calc(var(--glow) * 1.8); }
    100% { opacity: var(--glow); }
  }

  /* mono / paragraph / ctas / scroll-cue hidden then revealed */
  html.hero-cinematic .hero > .mono,
  html.hero-cinematic .hero > p,
  html.hero-cinematic .hero .hero-stats,
  html.hero-cinematic .hero .hero-ctas,
  html.hero-cinematic .hero .scroll-cue {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22,1,0.36,1);
  }
  html.hero-cinematic.ready  .hero > .mono { opacity: 1; transform: none; transition-delay: 0.02s; }
  html.hero-cinematic.settled .hero > p          { opacity: 1; transform: none; }
  html.hero-cinematic.settled .hero .hero-stats  { opacity: 1; transform: none; transition-delay: 0.08s; }
  html.hero-cinematic.settled .hero .hero-ctas   { opacity: 1; transform: none; transition-delay: 0.18s; }
  html.hero-cinematic.settled .hero .scroll-cue  { opacity: 1; transform: none; transition-delay: 0.42s; }

  /* per-stat lift */
  html.hero-cinematic .hero-stat { opacity: 0; transform: translateY(18px) scale(0.96); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
  html.hero-cinematic.settled .hero-stat { opacity: 1; transform: none; }
  html.hero-cinematic.settled .hero-stat:nth-child(2) { transition-delay: 0.09s; }
  html.hero-cinematic.settled .hero-stat:nth-child(3) { transition-delay: 0.18s; }

  /* kinetic headline words */
  html.hero-cinematic .hero h1 .w > span { transform: translateY(115%); opacity: 0; }
  html.hero-cinematic.ready .hero h1 .w > span {
    transform: none; opacity: 1;
    transition: transform 0.82s cubic-bezier(0.2,0.9,0.25,1), opacity 0.6s ease;
    transition-delay: calc(var(--wi, 0) * 0.058s);
  }

  /* ambient mark motion once settled */
  html.hero-cinematic.settled .mark-3d { animation: ttg-mark-orbit 9s ease-in-out infinite; }
  @keyframes ttg-mark-orbit {
    0%, 100% { transform: rotateY(-11deg) translateY(0); }
    50%      { transform: rotateY(11deg) translateY(-12px); }
  }
}

/* ============================================================
   HARD-SKIP — instant final state for non-animating environments
   (added by JS when rAF never fires, or the tab is backgrounded)
   ============================================================ */
html.hero-cinematic.hero-skip .hero img.mark { opacity: 1 !important; }
html.hero-cinematic.hero-skip .mark-shards .shard { opacity: 0 !important; }
html.hero-cinematic.hero-skip .hero > .mono,
html.hero-cinematic.hero-skip .hero > p,
html.hero-cinematic.hero-skip .hero .hero-stats,
html.hero-cinematic.hero-skip .hero-stat,
html.hero-cinematic.hero-skip .hero .hero-ctas,
html.hero-cinematic.hero-skip .hero .scroll-cue,
html.hero-cinematic.hero-skip .hero h1 .w > span {
  opacity: 1 !important; transform: none !important;
  transition: none !important; animation: none !important;
}
html.hero-cinematic.hero-skip .hero-glow { opacity: var(--glow) !important; animation: none !important; }
html.hero-cinematic.hero-skip .mark-3d { animation: none !important; transform: rotateY(-7deg) !important; }
html.hero-cinematic.hero-skip .mark-3d::after,
html.hero-cinematic.hero-skip .mark-ring { display: none !important; }

/* ============================================================
   REDUCED MOTION — make sure the stat numbers still read final
   (handled in JS too, but keep the row tidy)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-stat .v::after { content: ''; }
}