/* =========================================================
   home.css -- Slow Tape homepage
   ---------------------------------------------------------
   Marketing surface that sits in front of the game at /play/.
   Tokens come from play/design-tokens.css (single source of
   truth shared with the game). This file owns layout only.

   Voice anchor: late-night, lo-fi, Joji-coded twilight.
   No em dashes. No three-beat parallelism. No "not X but Y".
   ========================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
}

html, body {
  background: var(--sky-deep);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

/* =========================================================
   CRT skin -- lifted from play/style.css so the homepage
   wears the same atmosphere as the game. Scanlines + grain
   + vignette are layered via body utility classes.
   ========================================================= */
.crt-scanlines::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 3px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
}

.crt-grain::after {
  content: '';
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events: none;
  z-index: 9998;
  opacity: 0.55;
  mix-blend-mode: overlay;
  animation: grain 1.6s steps(4) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -1%); }
  75%  { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

.vignette { position: relative; }
.vignette > .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, var(--vignette) 100%);
  pointer-events: none;
  z-index: 2;
}


/* =========================================================
   1. HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  isolation: isolate;
  /* Twilight sky gradient matching the M1-M3 default in the game. */
  background:
    linear-gradient(
      to bottom,
      var(--sky-deep)  0%,
      var(--sky-dusk) 28%,
      var(--sky-glow) 54%,
      var(--sky-ember) 76%,
      #6E3A55          86%,
      #3A2148         94%,
      #1F1430        100%
    );
  overflow: hidden;
}

/* City skyline silhouette, anchored bottom of the hero. Sits behind
   the lamp glow and the title. Inspired by the M3 city in the game. */
.hero-skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  width: 100%;
  height: 18vmin;
  max-height: 150px;
  min-height: 80px;
  pointer-events: none;
  z-index: 0;
  filter: blur(4px);
  opacity: 0.7;
}

/* Single procedural lamp glow, left side. Radial gradient only,
   no DOM lamp sprite. Sits behind the title. */
.hero-lamp {
  position: absolute;
  left: 12%;
  top: 38%;
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    var(--lamp-on) 0%,
    var(--lamp-halo) 18%,
    var(--lamp-halo-soft) 42%,
    transparent 70%
  );
  opacity: 0.30;
  pointer-events: none;
  z-index: 1;
  filter: blur(2px);
}

.hero-inner {
  position: relative;
  z-index: 3;
  max-width: 720px;
}

.hero-title {
  font-family: var(--font-pixel);
  color: var(--neon-pink);
  font-size: clamp(28px, 6vw, 56px);
  letter-spacing: 0.05em;
  line-height: 1.15;
  /* Triple-shadow lockup straight from the game title overlay. */
  text-shadow:
    0 0 8px rgba(255, 107, 157, 0.6),
    0 0 24px rgba(255, 107, 157, 0.35),
    3px 3px 0 var(--shadow);
  margin-bottom: var(--space-6);
}

.hero-subtitle {
  font-family: var(--font-display);
  color: var(--text-bright);
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: 0.12em;
  margin-bottom: var(--space-4);
}

.hero-tagline {
  font-family: var(--font-display);
  color: var(--text);
  opacity: 0.85;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin-bottom: var(--space-12);
}

.hero-cta {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: 0.06em;
}
.hero-cta a {
  color: var(--lamp-on);
  text-decoration: underline dotted;
  text-underline-offset: 6px;
  text-decoration-color: var(--lamp-halo);
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.hero-cta a:hover,
.hero-cta a:focus {
  opacity: 1;
  text-decoration-color: var(--lamp-on);
}

.hero-hint {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-display);
  color: var(--text-dim);
  font-size: 18px;
  letter-spacing: 0.1em;
  animation: hint-bob 2.4s ease-in-out infinite;
}
@keyframes hint-bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50%      { transform: translate(-50%, 4px); opacity: 0.9; }
}


/* =========================================================
   2. DEMO
   ========================================================= */
.demo {
  background: var(--sky-deep);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}
.demo-instructions {
  font-family: var(--font-serif);
  color: var(--text);
  opacity: 0.75;
  font-size: 15px;
  margin-bottom: var(--space-6);
}
.demo-frame {
  width: 100%;
  height: 85vh;
  min-height: 520px;
  border: 0;
  display: block;
  background: var(--sky-deep);
  /* faint pink-lamp glow around the frame so it reads as the lit window of the page */
  box-shadow:
    0 0 0 1px var(--sky-glow),
    0 0 60px rgba(255, 107, 157, 0.08);
}
.demo-foot {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  color: var(--text-dim);
  font-size: 18px;
  letter-spacing: 0.05em;
}
.demo-foot a {
  color: var(--lamp-on);
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  opacity: 0.8;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.demo-foot a:hover { opacity: 1; }
.demo-sep {
  display: inline-block;
  margin: 0 var(--space-3);
  color: var(--text-dim);
  opacity: 0.5;
}


/* =========================================================
   3. WHAT IS SLOW TAPE -- notebook page recipe
   ========================================================= */
.paper {
  background: var(--sky-dusk);
  padding: var(--space-12) var(--space-6);
  display: flex;
  justify-content: center;
}
.paper-inner {
  max-width: 660px;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  padding: 48px 48px;
  border-radius: var(--radius-md);
  /* faint paper-edge hairline + a warm drop so it reads as a page on the desk */
  box-shadow:
    0 0 0 1px var(--paper-edge),
    8px 10px 0 rgba(10, 5, 24, 0.35);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.paper-inner p {
  margin: 0 0 var(--space-4);
}
.paper-inner p:last-child { margin-bottom: 0; }


/* =========================================================
   4. WHAT YOU'LL LEARN
   ========================================================= */
.learn {
  background: var(--sky-deep);
  padding: var(--space-12) var(--space-6);
  display: flex;
  justify-content: center;
}
.learn-inner {
  max-width: 660px;
  width: 100%;
}
.learn-h {
  font-family: var(--font-pixel);
  color: var(--lamp-on);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-8);
  text-shadow: 2px 2px 0 var(--shadow);
}
.learn-list {
  list-style: none;
  font-family: var(--font-serif);
  color: var(--text);
  font-size: 18px;
  line-height: 1.8;
}
.learn-list li {
  padding-left: 1.6em;
  position: relative;
  margin-bottom: var(--space-3);
}
.learn-list li::before {
  /* CSS-drawn lamp dot in lamp-on, with a soft halo behind it */
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lamp-on);
  box-shadow:
    0 0 6px var(--lamp-halo),
    0 0 14px var(--lamp-halo-soft);
}


/* =========================================================
   5. BUY ON ITCH
   ========================================================= */
.buy {
  background:
    linear-gradient(
      to bottom,
      var(--sky-deep) 0%,
      #0D0820       100%
    );
  padding: var(--space-12) var(--space-6);
  text-align: center;
}
.buy-inner {
  max-width: 560px;
  margin: 0 auto;
}
.buy-h {
  font-family: var(--font-pixel);
  color: var(--neon-pink);
  font-size: clamp(16px, 3vw, 22px);
  letter-spacing: 0.06em;
  line-height: 1.5;
  margin-bottom: var(--space-6);
  text-shadow:
    0 0 8px rgba(255, 107, 157, 0.4),
    2px 2px 0 var(--shadow);
}
.buy-copy {
  font-family: var(--font-serif);
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: var(--space-8);
}
.buy-cta {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: 0.06em;
}
.buy-cta a {
  color: var(--lamp-on);
  text-decoration: underline dotted;
  text-underline-offset: 6px;
  text-decoration-color: var(--lamp-halo);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.buy-cta a:hover { text-decoration-color: var(--lamp-on); }
.buy-meta {
  font-family: var(--font-display);
  color: var(--text-dim);
  font-size: 16px;
  letter-spacing: 0.08em;
}


/* =========================================================
   6. FOOTER
   ========================================================= */
.foot {
  background: var(--shadow);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  font-family: var(--font-display);
  color: var(--text-dim);
  font-size: 16px;
  letter-spacing: 0.06em;
}
.foot p { margin: 0 0 var(--space-2); }
.foot-links a {
  color: var(--text-dim);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  margin: 0 var(--space-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.foot-links a:hover { color: var(--lamp-on); }


/* =========================================================
   MOBILE -- viewport widths under 800px
   Hero stacks tighter, iframe drops to 70vh, type scales down.
   This is a modest polish pass, not a full mobile rebuild.
   ========================================================= */
@media (max-width: 800px) {
  .hero { padding: var(--space-8) var(--space-4); }
  .hero-lamp { left: 50%; top: 30%; transform: translateX(-50%); opacity: 0.22; }
  .hero-tagline { margin-bottom: var(--space-8); }

  .demo { padding: var(--space-8) var(--space-3); }
  .demo-frame { height: 70vh; min-height: 420px; }

  .paper { padding: var(--space-8) var(--space-3); }
  .paper-inner { padding: 28px 22px; font-size: 16px; }

  .learn { padding: var(--space-8) var(--space-4); }
  .learn-list { font-size: 16px; }

  .buy { padding: var(--space-8) var(--space-4); }
}

@media (max-width: 480px) {
  .hero-title { letter-spacing: 0.04em; }
  .demo-frame { height: 65vh; min-height: 380px; }
  .paper-inner { padding: 22px 18px; }
}