/* ==========================================================
   GTA6.TeneMap — Vice City neon-noir theme
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --ink:        #0a0e14;
  --panel:      #10151f;
  --panel-2:    #161c29;
  --line:       rgba(255,255,255,.08);
  --paper:      #eef1f6;
  --paper-dim:  #a7afc0;
  --pink:       #ff3d7f;
  --cyan:       #24e0d8;
  --purple:     #7c5cff;
  --sunset:     linear-gradient(120deg,#ff3d7f 0%,#ff7a4d 45%,#ffd24d 100%);
  --radius:     14px;
  --font-display: 'Bebas Neue', 'Space Grotesk', sans-serif;
  --font-body:  'Space Grotesk', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.5;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); letter-spacing:.5px; margin:0; }
p{ margin:0; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* film-grain overlay */
.noise{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 5vw;
  background:rgba(10,14,20,.75);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{ font-family:var(--font-display); font-size:1.5rem; display:flex; align-items:baseline; gap:2px; }
.brand span{ color:var(--paper); }
.brand b{ color:var(--pink); font-style:normal; }
.brand i{ color:var(--paper-dim); font-style:normal; font-size:.85rem; margin-left:4px; }
.topbar nav{ display:flex; gap:34px; }
.topbar nav a{
  font-size:.85rem; letter-spacing:.06em; color:var(--paper-dim);
  transition:color .2s ease;
}
.topbar nav a:hover, .topbar nav a:focus-visible{ color:var(--cyan); }
.menu{ display:none; font-size:1.4rem; color:var(--paper); }

@media (max-width: 860px){
  .menu{ display:block; }
  .topbar nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--panel);
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .topbar nav.open{ max-height:300px; }
  .topbar nav a{ padding:16px 5vw; border-top:1px solid var(--line); }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 5vw 64px;
  background:
    linear-gradient(180deg, rgba(10,14,20,.15) 0%, rgba(10,14,20,.55) 55%, var(--ink) 96%),
    url("banner-gta6.png");
  background-size:cover;
  background-position:center 30%;
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
  pointer-events:none;
}
.hero-copy{ max-width:780px; position:relative; z-index:1; }
.eyebrow{
  font-size:.8rem; letter-spacing:.25em; color:var(--cyan);
  margin-bottom:18px; font-weight:600;
}
.hero h1{
  font-size:clamp(3.2rem, 9vw, 7rem);
  line-height:.92;
  color:var(--paper);
  text-shadow:0 4px 24px rgba(0,0,0,.55);
}
.hero h1 em{
  font-style:normal;
  background:var(--sunset);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{
  margin-top:26px; max-width:56ch;
  font-size:1.1rem; color:var(--paper-dim);
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.actions{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:14px 28px; border-radius:999px;
  font-weight:600; font-size:.95rem; transition:transform .18s ease, box-shadow .18s ease;
}
.btn.pink{
  background:var(--pink); color:#160a10;
  box-shadow:0 8px 24px rgba(255,61,127,.35);
}
.btn.pink:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,61,127,.5); }
.btn.ghost{
  border:1px solid var(--line); color:var(--paper);
}
.btn.ghost:hover{ border-color:var(--cyan); color:var(--cyan); }

.release{
  margin-top:56px; display:flex; align-items:baseline; gap:14px;
  padding-top:20px; border-top:1px solid var(--line); max-width:420px;
}
.release strong{ font-family:var(--font-display); font-size:1.6rem; color:var(--paper); }
.release span{ font-size:.78rem; letter-spacing:.14em; color:var(--paper-dim); }

.hero-credit{
  position:absolute; bottom:22px; right:5vw;
  font-size:.72rem; letter-spacing:.16em; color:rgba(255,255,255,.25);
}

/* ---------- ticker ---------- */
.ticker{
  display:flex; align-items:center; gap:18px;
  background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:12px 0; overflow:hidden;
}
.ticker > span{
  flex:none; margin-left:5vw; padding:4px 12px; border-radius:6px;
  background:var(--pink); color:#160a10; font-size:.72rem; font-weight:700; letter-spacing:.1em;
}
.ticker-track{ flex:1; overflow:hidden; }
#tickerText{
  display:inline-block; white-space:nowrap;
  font-size:.85rem; color:var(--paper-dim);
  animation:scroll-left 18s linear infinite;
  padding-left:100%;
}
@keyframes scroll-left{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}

/* ---------- generic section ---------- */
.section{ padding:110px 5vw; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:48px; flex-wrap:wrap;
}
.section-head small{
  display:block; color:var(--cyan); letter-spacing:.2em; font-size:.75rem; margin-bottom:10px;
}
.section-head h2{ font-size:clamp(2rem, 4vw, 3rem); color:var(--paper); }
.section-head h2 span{ color:var(--paper-dim); }
.filter{
  border:1px solid var(--line); padding:10px 20px; border-radius:999px;
  font-size:.78rem; letter-spacing:.08em; color:var(--paper-dim);
  transition:border-color .2s ease, color .2s ease;
}
.filter:hover{ border-color:var(--pink); color:var(--pink); }

/* ---------- news ---------- */
.news-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; display:flex; flex-direction:column; gap:12px;
  transition:transform .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.2); }
.card.featured{ grid-column:span 1; }
.card-img{
  height:170px; border-radius:10px;
  background-size:cover; background-position:center;
}
.card-img.city{ background:linear-gradient(135deg,#ff3d7f,#7c5cff); }
.card-img.neon{ background:linear-gradient(135deg,#24e0d8,#1a2a6c); }
.card-img.ocean{ background:linear-gradient(135deg,#ffd24d,#ff7a4d); }
.tag{
  align-self:flex-start; font-size:.68rem; letter-spacing:.12em; font-weight:700;
  color:var(--ink); background:var(--cyan); padding:4px 10px; border-radius:6px;
}
.card h3{ font-size:1.2rem; color:var(--paper); font-family:var(--font-body); font-weight:600; letter-spacing:0; }
.card p{ color:var(--paper-dim); font-size:.92rem; }
.card > a{ margin-top:auto; color:var(--pink); font-size:.85rem; font-weight:600; }
.card .date{ margin-top:auto; font-size:.78rem; color:var(--paper-dim); letter-spacing:.08em; }

/* ---------- video ---------- */
.video-section{ padding:0 5vw 110px; }
.video-grid{
  display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:18px;
  height:520px;
}
.video{
  position:relative; border-radius:var(--radius); overflow:hidden;
  display:flex; align-items:flex-end; padding:20px;
  background:linear-gradient(160deg,#1a2035,#0c0f18);
  border:1px solid var(--line);
  transition:transform .2s ease;
}
.video:hover{ transform:scale(1.015); }
.main-video{ grid-row:1 / span 2; align-items:flex-end; }
.main-video::before, .v2::before, .v3::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 70% 30%, rgba(255,61,127,.25), transparent 60%);
}
.play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.12); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:#fff; border:1px solid rgba(255,255,255,.3);
}
.video-info{ position:relative; z-index:1; display:flex; flex-direction:column; gap:6px; }
.video-info b{ font-size:1.3rem; }
.video-info span{ font-size:.75rem; letter-spacing:.1em; color:var(--paper-dim); }
.v2 b, .v3 b{ position:relative; z-index:1; font-size:1rem; }

/* ---------- people ---------- */
.people-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.person{
  aspect-ratio:3/4; border-radius:var(--radius); position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:26px;
  border:1px solid var(--line);
}
.person.lucia{ background:linear-gradient(200deg,#ff3d7f,#2a0e1e); }
.person.jason{ background:linear-gradient(200deg,#24e0d8,#0e1a2a); }
.person.leonida{ background:linear-gradient(200deg,#7c5cff,#140e2a); }
.person span{ font-size:.75rem; letter-spacing:.2em; color:rgba(255,255,255,.6); }
.person h3{ font-size:2.2rem; margin:6px 0; color:#fff; }
.person p{ color:rgba(255,255,255,.75); font-size:.9rem; }

/* ---------- map ---------- */
.map-section{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
  padding:110px 5vw; background:var(--panel);
}
.map-copy small{ color:var(--cyan); letter-spacing:.2em; font-size:.75rem; }
.map-copy h2{ font-size:clamp(2rem,4vw,3rem); margin:14px 0 18px; color:var(--paper); }
.map-copy h2 span{ color:var(--pink); }
.map-copy p{ color:var(--paper-dim); max-width:46ch; margin-bottom:28px; }
.fake-map{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius);
  background:linear-gradient(160deg,#0c1830,#091018);
  border:1px solid var(--line); overflow:hidden;
}
.map-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(36,224,216,.12) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(36,224,216,.12) 1px, transparent 1px);
  background-size:32px 32px;
}
.route{
  position:absolute; top:20%; left:10%; width:65%; height:55%;
  border:2px dashed rgba(255,61,127,.5); border-radius:40% 60% 55% 45%;
}
.pin{
  position:absolute; width:34px; height:34px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); color:#160a10; font-size:.9rem;
}
.pin span{ transform:rotate(45deg); }
.pin.a{ top:22%; left:14%; background:var(--pink); font-size:1rem; }
.pin.b{ top:55%; left:60%; background:var(--cyan); font-size:1rem; }
.pin.c{ top:70%; left:30%; background:#ffd24d; font-size:1rem; }
.fake-map label{
  position:absolute; bottom:16px; left:20px;
  font-family:var(--font-display); letter-spacing:.1em; color:rgba(255,255,255,.5); font-size:.85rem;
}

/* ---------- community ---------- */
.community{
  padding:110px 5vw; text-align:center;
  background:radial-gradient(ellipse at 50% 0%, rgba(124,92,255,.18), transparent 60%), var(--ink);
}
.community > div{ max-width:560px; margin:0 auto; }
.community small{ color:var(--cyan); letter-spacing:.2em; font-size:.75rem; }
.community h2{ font-size:clamp(2rem,4vw,2.8rem); margin:14px 0 12px; color:var(--paper); }
.community p{ color:var(--paper-dim); margin-bottom:30px; }
.community form{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.community input{
  flex:1; min-width:220px; padding:14px 20px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--paper); font-size:.95rem;
}
.community input:focus{ border-color:var(--cyan); }
.community .fine{ display:block; margin-top:16px; color:rgba(255,255,255,.35); font-size:.75rem; }

/* ---------- footer ---------- */
footer{
  padding:40px 5vw; text-align:center; border-top:1px solid var(--line);
  color:rgba(255,255,255,.4); font-size:.8rem; display:flex; flex-direction:column; gap:8px;
}
footer .brand{ justify-content:center; display:flex; margin-bottom:4px; }

/* ---------- toast ---------- */
#toast{
  position:fixed; bottom:26px; left:50%; transform:translate(-50%, 20px);
  background:var(--panel-2); border:1px solid var(--line); color:var(--paper);
  padding:14px 24px; border-radius:999px; font-size:.88rem;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  z-index:200; box-shadow:0 12px 30px rgba(0,0,0,.4);
}
#toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .news-grid, .people-grid{ grid-template-columns:1fr; }
  .video-grid{ grid-template-columns:1fr; grid-template-rows:none; height:auto; }
  .main-video{ grid-row:auto; height:280px; }
  .video{ height:180px; }
  .map-section{ grid-template-columns:1fr; }
  .section, .video-section, .map-section, .community{ padding-left:6vw; padding-right:6vw; }
}