/* =========================================================
   GRAND TRENCH AUTO — $GTA
   GTA VI / Vice City inspired landing page
   ========================================================= */

/* Real GTA wordmark font — Pricedown by Ray Larabie (self-hosted) */
@font-face {
  font-family: 'Pricedown';
  src: url('assets/fonts/pricedown.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --pink:    #ff2e87;
  --hot:     #ff5fae;
  --magenta: #ff00d4;
  --teal:    #00e6c3;
  --cyan:    #21d4fd;
  --purple:  #7a1fff;
  --gold:    #ffd23f;
  --orange:  #ff7a2f;
  --ink:     #0a0512;
  --ink-2:   #170a26;
  --paper:   #fff4fb;

  --font-display: 'Pricedown', 'Anton', sans-serif;
  --font-deco:    'Poiret One', 'Anton', sans-serif; /* art-deco accent for the VI */
  --font-head:    'Anton', 'Oswald', sans-serif;
  --font-body:    'Rajdhani', 'Oswald', system-ui, sans-serif;

  --glow-pink: 0 0 18px rgba(255,46,135,.75), 0 0 42px rgba(255,46,135,.45);
  --glow-teal: 0 0 18px rgba(0,230,195,.7), 0 0 42px rgba(0,230,195,.4);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--paper);
  background: var(--ink);
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* ============ ANIMATED BACKDROP ============ */
.bg-sky {
  position: fixed; inset: 0; z-index: -5;
  background: linear-gradient(180deg,
    #2a0a4a 0%,
    #6a1d6e 22%,
    #c23a7a 45%,
    #ff5f6d 66%,
    #ff9d54 82%,
    #ffd23f 100%);
  background-size: 100% 200%;
  animation: skyShift 18s ease-in-out infinite alternate;
}
@keyframes skyShift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 40%; }
}

.bg-sun {
  position: fixed; z-index: -4;
  left: 50%; bottom: 8%;
  width: min(70vw, 620px); height: min(70vw, 620px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #fff1a8 0%, var(--gold) 26%, var(--orange) 52%, var(--pink) 78%, transparent 80%);
  filter: blur(2px);
  opacity: .9;
  animation: sunPulse 7s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: .85; }
  50%      { transform: translateX(-50%) scale(1.05); opacity: 1; }
}

/* retro horizon grid */
.bg-grid {
  position: fixed; z-index: -3;
  left: -10%; right: -10%; bottom: 0; height: 42vh;
  background-image:
    linear-gradient(rgba(0,230,195,.35) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0,230,195,.35) 2px, transparent 2px);
  background-size: 64px 64px;
  transform: perspective(420px) rotateX(68deg);
  transform-origin: bottom;
  mask-image: linear-gradient(to top, #000 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 90%);
  animation: gridRun 1.6s linear infinite;
}
@keyframes gridRun {
  from { background-position-y: 0; }
  to   { background-position-y: 64px; }
}

.bg-scanlines {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,.10) 0px, rgba(0,0,0,.10) 1px, transparent 2px, transparent 4px);
  mix-blend-mode: overlay;
  opacity: .5;
}

.bg-palms { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.palm {
  position: absolute; bottom: 10vh;
  font-size: clamp(80px, 16vw, 220px);
  filter: brightness(0) drop-shadow(0 0 1px #000);
  opacity: .9;
  transform-origin: bottom center;
  animation: sway 6s ease-in-out infinite;
}
.palm-1 { left: 2%;  animation-delay: 0s;   }
.palm-2 { left: 16%; bottom: 6vh; font-size: clamp(60px,12vw,160px); animation-delay: -1.5s; }
.palm-3 { right: 3%; animation-delay: -2.4s; }
.palm-4 { right: 18%; bottom: 7vh; font-size: clamp(60px,11vw,150px); animation-delay: -3.6s; }
@keyframes sway {
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(3deg);  }
}

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 14px clamp(16px, 4vw, 48px);
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,5,18,.82), rgba(10,5,18,.35));
  border-bottom: 2px solid rgba(255,46,135,.4);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--paper);
  font-family: var(--font-display);
  letter-spacing: .5px;
}
.brand-vi {
  font-family: var(--font-deco);
  font-weight: 700;
  font-size: 30px; line-height: 1;
  color: var(--gold);
  -webkit-text-stroke: 1px #000;
  text-shadow: 0 0 14px rgba(255,210,63,.8);
  letter-spacing: 1px;
}
.brand-text {
  font-size: clamp(15px, 2vw, 22px);
  color: #fff;
  text-shadow: var(--glow-pink);
}
.nav-links {
  margin-left: auto;
  display: flex; align-items: center; gap: clamp(10px, 2vw, 26px);
}
.nav-links a {
  color: var(--paper); text-decoration: none;
  font-family: var(--font-head); font-size: 14px;
  letter-spacing: 1.5px; text-transform: uppercase;
  transition: color .2s, text-shadow .2s;
}
.nav-links a:hover { color: var(--teal); text-shadow: var(--glow-teal); }
.x-link { display: inline-flex; align-items: center; color: #fff; }
.x-link:hover { color: var(--teal); }
.nav-cta {
  font-family: var(--font-head); font-size: 14px; letter-spacing: 1.5px;
  text-decoration: none; color: #11020a;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  padding: 10px 18px; border-radius: 6px;
  border: 2px solid #000;
  box-shadow: 0 4px 0 #000, var(--glow-pink);
  transition: transform .15s, box-shadow .15s;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #000, var(--glow-pink); }
.nav-play {
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  color: #062f29 !important;
  box-shadow: 0 4px 0 #000, var(--glow-teal);
}
.nav-play:hover { box-shadow: 0 6px 0 #000, var(--glow-teal); }
@media (max-width: 760px) { .nav-links a:not(.x-link) { display: none; } }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 60px 20px 40px;
}
.hero-inner { max-width: 960px; width: 100%; }
.hero-kicker {
  font-family: var(--font-head);
  letter-spacing: 4px; font-size: clamp(11px, 1.6vw, 15px);
  color: var(--teal);
  text-shadow: var(--glow-teal);
  margin-bottom: 14px;
}
.hero-title {
  font-family: var(--font-display);
  line-height: .84;
  letter-spacing: 1px;
  margin: 6px 0 18px;
}
.hero-title .line {
  display: block;
  font-size: clamp(54px, 14vw, 168px);
  -webkit-text-stroke: clamp(1px, .4vw, 3px) #0a0512;
}
.line-1 { color: var(--hot);  text-shadow: 0 0 30px rgba(255,46,135,.9), 6px 6px 0 rgba(0,0,0,.45); }
.line-2 { color: #fff;        text-shadow: 0 0 30px rgba(33,212,253,.9), 6px 6px 0 rgba(0,0,0,.45); }
.line-3 { color: var(--gold); text-shadow: 0 0 30px rgba(255,210,63,.95), 6px 6px 0 rgba(0,0,0,.45); }
.hero-title .line { animation: flicker 5s infinite; }
.line-2 { animation-delay: .4s; }
.line-3 { animation-delay: .8s; }
@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: .72; }
  95% { opacity: 1; }
  96% { opacity: .6; }
  97% { opacity: 1; }
}

.ticker-badge {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 44px);
  color: #11020a;
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  padding: 6px 26px; border-radius: 999px;
  border: 3px solid #000;
  box-shadow: 0 6px 0 #000, var(--glow-teal);
  transform: rotate(-2deg);
  margin-bottom: 22px;
}
.ticker-star { color: #11020a; font-size: .7em; }

.hero-sub {
  font-size: clamp(15px, 2.2vw, 20px);
  line-height: 1.5; font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  max-width: 640px; margin: 0 auto 26px;
}
.hero-sub strong { color: var(--gold); }

/* contract address box */
.ca-box {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(10,5,18,.7);
  border: 2px solid var(--teal);
  border-radius: 10px;
  padding: 10px 12px 10px 16px;
  margin: 0 auto 26px;
  cursor: pointer;
  box-shadow: var(--glow-teal);
  transition: transform .15s, box-shadow .15s;
  max-width: 94vw;
}
.ca-box:hover { transform: translateY(-2px); }
.ca-label {
  font-family: var(--font-head); font-size: 12px; letter-spacing: 2px;
  color: var(--teal);
}
.ca-value {
  font-family: 'Courier New', monospace; font-weight: 700;
  font-size: clamp(12px, 1.8vw, 16px);
  color: #fff; letter-spacing: .5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 52vw;
}
.ca-copy {
  font-family: var(--font-head); font-size: 12px; letter-spacing: 1px;
  background: var(--teal); color: #062f29;
  padding: 5px 12px; border-radius: 6px;
}
.ca-box.copied .ca-copy { background: var(--gold); color: #2a1c00; }
.ca-box-lg { display: flex; max-width: 720px; margin: 36px auto 0; }
.ca-box-lg .ca-value { max-width: 60vw; }

.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  font-family: var(--font-head); letter-spacing: 1.5px;
  font-size: clamp(14px, 1.8vw, 17px);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 8px;
  border: 2px solid #000; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .2s;
}
.btn-primary {
  color: #11020a;
  background: linear-gradient(135deg, var(--hot), var(--magenta));
  box-shadow: 0 6px 0 #000, var(--glow-pink);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #000, var(--glow-pink); }
.btn-ghost {
  color: #fff; background: rgba(0,0,0,.45);
  box-shadow: 0 6px 0 #000;
}
.btn-ghost:hover { transform: translateY(-3px); color: var(--teal); box-shadow: 0 9px 0 #000, var(--glow-teal); }
.btn-play {
  color: #062f29;
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  box-shadow: 0 6px 0 #000, var(--glow-teal);
  font-weight: 700;
}
.btn-play:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #000, var(--glow-teal); }

.hero-scroll {
  margin-top: 38px;
  font-family: var(--font-head); letter-spacing: 3px; font-size: 13px;
  color: #fff; opacity: .85;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* ============ MARQUEE ============ */
.marquee {
  overflow: hidden; white-space: nowrap;
  background: var(--ink);
  border-top: 3px solid var(--pink);
  border-bottom: 3px solid var(--teal);
  padding: 12px 0;
}
.marquee-track { display: inline-flex; animation: scroll 24s linear infinite; }
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 34px);
  color: var(--gold);
  -webkit-text-stroke: 1px #000;
  text-shadow: 0 0 16px rgba(255,210,63,.6);
}
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ SECTIONS COMMON ============ */
section { position: relative; padding: clamp(60px, 9vw, 120px) clamp(16px, 5vw, 80px); }
.section-head { max-width: 820px; margin: 0 auto clamp(36px, 6vw, 64px); text-align: center; }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 8vw, 96px);
  line-height: .9;
  color: #fff;
  -webkit-text-stroke: 2px #0a0512;
  text-shadow: var(--glow-pink);
}
.section-desc {
  margin-top: 18px;
  font-size: clamp(15px, 2vw, 19px); font-weight: 600;
  line-height: 1.55; color: #ffe9f6;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* ============ CHARACTERS ============ */
.characters { background: linear-gradient(180deg, rgba(10,5,18,.55), rgba(23,10,38,.85)); }
.char-stage {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 320px 1fr; gap: 34px;
  align-items: start;
}
@media (max-width: 900px) { .char-stage { grid-template-columns: 1fr; } }

.char-cards { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .char-cards { flex-direction: row; overflow-x: auto; } }

.char-card {
  position: relative; cursor: pointer;
  background: rgba(10,5,18,.6);
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 10px;
  display: flex; align-items: center; gap: 14px;
  text-align: left; color: #fff;
  font-family: var(--font-body);
  transition: transform .18s, border-color .18s, box-shadow .18s;
  min-width: 200px;
}
.char-card:hover { transform: translateX(4px) scale(1.01); border-color: var(--teal); }
@media (max-width: 900px) { .char-card:hover { transform: translateY(-4px); } }
.char-card.is-active {
  border-color: var(--pink);
  box-shadow: var(--glow-pink);
  background: rgba(255,46,135,.12);
}
.char-card-img {
  width: 64px; height: 64px; flex: 0 0 auto;
  border-radius: 10px;
  background-size: cover; background-position: top center;
  border: 2px solid #000;
}
.char-card-name { font-family: var(--font-display); font-size: 24px; line-height: 1; color: var(--gold); }
.char-card-role { font-size: 13px; font-weight: 600; color: #ffd9ee; letter-spacing: .5px; }

.char-detail {
  display: grid; grid-template-columns: 300px 1fr; gap: 28px;
  background: rgba(10,5,18,.55);
  border: 2px solid rgba(0,230,195,.4);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 0 50px rgba(122,31,255,.25);
}
@media (max-width: 620px) { .char-detail { grid-template-columns: 1fr; } }

.char-detail-portrait { position: relative; }
.char-detail-portrait img {
  width: 100%; border-radius: 14px; display: block;
  border: 3px solid #000;
  box-shadow: 0 0 30px rgba(255,46,135,.5);
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.char-detail-tag {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-head); letter-spacing: 2px; font-size: 12px;
  background: var(--pink); color: #fff;
  padding: 4px 10px; border-radius: 6px; border: 2px solid #000;
}

.char-detail-name {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 68px); line-height: .9;
  color: #fff; -webkit-text-stroke: 1.5px #000;
  text-shadow: var(--glow-teal);
}
.char-detail-role {
  font-family: var(--font-head); letter-spacing: 2px;
  color: var(--gold); font-size: clamp(15px, 2vw, 20px);
  margin: 4px 0 12px;
}
.wanted { font-size: 22px; letter-spacing: 4px; margin-bottom: 14px; }
.wanted .star { color: #4a3a18; }
.wanted .star.on { color: var(--gold); text-shadow: 0 0 12px rgba(255,210,63,.9); }

.char-detail-bio {
  font-size: 16px; font-weight: 500; line-height: 1.55;
  color: #ffe9f6; margin-bottom: 18px;
}
.char-stats { display: grid; gap: 10px; margin-bottom: 22px; }
.stat { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 12px; }
.stat-label { font-family: var(--font-head); font-size: 13px; letter-spacing: 1.5px; color: var(--teal); }
.stat-bar { height: 12px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; border: 1px solid rgba(0,0,0,.5); }
.stat-bar i {
  display: block; height: 100%; width: var(--v);
  background: linear-gradient(90deg, var(--teal), var(--pink));
  border-radius: 999px;
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.char-select-btn { width: 100%; justify-content: center; }
.char-select-btn.selected {
  background: linear-gradient(135deg, var(--teal), var(--cyan));
}

/* ============ THE GAME ============ */
.feature-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px;
}
.feature {
  background: rgba(10,5,18,.6);
  border: 2px solid rgba(255,255,255,.14);
  border-radius: 16px; padding: 26px 22px;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.feature:hover { transform: translateY(-6px); border-color: var(--teal); box-shadow: var(--glow-teal); }
.feature-ico { font-size: 40px; margin-bottom: 12px; }
.feature h3 {
  font-family: var(--font-head); letter-spacing: 1px;
  font-size: 19px; color: var(--gold); margin-bottom: 8px;
}
.feature p { font-size: 15px; font-weight: 500; line-height: 1.5; color: #ffe9f6; }

.soon-banner {
  max-width: 1100px; margin: 36px auto 0; text-align: center;
  font-family: var(--font-head); letter-spacing: 2px;
  font-size: clamp(14px, 2vw, 18px);
  color: #11020a;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  padding: 14px 22px; border-radius: 10px; border: 2px solid #000;
  box-shadow: 0 5px 0 #000;
}
.soon-flash { color: #b80000; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ============ HOW TO BUY ============ */
.buy { background: linear-gradient(180deg, rgba(23,10,38,.85), rgba(10,5,18,.6)); }
.steps {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;
}
.step {
  position: relative;
  background: rgba(10,5,18,.55);
  border: 2px solid rgba(0,230,195,.35);
  border-radius: 16px; padding: 28px 22px;
  transition: transform .18s, box-shadow .18s;
}
.step:hover { transform: translateY(-6px); box-shadow: var(--glow-pink); }
.step-no {
  font-family: var(--font-display); font-size: 52px; line-height: 1;
  color: var(--pink); -webkit-text-stroke: 1px #000;
  text-shadow: var(--glow-pink); margin-bottom: 8px;
}
.step h3 { font-family: var(--font-head); letter-spacing: 1px; font-size: 18px; color: var(--gold); margin-bottom: 8px; }
.step p { font-size: 15px; font-weight: 500; line-height: 1.5; color: #ffe9f6; }

/* ============ FOOTER ============ */
.footer {
  text-align: center;
  padding: 60px 20px 40px;
  background: var(--ink);
  border-top: 3px solid var(--pink);
}
.footer-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: clamp(20px, 3vw, 30px);
  color: #fff; text-shadow: var(--glow-pink); margin-bottom: 18px;
}
.footer-links { margin-bottom: 22px; }
.footer-links .x-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); letter-spacing: 1.5px; font-size: 15px;
  color: #fff; text-decoration: none;
  padding: 10px 20px; border: 2px solid #fff; border-radius: 8px;
  transition: all .2s;
}
.footer-links .x-link:hover { background: #fff; color: #000; transform: translateY(-2px); }
.footer-disclaimer {
  max-width: 720px; margin: 0 auto 14px;
  font-size: 12.5px; line-height: 1.6; color: #b79fc8; font-weight: 500;
}
.footer-copy { font-family: var(--font-head); letter-spacing: 2px; font-size: 12px; color: var(--teal); }

/* ============ TOAST ============ */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(120px);
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  color: #062f29; font-family: var(--font-head); letter-spacing: 1px;
  padding: 14px 26px; border-radius: 10px; border: 2px solid #000;
  box-shadow: 0 6px 0 #000, var(--glow-teal);
  z-index: 100; opacity: 0; transition: transform .35s, opacity .35s;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .7s; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}