/* Homepage layout: hero, tape, steps, worlds, bento, finale. */

main { overflow-x: clip; }

/* ---------- Top bar ---------- */
.topbar {
  position: absolute; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.1rem var(--gutter);
}
.topbar__brand {
  display: inline-flex; align-items: center; gap: .65rem; margin-right: auto;
  font: 400 1.5rem/1 var(--font-display); letter-spacing: .04em; text-decoration: none;
  text-shadow: 0 3px 0 var(--ink);
}
.topbar__brand img { border-radius: 11px; border: 3px solid var(--ink); }
.topbar__links { display: flex; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.topbar__links a { font-weight: 800; text-decoration: none; text-shadow: 0 2px 0 rgb(21 17 43 / .6); }
.topbar__links a:hover { color: var(--cyan); }
@media (max-width: 760px) { .topbar__links { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 980px);
  background: linear-gradient(var(--sky-top) 0%, #3b1f5e 30%, var(--sky-mid) 48%, var(--sky-bottom) 62%, var(--hill-near) 62%);
}
.hero__sky { position: absolute; inset: 0; z-index: -1; }
.hero__sun {
  position: absolute; left: 50%; bottom: 38%; width: clamp(260px, 40vw, 600px);
  transform: translate(-30%, 46%);
}
.hero__hills { position: absolute; left: 0; bottom: 37.8%; width: 100%; height: clamp(110px, 18vw, 240px); }
.hill-far { fill: var(--hill-far); }
.hill-mid { fill: var(--hill-mid); }
.hill-near { fill: var(--hill-near); }
.hero__floor {
  position: absolute; left: 0; right: 0; top: 62%; bottom: 0; overflow: hidden;
  perspective: 320px; perspective-origin: 50% 0;
  background: linear-gradient(var(--hill-near), var(--night));
}
.hero__grid {
  position: absolute; left: -60%; right: -60%; top: 0; height: 240%;
  transform-origin: 50% 0; transform: rotateX(64deg);
  background:
    linear-gradient(rgb(79 216 255 / .55) 2px, transparent 2px) 0 0 / 72px 72px,
    linear-gradient(90deg, rgb(255 92 170 / .5) 2px, transparent 2px) 0 0 / 72px 72px;
  -webkit-mask: linear-gradient(transparent, #000 8%, #000 45%, transparent 70%);
          mask: linear-gradient(transparent, #000 8%, #000 45%, transparent 70%);
  animation: grid-run 1.1s linear infinite;
  will-change: transform;
}
@keyframes grid-run { to { transform: rotateX(64deg) translateY(72px); } }

.hero__inner {
  position: relative; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 2rem;
  padding: clamp(6.5rem, 12vh, 9rem) var(--gutter) clamp(4rem, 9vh, 6rem);
}
.chip {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem;
  padding: .45rem .9rem; border: 3px solid var(--ink); border-radius: 999px;
  background: rgb(21 17 43 / .72); color: var(--cyan);
  font: 400 .95rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
}
.hero__title {
  position: relative; isolation: isolate; margin: 0;
  font: 400 var(--text-hero) / .82 var(--font-display); letter-spacing: .01em;
  color: var(--cream); text-shadow: 0 .055em 0 var(--ink);
}
.hero__title::before, .hero__title::after {
  content: attr(data-text); position: absolute; inset: 0; z-index: -1; text-shadow: none;
}
.hero__title::before { color: var(--cyan); animation: vhs-left 5s steps(1, end) infinite; transform: translate(-.035em, -.01em); }
.hero__title::after { color: var(--coral); animation: vhs-right 5s steps(1, end) infinite; transform: translate(.035em, .01em); }
@keyframes vhs-left {
  0%, 88% { transform: translate(-.035em, -.01em); }
  90% { transform: translate(-.11em, .02em); }
  93% { transform: translate(.02em, -.03em); }
  96% { transform: translate(-.06em, 0); }
}
@keyframes vhs-right {
  0%, 88% { transform: translate(.035em, .01em); }
  90% { transform: translate(.12em, -.02em); }
  93% { transform: translate(-.02em, .03em); }
  96% { transform: translate(.07em, 0); }
}
.hero__lead {
  max-width: 30ch; margin: 1.5rem 0 2rem; font-size: var(--text-lead); line-height: 1.45; font-weight: 600;
  text-shadow: 0 2px 0 rgb(21 17 43 / .55);
}
.hero__lead strong { color: var(--gold); font-weight: 900; }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: .3rem 0; margin: 2rem 0 0; padding: 0; list-style: none;
  font-weight: 900; font-size: var(--text-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--cream);
}
.hero__facts li + li::before { content: "◂◂"; margin: 0 .7rem; color: var(--cyan); letter-spacing: -.1em; }
@media (max-width: 560px) {
  .hero__facts { display: grid; grid-template-columns: repeat(2, max-content); gap: .4rem 1.4rem; }
  .hero__facts li::before, .hero__facts li + li::before { content: "◂◂"; margin: 0 .45rem 0 0; color: var(--cyan); letter-spacing: -.1em; }
}

.phone {
  position: relative; justify-self: center; margin: 0;
  width: clamp(230px, 25vw, 330px);
  transform: rotate(3.5deg);
}
.phone__screen {
  position: relative; overflow: hidden; aspect-ratio: 9 / 16;
  border: 10px solid var(--ink); border-radius: 44px; background: var(--ink);
  box-shadow: 0 0 0 3px rgb(79 216 255 / .35), 0 40px 70px rgb(10 6 30 / .55), 18px 18px 0 rgb(21 17 43 / .6);
}
.phone__video { width: 100%; height: 100%; object-fit: cover; }
.phone__osd {
  position: absolute; top: -3%; right: -10%; padding: .4rem .8rem; white-space: nowrap;
  font: 400 clamp(.85rem, 1.2vw, 1.05rem)/1 var(--font-display); letter-spacing: .06em;
  color: var(--cyan); background: var(--ink); border: 3px solid var(--cyan); border-radius: 10px;
  transform: rotate(-7deg); box-shadow: 0 6px 0 rgb(21 17 43 / .7);
}
.phone__tc { color: var(--cream); }
.phone__sticker {
  position: absolute; right: -14%; bottom: 22%;
  font: 400 clamp(2rem, 3.6vw, 3rem)/1 var(--font-display); color: var(--cyan);
  text-shadow: 0 4px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink);
  transform: rotate(9deg);
  animation: sticker-pop 3.2s var(--ease-snap) infinite;
}
@keyframes sticker-pop {
  0%, 60% { transform: rotate(9deg) scale(1); }
  66% { transform: rotate(4deg) scale(1.22); }
  74%, 100% { transform: rotate(9deg) scale(1); }
}
.phone__toggle {
  position: absolute; right: 18px; bottom: 18px; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  color: var(--cream); background: rgb(21 17 43 / .78); border: 2px solid rgb(246 231 207 / .55); border-radius: 50%;
}
.phone__toggle svg { width: 20px; height: 20px; fill: currentColor; }
.phone__toggle .i-play { display: none; }
.phone__toggle[aria-pressed="true"] .i-play { display: block; }
.phone__toggle[aria-pressed="true"] .i-pause { display: none; }

@media (max-width: 860px) {
  /* Horizon sits a fixed distance from the bottom so the sun ends up behind
     the phone, never behind the copy. */
  .hero {
    --horizon-px: 300px;
    min-height: auto;
    background: linear-gradient(var(--sky-top) 0%, #3b1f5e 35%, var(--sky-mid) 62%,
      var(--sky-bottom) calc(100% - var(--horizon-px)), var(--hill-near) calc(100% - var(--horizon-px)));
  }
  .hero__inner { grid-template-columns: 1fr; text-align: left; gap: 3rem; }
  .hero__sun { bottom: var(--horizon-px); width: min(88vw, 440px); transform: translate(-50%, 46%); }
  .hero__hills { bottom: calc(var(--horizon-px) - 2px); height: 120px; }
  .hero__floor { top: auto; height: var(--horizon-px); }
  .phone { width: min(68vw, 290px); }
}

/* ---------- Tape marquee (it runs backwards, of course) ---------- */
.tape {
  position: relative; z-index: 3; overflow: hidden; margin-top: -1.4rem;
  background: var(--gold); color: var(--ink);
  border-block: var(--border); transform: rotate(-1.6deg) scale(1.04);
  box-shadow: 0 10px 0 rgb(0 0 0 / .25);
}
.tape__track {
  display: flex; align-items: center; gap: 1.4rem; width: max-content; padding: .7rem 0;
  font: 400 clamp(1.4rem, 1rem + 1.6vw, 2.2rem)/1 var(--font-display); letter-spacing: .06em;
  animation: tape-rewind 26s linear infinite;
}
.tape__track i { font-style: normal; color: var(--coral); letter-spacing: -.12em; }
@keyframes tape-rewind { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- Shared section heads ---------- */
.section-head { max-width: 1200px; margin: 0 auto clamp(2.5rem, 5vw, 4.5rem); padding: 0 var(--gutter); }
.eyebrow {
  margin: 0 0 .9rem; color: var(--cyan);
  font: 400 1rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
}
.section-head h2, .finale h2 {
  margin: 0; font: 400 var(--text-h2) / .95 var(--font-display); letter-spacing: .005em;
  text-shadow: 0 .06em 0 var(--ink);
}
.accent-cyan { color: var(--cyan); }
.accent-gold { color: var(--gold); }
.accent-coral { color: var(--coral); }
.accent-mint { color: var(--mint); }

.try, .how, .worlds, .more { padding-block: var(--space-section); }
.try { background: radial-gradient(80% 60% at 50% 0%, #2a1a52, var(--night) 70%); }
.how { background: linear-gradient(var(--night), #20143d 60%, var(--night)); }

/* ---------- How it plays: staggered steps ---------- */
.steps {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem);
}
.step { position: relative; isolation: isolate; }
.step:nth-child(2) { margin-top: 6rem; }
.step:nth-child(3) { margin-top: 3rem; }
.step__num {
  position: absolute; z-index: -1; top: -3.6rem; left: -.6rem;
  font: 400 clamp(6rem, 10vw, 9rem)/1 var(--font-display);
  color: transparent; -webkit-text-stroke: 2px var(--step-color); opacity: .6;
}
.step img {
  width: 100%; max-width: 320px; aspect-ratio: 9 / 16; object-fit: cover;
  border: var(--border); border-radius: 30px; box-shadow: 14px 14px 0 var(--step-color);
}
.step h3 {
  margin: 1.8rem 0 .35rem; color: var(--step-color);
  font: 400 clamp(2rem, 1.5rem + 1.5vw, 2.75rem)/1 var(--font-display); text-transform: uppercase;
}
.step p { margin: 0; max-width: 30ch; color: var(--cream-dim); font-weight: 600; }
.step:nth-child(1) { --step-color: var(--cyan); }
.step:nth-child(2) { --step-color: var(--mint); }
.step:nth-child(3) { --step-color: var(--coral); }

@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; gap: 4rem; }
  .step, .step:nth-child(2), .step:nth-child(3) {
    margin-top: 0; display: grid; grid-template-columns: 44% 1fr; column-gap: 1.25rem; align-items: center;
  }
  .step img { grid-row: 1 / span 2; box-shadow: 8px 8px 0 var(--step-color); border-radius: 22px; }
  .step h3 { margin: 0 0 .3rem; align-self: end; }
  .step p { align-self: start; }
  .step__num { font-size: 5.5rem; top: -2.8rem; left: auto; right: 0; }
}

/* ---------- Worlds ---------- */
.worlds { background: linear-gradient(var(--night), #0c0a1d); }
.worlds__list {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter) 1rem; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem);
}
.world {
  position: relative; overflow: hidden; border: var(--border); border-radius: 26px;
  box-shadow: 0 10px 0 var(--accent);
}
.world:nth-child(even) { margin-top: 2.5rem; }
.world img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; transition: transform 600ms var(--ease-out-expo); }
.world__text {
  position: absolute; inset: auto 0 0; padding: 3.5rem 1.1rem 1.2rem;
  background: linear-gradient(transparent, rgb(10 8 25 / .92) 45%);
}
.world__no { color: var(--accent); font: 400 .85rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.world h3 { margin: .35rem 0 .2rem; font: 400 1.6rem/1 var(--font-display); text-transform: uppercase; }
.world p { margin: 0; font-size: var(--text-sm); color: var(--cream-dim); font-style: italic; }

@media (max-width: 860px) {
  .worlds__list {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem;
    padding-bottom: 1.6rem; scrollbar-width: thin;
  }
  .world { flex: 0 0 min(64vw, 260px); scroll-snap-align: center; }
  .world:nth-child(even) { margin-top: 0; }
}

/* ---------- Bento ---------- */
.bento {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem;
}
.tile {
  position: relative; overflow: hidden; padding: clamp(1.3rem, 3vw, 2.1rem);
  border: var(--border); border-radius: var(--radius-chunk); box-shadow: 0 8px 0 var(--ink);
}
.tile h3 { margin: 0 0 .5rem; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1 var(--font-display); text-transform: uppercase; }
.tile p { margin: 0; max-width: 34ch; font-weight: 700; }
.tile img { border: var(--border); border-radius: 20px; }

.tile--daily {
  grid-column: span 3; grid-row: span 2;
  display: grid; grid-template-columns: 1fr 48%; gap: 1rem; align-items: start;
  background: linear-gradient(160deg, #2b4d8f, #e48a5a 70%, #ffd49a); color: var(--cream);
  border-radius: 36px 22px 22px 22px;
}
.tile--daily img { align-self: end; margin-bottom: -28%; transform: rotate(5deg); box-shadow: -10px 10px 0 rgb(21 17 43 / .5); }
.tile--perfect { grid-column: span 3; background: var(--gold); color: var(--ink); }
.tile__shout {
  margin: 0 0 1rem; transform: rotate(-4deg); transform-origin: 0 100%;
  font: 400 clamp(2.6rem, 2rem + 2.5vw, 4.4rem)/1 var(--font-display); color: var(--cream);
  text-shadow: 0 5px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink);
}
.tile--death {
  grid-column: span 3; background: var(--coral); color: var(--ink);
  border-radius: 22px 22px 48px 22px;
}
.tile--death::after {
  content: "◂◂"; position: absolute; right: .6rem; bottom: -1.6rem;
  font: 400 7rem/1 var(--font-display); letter-spacing: -.12em; color: rgb(21 17 43 / .18);
}
.tile--garage {
  grid-column: span 4; display: grid; grid-template-columns: 38% 1fr; gap: 1.5rem; align-items: center;
  background: linear-gradient(120deg, #3a2266, #241d45); border-radius: 22px 48px 22px 22px;
}
.tile--garage img { margin: -12% 0 -40%; transform: rotate(-5deg); }
.tile--vhs {
  grid-column: span 2; background: #0a0818; color: var(--cream);
  background-image: repeating-linear-gradient(to bottom, rgb(255 255 255 / .04) 0 2px, transparent 2px 5px);
}
.tile__osd {
  margin: 0 0 1.2rem; color: var(--cyan);
  font: 400 clamp(2rem, 1.6rem + 1.5vw, 3rem)/1 var(--font-display); letter-spacing: .06em;
  animation: osd-blink 1.4s steps(1, end) infinite;
}
@keyframes osd-blink { 50% { opacity: .25; } }

@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; }
  .tile--daily, .tile--perfect, .tile--death, .tile--garage, .tile--vhs { grid-column: auto; grid-row: auto; }
  .tile--daily { grid-template-columns: 1fr 42%; }
  .tile--daily img { margin-bottom: -40%; }
  .tile--garage { grid-template-columns: 34% 1fr; }
}

/* ---------- Finale ---------- */
.finale {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: var(--space-section) var(--gutter) clamp(9rem, 22vw, 16rem);
  background: linear-gradient(var(--night), #3b1f5e 35%, var(--sky-mid) 70%, var(--sky-bottom));
}
.finale__sun { position: absolute; z-index: -1; left: 50%; bottom: 0; width: min(760px, 130vw); transform: translate(-50%, 64%); }
.finale h2 { font-size: clamp(3rem, 1.5rem + 7vw, 7.5rem); }
.finale p { margin: 1rem 0 2.2rem; font-weight: 800; font-size: var(--text-lead); text-shadow: 0 2px 0 var(--ink); }
.finale .store-actions { justify-content: center; }
.finale .store-note { color: var(--cream); }

/* ---------- Scroll reveal (only when JS runs) ---------- */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 700ms var(--ease-out-expo), transform 900ms var(--ease-out-expo); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .steps .reveal:nth-child(2), .js .worlds__list .reveal:nth-child(2) { transition-delay: 90ms; }
.js .steps .reveal:nth-child(3), .js .worlds__list .reveal:nth-child(3) { transition-delay: 180ms; }
.js .worlds__list .reveal:nth-child(4) { transition-delay: 270ms; }
.world.is-in { transition: transform 450ms var(--ease-snap), opacity 700ms var(--ease-out-expo); }
@media (hover: hover) {
  .world.is-in:hover { transform: translateY(-10px) rotate(-1.5deg); transition-delay: 0ms; }
  .world.is-in:nth-child(even):hover { transform: translateY(-10px) rotate(1.5deg); }
  .world:hover img { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .hero__grid { animation: none; transform: rotateX(64deg); }
}