/*
Theme Name: Up In The Past - Retro Blast
Theme URI: https://upinthepast.com
Author: Kan Get Reels Media
Description: Official Up In The Past theme. Rewind to the Best Parts. Mobile-first, clean, with color themes: Neon Blast, Sunset 90s, Vaporwave, Midnight. For TikTok + YouTube archives.
Version: 5.0
License: GPL v2
*/

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Press+Start+2P&family=Anton&family=Inter:wght@600;800&display=swap');

:root{
  --neon-green:#39FF14;
  --neon-pink:#FF10F0;
  --neon-blue:#00F0FF;
  --purple:#7A00FF;
  --bg:#0a0a0a;
  --card:#ffffff;
  --text:#ffffff;
  --accent: var(--neon-green);
}
[data-theme="sunset"]{
  --neon-green:#FF6B00;
  --neon-pink:#FF006B;
  --neon-blue:#FFD600;
  --purple:#FF3D00;
  --bg:#1a0a00;
  --accent:#FF6B00;
}
[data-theme="vaporwave"]{
  --neon-green:#FF71CE;
  --neon-pink:#01CDFE;
  --neon-blue:#05FFA1;
  --purple:#B967FF;
  --bg:#12051a;
  --accent:#FF71CE;
}
[data-theme="midnight"]{
  --neon-green:#00F0FF;
  --neon-pink:#7A00FF;
  --neon-blue:#39FF14;
  --purple:#00D1FF;
  --bg:#050508;
  --accent:#00F0FF;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Bangers'; letter-spacing:1px; line-height:.9}
.retro-card{border:4px solid #000; box-shadow:8px 8px 0 #000; background:var(--card); color:#000; border-radius:2px; transition:.2s}
.retro-card:hover{transform:translate(-2px,-2px); box-shadow:10px 10px 0 #000}

/* MARQUEE */
.marquee{background:#000; color:var(--neon-green); font-family:'Press Start 2P'; font-size:9px; padding:7px 0; border-bottom:3px solid var(--neon-green); overflow:hidden; white-space:nowrap}
.marquee span{display:inline-block; padding-left:100%; animation:scroll 20s linear infinite}
@keyframes scroll{to{transform:translateX(-100%)}}

/* HEADER */
.site-header{background:#000; border-bottom:5px solid var(--neon-green); padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; z-index:100}
.logo-mark{width:52px; height:52px; background:linear-gradient(135deg,var(--neon-green),var(--neon-pink),var(--neon-blue)); border:3px solid #fff; display:grid; place-items:center; color:#000; font-family:'Press Start 2P'; font-size:8px; line-height:1.1; box-shadow:4px 4px 0 #000; flex-shrink:0}
.nav-links{display:flex; gap:8px; align-items:center}
.nav-links a{background:var(--neon-green); color:#000; border:3px solid #000; padding:6px 14px; font-family:'Bangers'; font-size:18px; text-decoration:none; box-shadow:3px 3px 0 #000}
.mobile-toggle{display:none; background:var(--neon-pink); border:3px solid #000; padding:8px 12px; font-family:'Press Start 2P'; font-size:10px; color:#fff}

/* LAYOUT */
.wrap{max-width:1320px; margin:0 auto; padding:16px; display:grid; grid-template-columns:1fr 340px; gap:20px}
.hero{display:grid; grid-template-columns:1.15fr .85fr; overflow:hidden}
.hero-copy{padding:28px; background:linear-gradient(135deg,var(--neon-green),var(--neon-blue),var(--neon-pink))}
.vhs{position:relative}
.vhs::after{content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.04) 2px 3px); pointer-events:none}

/* GRID */
.video-grid{display:grid; gap:14px}
.tiktok-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.youtube-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* THEME SWITCHER */
.theme-dots{display:flex; gap:8px; align-items:center; padding:6px 0}
.dot{width:22px; height:22px; border-radius:50%; border:3px solid #000; cursor:pointer; box-shadow:2px 2px 0 #000}
.dot[data-theme="neon"]{background:linear-gradient(135deg,#39FF14,#FF10F0)}
.dot[data-theme="sunset"]{background:linear-gradient(135deg,#FF6B00,#FF006B)}
.dot[data-theme="vaporwave"]{background:linear-gradient(135deg,#FF71CE,#01CDFE)}
.dot[data-theme="midnight"]{background:linear-gradient(135deg,#00F0FF,#7A00FF)}

/* RESPONSIVE */
@media(max-width:980px){
  .wrap{grid-template-columns:1fr; padding:12px}
  .hero{grid-template-columns:1fr}
  .nav-links{display:none; position:absolute; top:76px; left:0; right:0; background:#000; padding:12px; flex-direction:column; border-bottom:4px solid var(--neon-green)}
  .nav-links.open{display:flex}
  .mobile-toggle{display:block}
  .tiktok-grid{grid-template-columns:repeat(2,1fr)}
  .youtube-grid{grid-template-columns:1fr}
  h1{font-size:52px !important}
}
@media(max-width:480px){
  .tiktok-grid{grid-template-columns:1fr 1fr; gap:10px}
  .logo-mark{width:44px; height:44px; font-size:7px}
  .marquee{font-size:7px}
}