/* ============================================================
   GTR BURNOUT SECTION — Watchman Forge
   Gothic stone aesthetic · Neon grid road
   ============================================================ */

#gtr-section {
  position: relative;
  height: 280vh;
  background: #010104;
  /* Subtle stone-brick texture bleeding up from the road */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 29px,
      rgba(0,212,255,0.025) 29px,
      rgba(0,212,255,0.025) 30px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 63px,
      rgba(0,212,255,0.015) 63px,
      rgba(0,212,255,0.015) 64px
    );
}

#gtr-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #010104;
  box-shadow:
    inset 0  40px 80px rgba(1,1,4,0.85),
    inset 0 -10px 40px rgba(144,0,255,0.08);
}

/* Smooth gradient transitions into/out of the GTR section */
#gtr-sticky::before,
#gtr-sticky::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 2;
}
#gtr-sticky::before {
  top: 0;
  height: 120px;
  background: linear-gradient(to bottom, #010104 0%, transparent 100%);
}
#gtr-sticky::after {
  bottom: 0;
  height: 120px;
  background: linear-gradient(to top, #010104 0%, transparent 100%);
}

#gtr-canvas {
  display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* ── Verse overlay ─────────────────────────────────────────── */
#gtr-verse {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity 2.5s ease;
  pointer-events: none;
  white-space: nowrap;
}
#gtr-verse.visible {
  opacity: 1;
}
#gtr-verse .verse-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  font-weight: 600;
  color: rgba(0, 212, 255, 0.92);
  letter-spacing: 0.04em;
  text-shadow:
    0 0 20px rgba(0, 212, 255, 0.75),
    0 0 60px rgba(0, 212, 255, 0.32);
  margin-bottom: 10px;
}
#gtr-verse .verse-ref {
  font-family: 'Orbitron', monospace;
  font-size: clamp(0.6rem, 1.2vw, 0.85rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(144, 0, 255, 0.88);
  text-shadow:
    0 0 16px rgba(144, 0, 255, 0.55),
    0 0 40px rgba(144, 0, 255, 0.25);
}

/* ── Scroll hint ───────────────────────────────────────────── */
#gtr-hint {
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Orbitron', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(0, 212, 255, 0.4);
  animation: gtr-hint-pulse 2.5s ease-in-out infinite;
  pointer-events: none;
}
#gtr-hint.hidden { opacity: 0; transition: opacity 0.5s ease; }

@keyframes gtr-hint-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.75; }
}

/* ── GTR PNG car element ──────────────────────────────────── */
#gtr-png {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  z-index: 3;
  /* bottom 30% = groundY at 70% from top */
  bottom: 30%;
  width: clamp(480px, 55vw, 840px);
  filter:
    drop-shadow(0 20px 55px rgba(0,212,255,0.24))
    drop-shadow(0 10px 22px rgba(0,0,0,0.9));
  transform-origin: bottom center;
  transition: filter 0.3s ease;
}
#gtr-png.state-launching {
  filter:
    drop-shadow(0 20px 55px rgba(0,212,255,0.35))
    drop-shadow(0 10px 22px rgba(0,0,0,0.9));
}

/* ── Mobile simplification ─────────────────────────────────── */
@media (max-width: 767px) {
  #gtr-section { height: 180vh; }
  #gtr-verse .verse-text { font-size: 0.95rem; white-space: normal; padding: 0 20px; }
  #gtr-verse .verse-ref  { font-size: 0.6rem; }
  #gtr-png {
    width: min(94vw, 460px);
    bottom: 26%;
  }
}