/* ═══════════════════════════════════════════════
   THE FASCINATED — Shared Stylesheet
   80s Neon Synthpop · Los Angeles
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Dancing+Script:wght@700&family=Share+Tech+Mono&display=swap');

:root {
  --neon-pink:    #ff2d78;
  --hot-pink:     #ff006e;
  --light-pink:   #ffb3d1;
  --blush:        #ff85b3;
  --magenta:      #c255b9;
  --purple:       #9b05c8;
  --lavender:     #c47fff;
  --deep-purple:  #1a0028;
  --midnight:     #0d001a;
  --darkbg:       #07000f;
  --electric:     #00f5ff;
  --glow-pink:    rgba(255,45,120,0.55);
  --glow-purple:  rgba(155,5,200,0.45);
  --glow-lav:     rgba(196,127,255,0.35);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--midnight);
  color: var(--light-pink);
  font-family: 'Rajdhani', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── SCANLINES ── */
body::before {
  content:'';
  position:fixed; inset:0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px
  );
  pointer-events:none;
  z-index:9000;
}

/* ── GRID BG ── */
.grid-bg {
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,45,120,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,45,120,0.06) 1px, transparent 1px);
  background-size:55px 55px;
  pointer-events:none;
  z-index:0;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0;
  z-index:8000;
  height:66px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  background: linear-gradient(180deg, rgba(7,0,15,0.97) 0%, rgba(7,0,15,0.85) 100%);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--neon-pink);
  box-shadow: 0 0 30px var(--glow-pink), 0 2px 60px rgba(0,0,0,0.6);
}

.nav-logo {
  font-family:'Orbitron',monospace;
  font-weight:900;
  font-size:1rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--neon-pink);
  text-shadow:0 0 18px var(--neon-pink), 0 0 40px var(--hot-pink);
  text-decoration:none;
  animation:flicker 7s infinite;
  flex-shrink:0;
}

.nav-links {
  display:flex; gap:30px; list-style:none;
}

.nav-links a {
  font-family:'Orbitron',monospace;
  font-size:0.62rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--lavender);
  text-decoration:none;
  transition:color 0.2s, text-shadow 0.2s;
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:1px;
  background:var(--neon-pink);
  box-shadow:0 0 6px var(--neon-pink);
  transform:scaleX(0);
  transition:transform 0.3s;
}
.nav-links a:hover, .nav-links a.active {
  color:var(--neon-pink);
  text-shadow:0 0 10px var(--neon-pink);
}
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }

.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.hamburger span {
  width:24px; height:2px;
  background:var(--neon-pink);
  box-shadow:0 0 7px var(--neon-pink);
  display:block; transition:all 0.3s;
}

/* ── TICKER ── */
.ticker-wrap {
  position:relative; z-index:1;
  overflow:hidden;
  background:linear-gradient(90deg, var(--hot-pink) 0%, var(--purple) 50%, var(--hot-pink) 100%);
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,0.15);
  border-bottom:1px solid rgba(255,255,255,0.15);
}
.ticker-track {
  display:flex; gap:64px;
  width:max-content;
  animation:ticker 28s linear infinite;
  white-space:nowrap;
}
.ticker-track span {
  font-family:'Orbitron',monospace;
  font-size:0.6rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:#fff;
  opacity:0.9;
}

/* ── PAGE WRAPPER ── */
.page-wrap {
  padding-top:66px;
  position:relative; z-index:1;
}

/* ── HERO BAND (page header) ── */
.page-hero {
  padding:80px 48px 60px;
  text-align:center;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,45,120,0.2);
}
.page-hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(155,5,200,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(255,45,120,0.12) 0%, transparent 60%);
  pointer-events:none;
}

.page-eyebrow {
  font-family:'Orbitron',monospace;
  font-size:0.6rem;
  letter-spacing:0.45em;
  text-transform:uppercase;
  color:var(--blush);
  margin-bottom:14px;
  display:block;
}
.page-title {
  font-family:'Orbitron',monospace;
  font-weight:900;
  font-size:clamp(2rem,6vw,4.5rem);
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#fff;
  text-shadow:0 0 20px var(--neon-pink), 0 0 60px var(--hot-pink), 4px 4px 0 var(--purple);
  line-height:1.1;
}
.page-sub {
  font-family:'Dancing Script',cursive;
  font-size:clamp(1rem,3vw,1.6rem);
  color:var(--lavender);
  text-shadow:0 0 16px var(--purple);
  margin-top:10px;
}
.neon-rule {
  width:140px; height:2px;
  background:linear-gradient(90deg, transparent, var(--neon-pink), transparent);
  margin:20px auto 0;
  box-shadow:0 0 12px var(--neon-pink);
}

/* ── SECTION ── */
.section {
  padding:80px 48px;
  position:relative; z-index:1;
}
.section-alt { background:rgba(155,5,200,0.04); }

/* ── BUTTONS ── */
.btn-primary {
  display:inline-block;
  font-family:'Orbitron',monospace;
  font-size:0.65rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:14px 34px;
  background:linear-gradient(135deg, var(--hot-pink), var(--purple));
  color:#fff;
  text-decoration:none;
  border:1px solid var(--neon-pink);
  box-shadow:0 0 20px var(--glow-pink), inset 0 0 20px rgba(255,255,255,0.04);
  transition:all 0.3s;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
  cursor:pointer; font-family:'Orbitron',monospace;
}
.btn-primary:hover {
  background:linear-gradient(135deg, var(--neon-pink), var(--hot-pink));
  box-shadow:0 0 40px var(--glow-pink), 0 0 80px var(--glow-purple);
  transform:translateY(-2px); color:#fff;
}
.btn-ghost {
  display:inline-block;
  font-family:'Orbitron',monospace;
  font-size:0.65rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:14px 34px;
  background:transparent;
  color:var(--lavender);
  text-decoration:none;
  border:1px solid var(--lavender);
  box-shadow:0 0 12px var(--glow-lav);
  transition:all 0.3s;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
}
.btn-ghost:hover {
  border-color:var(--neon-pink); color:var(--neon-pink);
  box-shadow:0 0 30px var(--glow-pink); transform:translateY(-2px);
}

/* ── FOOTER ── */
.site-footer {
  background:#050008;
  border-top:1px solid rgba(255,45,120,0.2);
  padding:50px 48px 36px;
  text-align:center;
  position:relative; z-index:1;
}
.footer-logo {
  font-family:'Orbitron',monospace;
  font-size:1.3rem; font-weight:900;
  letter-spacing:0.3em; text-transform:uppercase;
  color:var(--neon-pink);
  text-shadow:0 0 20px var(--neon-pink);
  animation:flicker 7s infinite;
  margin-bottom:20px;
}
.footer-social {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-bottom:24px;
}
.footer-social a {
  font-family:'Orbitron',monospace;
  font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase;
  padding:9px 18px;
  border:1px solid rgba(196,127,255,0.3);
  color:var(--lavender); text-decoration:none;
  transition:all 0.3s;
}
.footer-social a:hover {
  border-color:var(--neon-pink); color:var(--neon-pink);
  box-shadow:0 0 14px var(--glow-pink); transform:translateY(-2px);
}
.footer-copy {
  font-size:0.72rem; color:rgba(255,133,179,0.35);
  letter-spacing:0.1em; line-height:2;
}
.footer-copy a { color:var(--blush); text-decoration:none; }
.footer-copy a:hover { color:var(--neon-pink); }

/* ── LIGHTBOX ── */
.lightbox-overlay {
  position:fixed; inset:0;
  background:rgba(7,0,15,0.96);
  z-index:9500;
  display:none; align-items:center; justify-content:center;
  padding:40px;
  backdrop-filter:blur(10px);
}
.lightbox-overlay.active { display:flex; }
.lightbox-img {
  max-width:90vw; max-height:82vh;
  object-fit:contain;
  border:2px solid var(--neon-pink);
  box-shadow:0 0 60px var(--glow-pink), 0 0 120px var(--glow-purple);
}
.lightbox-close {
  position:absolute; top:22px; right:30px;
  font-family:'Orbitron',monospace; font-size:1.1rem;
  color:var(--neon-pink); cursor:pointer;
  background:none; border:none;
  text-shadow:0 0 12px var(--neon-pink); z-index:9600;
  letter-spacing:0.1em;
}

/* ── ANIMATIONS ── */
@keyframes flicker {
  0%,19%,21%,23%,25%,54%,56%,100% { opacity:1; }
  20%,24%,55% { opacity:0.45; }
}
@keyframes ticker {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes glow-pulse {
  0%,100% { box-shadow:0 0 20px var(--glow-pink); }
  50%      { box-shadow:0 0 40px var(--glow-pink), 0 0 80px var(--glow-purple); }
}

.fade-in { animation:fadeUp 0.7s ease both; }
.fade-in-1 { animation:fadeUp 0.7s 0.1s ease both; }
.fade-in-2 { animation:fadeUp 0.7s 0.2s ease both; }
.fade-in-3 { animation:fadeUp 0.7s 0.3s ease both; }
.fade-in-4 { animation:fadeUp 0.7s 0.4s ease both; }
.fade-in-5 { animation:fadeUp 0.7s 0.5s ease both; }

/* ── RETRO SUN ── */
.retro-sun {
  position:absolute; bottom:-80px; left:50%;
  transform:translateX(-50%);
  width:600px; height:320px;
  background:linear-gradient(180deg, #ff006e 0%, #ff85b3 35%, #ffb3d1 55%, transparent 100%);
  border-radius:600px 600px 0 0;
  opacity:0.12; overflow:hidden;
}
.retro-sun::before {
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 14px,
    rgba(7,0,15,0.65) 14px, rgba(7,0,15,0.65) 19px
  );
}

/* ═══════════════════════
   RESPONSIVE
═══════════════════════ */
@media (max-width:900px) {
  nav { padding:0 20px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:fixed; top:66px; left:0; right:0;
    background:rgba(7,0,15,0.98);
    padding:28px 24px; gap:22px;
    border-bottom:1px solid var(--neon-pink);
    z-index:7999;
  }
  .section { padding:60px 20px; }
  .page-hero { padding:60px 20px 48px; }
  .site-footer { padding:40px 20px 28px; }
}