/* ═══════════════════════════════════════════════════════════
   FILMABEND — BASE STYLES
   Design: "The Projection Room"
   01-tokens.md + 02-global.md
   ═══════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root {

  /* ── HINTERGRÜNDE ────────────────────────────── */
  --ink:       #0b0a0f;   /* Tiefstes Schwarz — body background        */
  --void:      #0e0d13;   /* Leicht aufgehellt — Panel background       */
  --surface:   #151421;   /* Karten, Inputs, Chips                      */
  --lift:      #1c1b2a;   /* Hover-Flächen, Toggle-Hintergrund          */
  --hover:     #232234;   /* Aktive Hover-States                        */

  /* ── PRIMÄRAKZENT: AMBER (Projektorlicht) ───── */
  --amber:      #e8a93c;
  --amber-dim:  #a87a28;              /* Borders, gedimmte Variante     */
  --amber-glow: rgba(232,169,60,.15); /* Box-Shadow Glow                */
  --amber-sub:  rgba(232,169,60,.08); /* Subtile Hintergrundfläche      */

  /* ── SEKUNDÄRAKZENT: TEAL (nur Genre-Tags) ─── */
  --teal:     #3da8aa;
  --teal-dim: rgba(61,168,170,.25);   /* Teal Border                    */
  --teal-sub: rgba(61,168,170,.06);   /* Teal Hintergrundfläche         */

  /* ── SEMANTISCHE FARBEN ─────────────────────── */
  --red:   #c24a3a;   /* Danger, Error                                  */
  --green: #4caf82;   /* Success, Gesehen-Indikator, Server-Status      */

  /* ── TEXT ───────────────────────────────────── */
  --cream:  #ede7da;  /* Headlines, primärer Display-Text               */
  --body:   #b8b2a8;  /* Fließtext, Panel-Beschreibungen                */
  --muted:  #7d7889;  /* Sekundärer Text, Labels, Jahr-Angaben          */
  --faint:  #3e3b4a;  /* Placeholder, Dekoratives, Divider-Text         */

  /* ── BORDERS & LINIEN ───────────────────────── */
  --line:      rgba(255,255,255,.07);  /* Standard-Border               */
  --line-warm: rgba(232,169,60,.30);   /* Amber-Border für Hover/Focus  */
  --line-teal: rgba(61,168,170,.25);   /* Teal-Border (Genre-Tags)      */

  /* ── TYPOGRAFIE ─────────────────────────────── */
  --f-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --f-body:    'Lora', Georgia, serif;
  --f-mono:    'DM Mono', monospace;

  /* ── MOTION ─────────────────────────────────── */
  --t:        200ms cubic-bezier(.4,0,.2,1);      /* Standard           */
  --t-slow:   360ms cubic-bezier(.4,0,.2,1);      /* Panel, Hero-Zoom   */
  --t-spring: 480ms cubic-bezier(.34,1.56,.64,1); /* Spring-Effekte     */

  /* ── LAYOUT ─────────────────────────────────── */
  --panel-w:   480px;   /* Breite des Side Panels                       */
  --header-h:  52px;    /* Header-Höhe (auch für padding-top der Views) */
  --grid-gap:  2px;     /* Poster-Grid Abstand zwischen Karten          */
  --page-pad:  28px;    /* Seitlicher Seitenabstand überall             */

  /* ── BORDER-RADIEN ──────────────────────────── */
  --r-sm: 2px;   /* Poster-Karten, Tags                                 */
  --r-md: 4px;   /* Chips, Buttons, Panel-Close                         */
  --r-lg: 5px;   /* Inputs, Textareas                                   */
}

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

/* Phosphor Icons: vertikale Ausrichtung für Inline-Icons */
i.ph { vertical-align: middle; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--ink);
  overscroll-behavior: none;
}

button  { font-family: var(--f-body); border: none; cursor: pointer; background: none; }
input, textarea { font-family: var(--f-body); border: none; }
img { display: block; }
a   { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

/* ── BODY ─────────────────────────────────────────────────── */
body {
  background: var(--ink);
  color: var(--body);
  font-family: var(--f-body);
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: none;
  overflow-x: hidden;
}

/* ── FILM-GRAIN OVERLAY ───────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: .35;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='.04'/%3E%3C/svg%3E");
}

/* ── GLOBALE SCROLLBAR ────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }

/* ── APP-SHELL ────────────────────────────────────────────── */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* main-content erhält transform wenn Panel offen ist */
.main-content {
  flex: 1;
  transition: transform var(--t-slow), filter var(--t-slow);
  will-change: transform;
}

/* Wenn .app die Klasse panel-open bekommt: */
.panel-open .main-content {
  transform: translateX(calc(var(--panel-w) * -0.18));
  filter: brightness(.65);
}

/* ── UTILITY ──────────────────────────────────────────────── */
.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ── ANIMATIONEN ──────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}