/* ═══════════════════════════════════════════════════════════════
   RËEL STUDIO — Base CSS
   Cinematic design system — tokens, typography, reset, atmosphere
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  /* Cinematic color palette */
  --bg-main:     #0A0A0F;
  --bg-elevated: #0f0d18;
  --bg-panel:    #12101f;
  --bg:          #0A0A0F;
  --bg-2:        #0d0b1a;
  --surface:     #12101f;
  --surface-2:   #14121f;
  --surface-3:   #1a1828;

  /* Accent — overridden by Style DNA */
  --gold:        #D4A843;
  --accent:      #D4A843;
  --gold-bright: #e8c14a;
  --gold-dim:    rgba(212,168,67,0.4);
  --gold-glow:   rgba(212,168,67,0.15);
  --accent-soft: rgba(212,168,67,0.25);

  /* Violet glow companion */
  --violet:      #7C3AED;
  --violet-soft: rgba(124,58,237,0.2);
  --violet2:     #A78BFA;
  --light-purple: #A78BFA;

  /* Borders */
  --border:      rgba(255,255,255,0.07);
  --border-gold: rgba(212,168,67,0.35);

  /* Text */
  --text:        #F0EAFA;
  --text-muted:  #C8B8E8;
  --text-dim:    #8a82a0;
  --text-faint:  rgba(167,164,192,0.2);
  --text-primary: #F8F1E3;

  /* Semantic */
  --red:     #ff4b6b;
  --danger:  #ff4b6b;
  --green:   #4be1a5;
  --success: #4be1a5;
  --amber:   #f59f6a;

  /* Radius */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-soft: 0 18px 45px rgba(0,0,0,0.65);
  --shadow-glow: 0 0 32px rgba(245,201,106,0.35);

  /* Transitions */
  --t-fast:          0.18s ease-out;
  --t-normal:        0.25s ease-out;
  --t-slow:          0.45s ease-out;
  --transition-fast: 0.18s ease-out;
  --transition-med:  0.25s ease-out;
  --transition-slow: 0.45s ease-out;
  --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);

  /* Typography */
  --ff-display: 'Bebas Neue', sans-serif;
  --ff-serif:   'Cormorant Garamond', serif;
  --ff-body:    'DM Sans', sans-serif;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px;

  /* Panel dimensions */
  --left-width:  280px;
  --right-width: 300px;
  --header-h:    52px;
}

/* ── CINEMATIC BACKGROUND ───────────────────────────────────── */
body {
  background:
    radial-gradient(circle at 10% 0%,   #1b1024 0, transparent 55%),
    radial-gradient(circle at 90% 100%, #2a1a10 0, transparent 55%),
    radial-gradient(circle at 50% 50%,  #050509 0, #020208 70%);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  overflow: hidden;
}

html { height: 100%; overflow: hidden; }

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

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-bright); }

button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select {
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--t-fast);
}
input:focus, textarea:focus, select:focus { border-color: var(--border-gold); }

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(245,201,106,0.18); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(245,201,106,0.35); }

/* ── PANEL ENTER ANIMATION ──────────────────────────────────── */
.panel-enter { opacity: 0; transform: translateY(10px); }
.panel-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--transition-med) var(--ease-snappy),
    transform var(--transition-med) var(--ease-snappy);
}
.panel-module { animation: panelFadeIn 0.28s var(--ease-snappy) forwards; }
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── WAVEFORM GLOW ──────────────────────────────────────────── */
.waveform-player canvas, #waveform-canvas, #wp-canvas {
  filter: drop-shadow(0 0 10px rgba(245,201,106,0.22));
}

/* ── FILM GRAIN ─────────────────────────────────────────────── */
.film-grain { position: relative; }
.film-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.055;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

/* ── SPINNER ────────────────────────────────────────────────── */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── LOADING STATE ──────────────────────────────────────────── */
.loading {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--text-dim); padding: var(--sp-8);
  font-family: var(--ff-serif); font-style: italic;
}

/* ── TOAST ──────────────────────────────────────────────────── */
#reel-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--surface-3);
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-glow);
  color: var(--text); padding: 10px 22px;
  border-radius: 999px;
  font-size: 12px; letter-spacing: 0.05em;
  z-index: 9999; pointer-events: none;
  opacity: 0; transition: opacity var(--t-normal);
  white-space: nowrap;
}
#reel-toast.show { opacity: 1; }

/* ── IN-DEVELOPMENT PLACEHOLDER ────────────────────────────── */
.panel-dev {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; gap: var(--sp-4);
  text-align: center; padding: var(--sp-8);
}
.panel-dev .dev-icon { font-size: 48px; opacity: 0.25; margin-bottom: var(--sp-4); }
.panel-dev h2 {
  font-family: var(--ff-display); font-size: 22px;
  letter-spacing: 0.15em; color: var(--gold); margin-bottom: var(--sp-2);
}
.panel-dev p {
  font-family: var(--ff-serif); font-style: italic;
  color: var(--text-muted); max-width: 360px; line-height: 1.8;
}
.panel-dev .dev-badge {
  display: inline-block; padding: 4px 14px;
  border: 1px solid var(--border-gold); border-radius: 20px;
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--gold); font-family: var(--ff-display);
  margin-top: var(--sp-4);
}

/* ── SKELETON SHIMMER ───────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--r-sm);
}

/* ── TYPOGRAPHY UTILITIES ───────────────────────────────────── */
.t-display { font-family: var(--ff-display); letter-spacing: 0.1em; }
.t-serif   { font-family: var(--ff-serif); }
.t-gold    { color: var(--gold); }
.t-muted   { color: var(--text-muted); }
.t-dim     { color: var(--text-dim); }
.subtle    { opacity: 0.65; font-size: 0.88rem; }

/* ── STATUS INDICATORS ──────────────────────────────────────── */
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0; display: inline-block;
}
.status-dot.healthy  { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-dot.degraded { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.status-dot.outage   { background: var(--red);   box-shadow: 0 0 6px var(--red); animation: pulse 1s infinite; }
.status-dot.inactive { background: var(--text-faint); }
@keyframes pulse { 0%,100% { opacity:0.4; } 50% { opacity:1; } }

/* ── EMPTY STATES ───────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--sp-12) var(--sp-8);
  text-align: center; gap: var(--sp-3);
}
.empty-state .empty-icon { font-size: 40px; opacity: 0.2; }
.empty-state .empty-title {
  font-family: var(--ff-display); font-size: 15px;
  letter-spacing: 0.1em; color: var(--text-muted);
}
.empty-state .empty-body {
  font-family: var(--ff-serif); font-style: italic;
  color: var(--text-dim); max-width: 280px;
  line-height: 1.8; font-size: 13px;
}

/* ── SECTION TABS ───────────────────────────────────────────── */
.tab-bar {
  display: flex; border-bottom: 1px solid var(--border);
  padding: 0 var(--sp-6); flex-shrink: 0;
}
.tab-item {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--ff-display); font-size: 10px;
  letter-spacing: 0.15em; color: var(--text-dim);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: all var(--t-fast); margin-bottom: -1px;
  background: none; border-left: none; border-right: none; border-top: none;
}
.tab-item:hover { color: var(--text-muted); }
.tab-item.active { color: var(--gold); border-bottom-color: var(--gold); }

/* ── PILL TAGS ──────────────────────────────────────────────── */
.pill-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.pill {
  padding: 5px 14px; border: 1px solid var(--border);
  border-radius: 999px; font-size: 11px; color: var(--text-muted);
  cursor: pointer; transition: all var(--t-fast); user-select: none;
}
.pill:hover { border-color: var(--border-gold); color: var(--text); }
.pill.active { border-color: var(--gold); color: var(--gold); background: var(--gold-glow); }

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── SPOTLIGHT GLOW ANIMATION ───────────────────────────────── */
@keyframes spotGlow {
  0%   { transform: translate3d(-8px, -8px, 0) scale(1);    opacity: 0.8; }
  50%  { transform: translate3d(8px,   4px, 0) scale(1.04); opacity: 0.9; }
  100% { transform: translate3d(-4px,  8px, 0) scale(1.01); opacity: 0.85; }
}

/* ── CARD HOVER GLOW ────────────────────────────────────────── */
.card-glow {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(245,201,106,0.06), rgba(144,92,255,0.04));
  opacity: 0; transition: opacity 0.22s ease; pointer-events: none;
}

/* ── PHASE 4 — CINEMATIC UI VISUAL SYSTEM ───────────────────── */

/* Equalizer animation — used in header/active states */
.eq-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}
.eq-bars .eq-bar {
  width: 3px; border-radius: 2px;
  background: var(--gold);
  animation: eqPulse 1.2s ease-in-out infinite;
  transform-origin: bottom;
}
.eq-bars .eq-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.eq-bars .eq-bar:nth-child(2) { height: 14px; animation-delay: 0.18s; }
.eq-bars .eq-bar:nth-child(3) { height: 10px; animation-delay: 0.34s; }
.eq-bars .eq-bar:nth-child(4) { height: 14px; animation-delay: 0.18s; }
.eq-bars .eq-bar:nth-child(5) { height: 6px; animation-delay: 0s; }

/* Looping video background container */
.cinematic-video-bg {
  position: absolute; inset: 0; overflow: hidden;
  z-index: 0; pointer-events: none;
}
.cinematic-video-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.12;
  filter: saturate(0.6) brightness(0.5);
}
.cinematic-video-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5,5,9,0.4) 0%,
    rgba(5,5,9,0.1) 40%,
    rgba(5,5,9,0.6) 100%
  );
}

/* Visual breathing section — spacer between dense UI blocks */
.visual-breath {
  height: 48px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(245,201,106,0.025) 50%,
    transparent 100%);
  margin: 8px 0;
}

/* Ambient glow orb — decorative background element */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: orbDrift 20s ease-in-out infinite alternate;
}
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(15px, -10px) scale(1.05); }
  100% { transform: translate(-8px, 12px) scale(0.97); }
}

/* Cinematic section divider */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245,201,106,0.2) 30%,
    rgba(245,201,106,0.2) 70%,
    transparent 100%);
  margin: 32px 0;
}

/* Scroll-based reveal — add class via JS on scroll */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-snappy), transform 0.5s var(--ease-snappy);
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Active generation indicator — animated gold dot */
.gen-active-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(245,201,106,0.5);
  animation: genPing 1.4s ease-in-out infinite;
}
@keyframes genPing {
  0%   { box-shadow: 0 0 0 0 rgba(245,201,106,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(245,201,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,201,106,0); }
}

@media (prefers-reduced-motion: reduce) {
  .eq-bars .eq-bar,
  .glow-orb,
  .gen-active-dot { animation: none; }
  .reveal-on-scroll { opacity: 1; transform: none; }
}

/* ── HERO PANEL ANIMATIONS ──────────────────────────────────── */
@keyframes heroGlow {
  0%   { opacity: 0.6; transform: scale(1) translate(0, 0); }
  50%  { opacity: 0.9; transform: scale(1.04) translate(-8px, 4px); }
  100% { opacity: 0.7; transform: scale(1.02) translate(4px, -6px); }
}

@keyframes heroParticle {
  0%   { opacity: 0.4; transform: translate(0, 0) scale(1); }
  40%  { opacity: 0.8; transform: translate(-12px, 16px) scale(1.1); }
  100% { opacity: 0.5; transform: translate(8px, -10px) scale(0.95); }
}

/* Hero panel — responsive behavior */
@media (max-width: 768px) {
  /* Stack hero grid vertically on mobile */
  #spotlight-section > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero image panel goes below text on mobile */
  #hero-panel {
    min-height: 260px !important;
    border-radius: 16px !important;
    margin-top: 24px;
    order: 2;
  }

  /* Left text block stays on top */
  #spotlight-section > div > div:first-child {
    order: 1;
  }

  /* Left-to-right gradient less aggressive on mobile — full width */
  #hero-panel > div[style*="90deg"] {
    background: linear-gradient(
      180deg,
      rgba(10,7,20,0.5) 0%,
      transparent 40%
    ) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero-img        { transition: none !important; }
  #hero-panel div  { animation: none !important; }
}

/* ── CARD HOVER STATES ───────────────────────────────────────── */
.studio-glass:hover,
.stat-card:hover {
  border-color: rgba(240,217,118,0.55) !important;
  background: linear-gradient(180deg, rgba(28,24,14,0.98), rgba(10,9,6,0.98)) !important;
}

/* ── HOW IT WORKS STEP NUMBERS ───────────────────────────────── */
.step-number, .how-step-num {
  color: rgba(215,184,79,0.28);
  transition: color 0.2s;
}
.step-number:hover, .how-step-num:hover {
  color: rgba(240,217,118,0.42);
}