/* ================================================================
   Sheldon the Sheep — Cinematic Dark Glassmorphic Design System
   Fonts: Russo One (headings) + Chakra Petch (body)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Russo+One&display=swap');

:root {
  /* ── Brand Colors (pop & vibrate) ── */
  --c-bg:        #070712;
  --c-bg2:       #0f0f23;
  --c-primary:   #7c3aed;
  --c-primary2:  #6d28d9;
  --c-violet:    #a78bfa;
  --c-pink:      #f43f5e;
  --c-pink2:     #ec4899;
  --c-gold:      #f59e0b;
  --c-gold2:     #fbbf24;
  --c-sky:       #06b6d4;
  --c-green:     #10b981;
  --c-neon:      #c084fc;

  /* ── Glassmorphism tokens ── */
  --glass:       rgba(255,255,255,0.04);
  --glass-md:    rgba(255,255,255,0.07);
  --glass-hover: rgba(255,255,255,0.09);
  --glass-bdr:   rgba(255,255,255,0.10);
  --glass-bdr2:  rgba(124,58,237,0.35);

  /* ── Text ── */
  --t-1: #f0f4ff;
  --t-2: #94a3b8;
  --t-3: #64748b;

  /* ── Glows ── */
  --glow-purple: 0 0 60px rgba(124,58,237,0.5);
  --glow-pink:   0 0 60px rgba(244,63,94,0.4);
  --glow-gold:   0 0 60px rgba(245,158,11,0.45);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Chakra Petch', system-ui, sans-serif;
  background: var(--c-bg);
  color: var(--t-1);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ================================================================
   AURORA BACKGROUND (5 orbs — richer than before)
   ================================================================ */
.aurora {
  position: fixed; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.aurora-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  opacity: 0;
  animation: aurora-drift 25s ease-in-out infinite;
}
.aurora-orb:nth-child(1) { width:700px;height:700px; background:var(--c-primary); top:-200px;left:-150px; opacity:.18; animation-delay:0s; }
.aurora-orb:nth-child(2) { width:550px;height:550px; background:var(--c-pink);    top:25%;right:-180px; opacity:.15; animation-delay:-8s; }
.aurora-orb:nth-child(3) { width:500px;height:500px; background:var(--c-sky);     bottom:-100px;left:20%; opacity:.12; animation-delay:-16s; }
.aurora-orb:nth-child(4) { width:400px;height:400px; background:var(--c-gold);    top:55%;left:5%;  opacity:.14; animation-delay:-4s; }
.aurora-orb:nth-child(5) { width:350px;height:350px; background:var(--c-neon);    top:10%;left:45%; opacity:.10; animation-delay:-12s; }
@keyframes aurora-drift {
  0%,100% { transform:translate(0,0) scale(1); }
  33%     { transform:translate(40px,-50px) scale(1.08); }
  66%     { transform:translate(-25px,30px) scale(0.94); }
}

/* ================================================================
   PARALLAX LAYERS
   ================================================================ */
.parallax-wrap { position: relative; overflow: hidden; }
.parallax-layer {
  position: absolute;
  inset: -20%;
  will-change: transform;
  pointer-events: none;
}

/* ================================================================
   NAVIGATION
   ================================================================ */
.nav {
  position: fixed;
  top:0; left:0; right:0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 2rem;
  background: rgba(7,7,18,0.75);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--glass-bdr);
  transition: background 0.3s;
}
.nav.scrolled { background: rgba(7,7,18,0.95); }
.nav-logo {
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none; color: var(--t-1);
  font-family: 'Russo One', sans-serif;
  font-size: 1rem; letter-spacing: 0.04em;
}
.nav-logo .logo-icon {
  width:40px; height:40px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-pink));
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  box-shadow: var(--glow-purple);
}
.nav-links { display:flex; gap:0.25rem; list-style:none; }
.nav-links a {
  color: var(--t-2);
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.03em;
  transition: all 0.2s;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--t-1);
  background: var(--glass-md);
}
.nav-links a.active { color: var(--c-violet); }
.nav-mobile-toggle { display:none; background:none; border:none; color:var(--t-1); font-size:1.5rem; cursor:pointer; }

/* ================================================================
   3D SHELDON CHARACTER SYSTEM
   ================================================================ */
.sheldon-3d {
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
  animation: sheldon-float 5s ease-in-out infinite;
  filter: drop-shadow(0 20px 60px rgba(124,58,237,0.6));
}
@keyframes sheldon-float {
  0%,100% { transform: translateY(0) rotateY(0deg); }
  25%     { transform: translateY(-18px) rotateY(8deg); }
  50%     { transform: translateY(-8px) rotateY(0deg); }
  75%     { transform: translateY(-22px) rotateY(-8deg); }
}
/* Pose: jumping */
.sheldon-jump {
  animation: sheldon-jump 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes sheldon-jump {
  0%  { transform:translateY(0) scale(1); }
  40% { transform:translateY(-50px) scale(1.15,0.9); }
  70% { transform:translateY(-30px) scale(0.9,1.1); }
  100%{ transform:translateY(0) scale(1); }
}
/* Pose: spin */
.sheldon-spin {
  animation: sheldon-spin3d 1s ease-in-out forwards;
}
@keyframes sheldon-spin3d {
  0%  { transform:rotateY(0deg); }
  100%{ transform:rotateY(360deg); }
}
/* Pose: wave */
.sheldon-wave {
  animation: sheldon-wave 2s ease-in-out infinite;
}
@keyframes sheldon-wave {
  0%,100%{ transform:translateY(0) rotate(0deg); }
  20%   { transform:translateY(-10px) rotate(-8deg); }
  40%   { transform:translateY(-16px) rotate(8deg); }
  60%   { transform:translateY(-10px) rotate(-4deg); }
  80%   { transform:translateY(-5px) rotate(4deg); }
}
/* Pose: run */
.sheldon-run {
  animation: sheldon-run 0.8s steps(4) infinite;
}
@keyframes sheldon-run {
  0%  { transform:translateX(0)  scaleX(1); }
  50% { transform:translateX(8px) scaleX(0.95); }
  100%{ transform:translateX(0)  scaleX(1); }
}

/* ================================================================
   GLASS CARDS
   ================================================================ */
.glass-card {
  background: var(--glass);
  border: 1px solid var(--glass-bdr);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  transition: all 0.35s cubic-bezier(0.34,1.2,0.64,1);
}
.glass-card:hover {
  background: var(--glass-md);
  border-color: var(--glass-bdr2);
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 60px rgba(124,58,237,0.25), 0 0 0 1px rgba(124,58,237,0.2);
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display: inline-flex; align-items:center; gap:0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer; border: none;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.34,1.2,0.64,1);
  position: relative; overflow: hidden;
}
.btn::after {
  content:'';
  position:absolute; inset:0;
  background:rgba(255,255,255,0);
  transition: background 0.2s;
}
.btn:hover::after { background:rgba(255,255,255,0.07); }
.btn-primary {
  background: linear-gradient(135deg, var(--c-primary), var(--c-pink));
  color: white;
  box-shadow: 0 4px 24px rgba(124,58,237,0.5);
}
.btn-primary:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 8px 40px rgba(124,58,237,0.7); }
.btn-glass {
  background: var(--glass);
  border: 1px solid var(--glass-bdr);
  color: var(--t-1);
}
.btn-glass:hover { background:var(--glass-md); border-color:var(--c-primary); transform:translateY(-2px); }
.btn-gold {
  background: linear-gradient(135deg, var(--c-gold), #f97316);
  color: #1a0800; font-weight:700;
  box-shadow: 0 4px 24px rgba(245,158,11,0.5);
}
.btn-gold:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 8px 40px rgba(245,158,11,0.7); }
.btn-neon {
  background: transparent;
  border: 2px solid var(--c-violet);
  color: var(--c-violet);
  box-shadow: 0 0 20px rgba(167,139,250,0.3), inset 0 0 20px rgba(167,139,250,0.05);
}
.btn-neon:hover {
  background: rgba(167,139,250,0.12);
  box-shadow: 0 0 40px rgba(167,139,250,0.6), inset 0 0 30px rgba(167,139,250,0.1);
  transform: translateY(-2px);
}

/* ================================================================
   SECTION LAYOUT
   ================================================================ */
.section {
  padding: 5rem 2rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative; z-index: 1;
}
.section-header { text-align:center; margin-bottom:3rem; }
.section-tag {
  display:inline-block;
  padding:0.35rem 1rem;
  background:rgba(124,58,237,0.18);
  border:1px solid rgba(124,58,237,0.4);
  border-radius:20px;
  font-size:0.75rem; font-weight:700; letter-spacing:0.12em;
  color:var(--c-violet); text-transform:uppercase;
  margin-bottom:1rem;
}
.section-title {
  font-family: 'Russo One', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--t-1) 0%, var(--c-violet) 60%, var(--c-pink) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.section-subtitle { color:var(--t-2); font-size:1rem; max-width:580px; margin:0 auto; line-height:1.75; }

/* ================================================================
   PAGE HERO (sub-pages)
   ================================================================ */
.page-hero {
  padding: 8rem 2rem 3.5rem;
  text-align: center;
  position: relative; z-index: 1;
}
.page-hero h1 {
  font-family: 'Russo One', sans-serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900; line-height: 1.05;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #fff 0%, var(--c-violet) 50%, var(--c-pink) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.page-hero p { color:var(--t-2); font-size:1.05rem; max-width:600px; margin:0 auto 2rem; line-height:1.75; }

/* ================================================================
   GRADIENT TEXT UTILITY
   ================================================================ */
.grad-purple { background:linear-gradient(135deg,var(--c-primary),var(--c-pink)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grad-gold    { background:linear-gradient(135deg,var(--c-gold),#f97316); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grad-sky     { background:linear-gradient(135deg,var(--c-sky),var(--c-green)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ================================================================
   BADGE
   ================================================================ */
.badge-coming-soon {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.3rem 0.75rem;
  background:rgba(245,158,11,0.15); border:1px solid rgba(245,158,11,0.3);
  border-radius:20px; font-size:0.72rem; font-weight:700; color:var(--c-gold); letter-spacing:0.06em;
}
.badge-coming-soon::before { content:'●'; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.3} }

/* ================================================================
   GAME / COLORING / EPISODE CARDS  (shared)
   ================================================================ */
.coloring-card {
  background: var(--glass);
  border: 1px solid var(--glass-bdr);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34,1.2,0.64,1);
  cursor: pointer;
}
.coloring-card:hover {
  transform:translateY(-6px) scale(1.02);
  border-color:var(--glass-bdr2);
  box-shadow:0 16px 50px rgba(124,58,237,0.3);
}
.coloring-card .preview {
  aspect-ratio:1;
  background:rgba(255,255,255,0.025);
  display:flex; align-items:center; justify-content:center;
  font-size:3rem;
  border-bottom:1px solid var(--glass-bdr);
}
.coloring-card .card-info   { padding:0.75rem 1rem; }
.coloring-card .card-info h3 { font-size:0.9rem; font-weight:700; margin-bottom:0.2rem; }
.coloring-card .card-info p  { font-size:0.75rem; color:var(--t-2); }
.coloring-card .card-actions { padding:0.5rem 1rem 0.9rem; display:flex; gap:0.5rem; }
.coloring-card .card-actions .btn { flex:1; justify-content:center; padding:0.4rem 0.5rem; font-size:0.78rem; }

.game-tag {
  padding:0.2rem 0.6rem;
  background:rgba(255,255,255,0.05); border:1px solid var(--glass-bdr);
  border-radius:6px; font-size:0.72rem; color:var(--t-2);
}

.episode-card { display:flex; gap:1.25rem; padding:1.25rem; align-items:flex-start; }
.episode-thumb {
  width:120px; min-width:120px; height:80px;
  background:rgba(124,58,237,0.15);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:2rem;
  border:1px solid rgba(124,58,237,0.2);
}
.episode-info h3 { font-size:1rem; font-weight:700; margin-bottom:0.25rem; }
.episode-info p  { font-size:0.85rem; color:var(--t-2); line-height:1.5; }
.episode-number  { font-size:0.75rem; color:var(--c-violet); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:0.2rem; }

/* ================================================================
   GRID UTILITIES
   ================================================================ */
.grid-2 { display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; }

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  text-align:center; padding:3rem 2rem;
  border-top:1px solid var(--glass-bdr);
  color:var(--t-2); font-size:0.85rem;
  position:relative; z-index:1;
}
.footer a { color:var(--c-violet); text-decoration:none; }
.footer a:hover { color:var(--c-pink); }

/* ================================================================
   PARALLAX SCENE (hero backgrounds)
   ================================================================ */
.parallax-scene {
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.parallax-star {
  position:absolute; border-radius:50%;
  background:white; opacity:0;
  animation:star-twinkle var(--dur,3s) ease-in-out infinite var(--delay,0s);
}
@keyframes star-twinkle { 0%,100%{opacity:0.1} 50%{opacity:var(--max-op,0.6)} }

/* ================================================================
   SCROLL FADE IN
   ================================================================ */
.fade-up {
  opacity:0; transform:translateY(30px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ================================================================
   FLOATING PARTICLES (hero decoration)
   ================================================================ */
.particles-wrap { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.particle {
  position:absolute;
  font-size:1.5rem;
  opacity:0;
  animation:particle-float var(--dur,8s) ease-in-out infinite var(--delay,0s);
  filter:blur(0.5px);
}
@keyframes particle-float {
  0%   { opacity:0; transform:translateY(100%) rotate(0deg); }
  10%  { opacity:0.4; }
  90%  { opacity:0.2; }
  100% { opacity:0; transform:translateY(-150vh) rotate(360deg); }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:768px) {
  .nav-links { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:rgba(7,7,18,0.97); border-bottom:1px solid var(--glass-bdr); padding:1rem; z-index:200; }
  .nav-links.open { display:flex; }
  .nav-mobile-toggle { display:block; }
  .section { padding:4rem 1rem 3rem; }
  .grid-2 { grid-template-columns:1fr; }
  .episode-card { flex-direction:column; }
  .episode-thumb { width:100%; height:140px; }
  .page-hero { padding:7rem 1rem 2.5rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms!important; transition-duration:0.01ms!important; }
}