/* ═══════════════════════════════════════════════════════════════
   TV DASHBOARD
   Cyberpunk trading-floor aesthetic. Designed for 1920×1080+.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* canvas */
  --bg:           #050507;
  --bg-2:         #0c0c12;
  --surface:      rgba(255, 255, 255, 0.07);
  --surface-2:    rgba(255, 255, 255, 0.11);
  --hairline:     rgba(255, 255, 255, 0.18);
  --hairline-2:   rgba(255, 255, 255, 0.30);
  --hairline-3:   rgba(255, 255, 255, 0.42);

  /* type */
  --text:         #f5f5f7;
  --text-mid:     rgba(245, 245, 247, 0.62);
  --text-dim:     rgba(245, 245, 247, 0.38);
  --text-faint:   rgba(245, 245, 247, 0.22);

  /* signal */
  --up:           #4dff8a;
  --up-glow:      rgba(77, 255, 138, 0.35);
  --down:         #ff3b5c;
  --down-glow:    rgba(255, 59, 92, 0.35);

  /* fonts */
  --f-display:    'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-sans:       'Bricolage Grotesque', system-ui, sans-serif;
  --f-mono:       'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  --f-serif:      'Instrument Serif', 'Times New Roman', serif;

  /* per-brand — overridden on [data-brand] */
  --accent:       #00f0ff;
  --accent-2:     #b6fbff;
  --accent-soft:  rgba(0, 240, 255, 0.16);
  --accent-glow:  rgba(0, 240, 255, 0.55);
  --accent-deep:  rgba(0, 240, 255, 0.04);
}

/* per-brand accent palettes ────────────────────────────────────── */
html[data-brand="total"] {
  --accent: #ffffff;
  --accent-2: #e9e9ec;
  --accent-soft: rgba(255, 255, 255, 0.14);
  --accent-glow: rgba(255, 255, 255, 0.45);
  --accent-deep: rgba(255, 255, 255, 0.04);
}
/* marketingdigital · vibrant orange-red from CTA buttons (#FF5B22) */
html[data-brand="marketingdigital"] {
  --accent: #ff5b22;
  --accent-2: #ffb89a;
  --accent-soft: rgba(255, 91, 34, 0.18);
  --accent-glow: rgba(255, 91, 34, 0.55);
  --accent-deep: rgba(255, 91, 34, 0.05);
}
/* linkefy · teal — saturated version of the brand's #6DA4AA so it reads
   well on a TV across the room. Same hue, just bumped saturation + lightness. */
html[data-brand="linkefy"] {
  --accent: #2dd4bf;
  --accent-2: #99f6e4;
  --accent-soft: rgba(45, 212, 191, 0.22);
  --accent-glow: rgba(45, 212, 191, 0.65);
  --accent-deep: rgba(45, 212, 191, 0.07);
}
/* seorank · royal blue from CTA (#0053AA) */
html[data-brand="seorank"] {
  --accent: #1e7afc;
  --accent-2: #a8d0ff;
  --accent-soft: rgba(30, 122, 252, 0.20);
  --accent-glow: rgba(30, 122, 252, 0.60);
  --accent-deep: rgba(30, 122, 252, 0.05);
}
/* gratishjemmeside · electric indigo/violet from --accent-start (#6366F1 → #8B5CF6) */
html[data-brand="gratishjemmeside"] {
  --accent: #7c7ff9;
  --accent-2: #c4c5ff;
  --accent-soft: rgba(124, 127, 249, 0.20);
  --accent-glow: rgba(124, 127, 249, 0.60);
  --accent-deep: rgba(124, 127, 249, 0.05);
}

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

html {
  font-size: clamp(13px, 0.95vw, 22px);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--f-sans);
  height: 100vh;
  overflow: hidden;
  cursor: none;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%,  rgba(255,255,255,0.025), transparent 60%),
    radial-gradient(ellipse at 0%  100%, var(--accent-deep), transparent 65%),
    radial-gradient(ellipse at 100% 100%, var(--accent-deep), transparent 65%),
    var(--bg);
  transition: background 1.4s ease;
}

button, kbd { font: inherit; }

/* ═════════════════════ ATMOSPHERIC LAYERS ═════════════════════ */
.bg-grain,
.bg-scan,
.bg-orbs,
.bg-vignette { position: fixed; inset: 0; pointer-events: none; }

.bg-grain {
  z-index: 3;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 240px 240px;
}

.bg-scan {
  z-index: 4;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.018) 0,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
}

.bg-vignette {
  z-index: 5;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}

.bg-orbs { z-index: 1; overflow: hidden; }
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  mix-blend-mode: screen;
  transition: background 1.4s ease;
}
.bg-orb--a {
  width: 72vmax; height: 72vmax;
  left: -22vmax; top: -28vmax;
  background: radial-gradient(circle, var(--accent-soft), transparent 65%);
  animation: drift-a 38s ease-in-out infinite alternate;
}
.bg-orb--b {
  width: 60vmax; height: 60vmax;
  right: -18vmax; bottom: -22vmax;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  animation: drift-b 46s ease-in-out infinite alternate;
}
.bg-orb--c {
  width: 38vmax; height: 38vmax;
  left: 32vw; top: 38vh;
  background: radial-gradient(circle, var(--accent-deep), transparent 65%);
  animation: drift-c 54s ease-in-out infinite alternate;
}
@keyframes drift-a {
  to { transform: translate(8vmax, 6vmax) scale(1.1); }
}
@keyframes drift-b {
  to { transform: translate(-6vmax, -4vmax) scale(0.92); }
}
@keyframes drift-c {
  to { transform: translate(-12vmax, 8vmax) scale(1.2); opacity: 0.7; }
}

/* ═════════════════════ APP SHELL ═════════════════════ */
.app {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1.4rem 1.6rem 1.2rem;
  gap: 1.1rem;
}

/* ═════════════════════ HEADER ═════════════════════ */
.hd {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  align-items: center;
  gap: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.hd::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.45;
  transition: background 1.2s ease;
}

/* — left: brand block — */
.hd__left { display: flex; align-items: center; gap: 1.2rem; }
.hd__dot {
  width: 0.9rem; height: 0.9rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 0 4px var(--accent-soft),
    0 0 24px var(--accent-glow);
  animation: dot-pulse 2.6s ease-in-out infinite;
  flex-shrink: 0;
  transition: background 1s, box-shadow 1s;
}
@keyframes dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0.82; }
}
.hd__brand-block { display: flex; flex-direction: column; line-height: 1; }
.hd__brand-eyebrow {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.45rem;
}
.hd__brand {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2rem, 3.4vw, 3.8rem);
  letter-spacing: -0.01em;
  line-height: 0.92;
  color: var(--text);
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--text) 30%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 1s;
}

/* — center: panel meta + progress — */
.hd__center { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; }
.hd__panel-meta {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--text-mid);
}
.hd__panel-index {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
  text-shadow: 0 0 12px var(--accent-glow);
  transition: color 0.8s, text-shadow 0.8s;
}
.hd__panel-divider { color: var(--text-faint); }
.hd__panel-total   { color: var(--text-mid); }
.hd__panel-sep {
  width: 1px; height: 0.9rem; background: var(--hairline-2);
  margin: 0 0.6rem;
}
.hd__panel-label {
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.32em;
}

.hd__progress {
  width: min(46vw, 720px);
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.hd__progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-2));
  box-shadow: 0 0 18px var(--accent-glow);
  transition: width 0.16s linear, background 0.8s;
}
.hd__progress-ticks {
  position: absolute; inset: 0;
  display: flex; justify-content: space-between;
  pointer-events: none;
}
.hd__progress-ticks span {
  width: 1px; height: 100%; background: rgba(255, 255, 255, 0.16);
}

/* — right: clock — */
.hd__right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; line-height: 1; }
.hd__date {
  font-family: var(--f-serif); font-style: italic;
  font-size: 1rem; color: var(--text-mid);
  letter-spacing: 0.01em;
}
.hd__time {
  font-family: var(--f-mono);
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  margin-top: 0.1rem;
}
.hd__status {
  margin-top: 0.45rem;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--up);
  text-transform: uppercase;
}
.hd__status-pulse {
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 10px var(--up-glow);
  animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ═════════════════════ STAGE / KPI GRID ═════════════════════ */
.stage {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 0;
}

.panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows:    repeat(3, 1fr);
  gap: 1.1rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.panel.is-active {
  opacity: 1;
  transform: none;
}

/* tile layout — 8 tiles, asymmetric */
.kpi {
  position: relative;
  background:
    linear-gradient(180deg, var(--surface-2), var(--surface)),
    var(--bg-2);
  border: 1px solid var(--hairline-2);
  border-radius: 4px;
  padding: 1.25rem 1.45rem 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.6s, background 0.6s;
}
.kpi::before { z-index: 1; }
.kpi::after  { z-index: 1; }
/* accent micro-rule on top of every tile */
.kpi > .kpi__head::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  opacity: 0.85;
}
/* corner ticks */
.kpi::before, .kpi::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--hairline-3);
}
.kpi::before { top: -1px; left: -1px;   border-right: none; border-bottom: none; }
.kpi::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* tile placements */
.kpi--hero {
  grid-column: span 6;
  grid-row: span 2;
  background:
    radial-gradient(ellipse at 0% 0%, var(--accent-soft), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface)),
    var(--bg-2);
  border-color: var(--hairline-2);
}
.kpi--hero::before, .kpi--hero::after { border-color: var(--accent); width: 18px; height: 18px; }
.kpi:nth-child(2) { grid-column: span 3; grid-row: span 1; }
.kpi:nth-child(3) { grid-column: span 3; grid-row: span 1; }
.kpi:nth-child(4) { grid-column: span 3; grid-row: span 1; }
.kpi:nth-child(5) { grid-column: span 3; grid-row: span 1; }
.kpi:nth-child(6) { grid-column: span 3; grid-row: span 1; }
.kpi:nth-child(7) { grid-column: span 3; grid-row: span 1; }
.kpi--wide        { grid-column: span 6; grid-row: span 1; }

/* tile internals */
.kpi__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}
.kpi__index {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--text-faint);
  letter-spacing: 0.18em;
  font-weight: 500;
}
.kpi__label {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.kpi__rule {
  height: 1px;
  background: linear-gradient(90deg, var(--hairline-2), transparent);
  margin-top: 0.55rem;
}

.kpi__value-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.4rem 0 0.2rem;
  flex: 1;
  min-height: 0;
}
.kpi__value {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.012em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 5.5vh, 4.4rem);
  white-space: nowrap;
  display: inline-block;
}
.kpi__suffix {
  font-family: var(--f-mono);
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.kpi--hero .kpi__value {
  font-size: clamp(5rem, 14vh, 11rem);
  color: var(--accent);
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px var(--accent-glow));
  animation: hero-glow 4.6s ease-in-out infinite;
}
@keyframes hero-glow {
  0%, 100% { filter: drop-shadow(0 0 18px var(--accent-glow)); }
  50%      { filter: drop-shadow(0 0 38px var(--accent-glow)); }
}
.kpi--hero .kpi__suffix {
  font-size: 1.25rem;
  color: var(--accent-2);
  opacity: 0.75;
}
.kpi--hero .kpi__label { font-size: 0.95rem; }

.kpi__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.kpi__delta {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem 0.18rem;
  border-radius: 2px;
}
.kpi__delta--up     { color: var(--up);   background: rgba(77, 255, 138, 0.08); }
.kpi__delta--down   { color: var(--down); background: rgba(255, 59, 92, 0.08); }
.kpi__delta--flat   { color: var(--text-dim); }
.kpi__delta--hidden { visibility: hidden; }

/* mock-only KPI: tile is alive (positions held) but visually quieted so
   it's clearly "not real data yet" instead of fake numbers. */
.kpi--mock {
  opacity: 0.55;
}
.kpi--mock .kpi__value {
  background: none;
  -webkit-text-fill-color: var(--text-faint);
  color: var(--text-faint);
  filter: none;
  animation: none;
}
.kpi--mock .kpi__head::before { background: var(--text-faint); box-shadow: none; }
.kpi--mock .kpi__note {
  color: var(--text-faint);
  font-style: italic;
  letter-spacing: 0.16em;
}
.kpi__delta-arrow { font-size: 0.7rem; }
.kpi__note { color: var(--text-faint); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; }

/* bars on hero — micro indicators across bottom */
.kpi--hero .kpi__foot { padding-top: 0.6rem; border-top: 1px dashed var(--hairline-2); }
.kpi__sparkbar {
  display: flex; gap: 3px; height: 22px; align-items: flex-end; flex: 1; margin: 0 1rem;
  opacity: 0.85;
}
.kpi__sparkbar span {
  flex: 1; background: var(--accent); opacity: 0.45;
  border-radius: 1px;
  min-height: 2px;
  transition: height 0.4s ease;
}
.kpi__sparkbar span:last-child {
  opacity: 1;
  box-shadow: 0 0 10px var(--accent-glow);
}

/* number flash animation */
.kpi__value.is-flash { animation: num-flash 0.7s ease-out; }
@keyframes num-flash {
  0%   { color: var(--accent); text-shadow: 0 0 22px var(--accent-glow); }
  100% { /* settles */ }
}
.kpi--hero .kpi__value.is-flash { animation: hero-flash 0.7s ease-out; }
@keyframes hero-flash {
  0%   { filter: drop-shadow(0 0 60px var(--accent)) brightness(1.4); transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* tile stagger on panel enter */
.panel.is-active .kpi { animation: tile-in 0.7s cubic-bezier(.2,.7,.2,1) backwards; }
.panel.is-active .kpi:nth-child(1) { animation-delay: 0.04s; }
.panel.is-active .kpi:nth-child(2) { animation-delay: 0.10s; }
.panel.is-active .kpi:nth-child(3) { animation-delay: 0.14s; }
.panel.is-active .kpi:nth-child(4) { animation-delay: 0.18s; }
.panel.is-active .kpi:nth-child(5) { animation-delay: 0.22s; }
.panel.is-active .kpi:nth-child(6) { animation-delay: 0.26s; }
.panel.is-active .kpi:nth-child(7) { animation-delay: 0.30s; }
.panel.is-active .kpi:nth-child(8) { animation-delay: 0.34s; }
@keyframes tile-in {
  from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

/* ═════════════════════ FOOTER ═════════════════════ */
.ft {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  position: relative;
}
.ft::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.35;
  transition: background 1.2s;
}
.ft__label {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: var(--text);
  font-weight: 700;
}
.ft__label-dot {
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: dot-pulse 1.8s ease-in-out infinite;
}
.ft__ticker {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ft__ticker-track {
  display: inline-flex;
  gap: 3rem;
  white-space: nowrap;
  animation: ticker 70s linear infinite;
  will-change: transform;
}
@keyframes ticker { to { transform: translateX(-50%); } }
.ft__event {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--f-mono);
  font-size: 0.82rem;
  color: var(--text-mid);
}
.ft__event-time { color: var(--text-faint); letter-spacing: 0.05em; }
.ft__event-brand {
  color: var(--text);
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--hairline-2);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ft__event-brand[data-brand="marketingdigital"] { color: #ff5b22; border-color: rgba(255, 91, 34, 0.45); }
.ft__event-brand[data-brand="linkefy"]          { color: #2dd4bf; border-color: rgba(45, 212, 191, 0.55); }
.ft__event-brand[data-brand="seorank"]          { color: #1e7afc; border-color: rgba(30, 122, 252, 0.50); }
.ft__event-brand[data-brand="gratishjemmeside"] { color: #7c7ff9; border-color: rgba(124, 127, 249, 0.50); }
.ft__event-kind {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text);
}
.ft__event-kind--new  { color: var(--up); }
.ft__event-kind--lost { color: var(--down); }
.ft__event-name { color: var(--text-mid); font-style: italic; font-family: var(--f-serif); font-size: 0.95rem; }
.ft__event-sep { color: var(--text-faint); margin: 0 0.4rem; }

.ft__keys {
  display: inline-flex; gap: 0.55rem;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: var(--text-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ft__keys kbd {
  display: inline-block;
  border: 1px solid var(--hairline-2);
  padding: 0.18rem 0.42rem 0.14rem;
  border-radius: 3px;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.025);
  font-weight: 700;
}
.ft__keys span { margin-right: 0.6rem; }

/* ═════════════════════ CELEBRATION OVERLAY ═════════════════════ */
.cel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(6px);
  animation: cel-in 0.5s ease both;
}
.cel[hidden] { display: none; }
@keyframes cel-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cel__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 30%, var(--accent-soft), transparent 50%),
    radial-gradient(ellipse at 80% 70%, var(--accent-soft), transparent 50%);
  animation: cel-pulse 2.2s ease-in-out infinite;
}
@keyframes cel-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.cel__rings {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
}
.cel__rings span {
  position: absolute;
  left: 50%; top: 50%;
  width: 200px; height: 200px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: ring-out 3.2s ease-out infinite;
}
.cel__rings span:nth-child(2) { animation-delay: 1.05s; }
.cel__rings span:nth-child(3) { animation-delay: 2.10s; }
@keyframes ring-out {
  0%   { width: 200px;  height: 200px;  opacity: 0.9; border-width: 2px; }
  100% { width: 2400px; height: 2400px; opacity: 0;   border-width: 1px; }
}

.cel__noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
}

.cel__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  max-width: 92vw;
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
}

.cel__meta {
  font-family: var(--f-mono);
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  color: var(--text-mid);
}
.cel__meta-bracket { color: var(--accent); margin: 0 0.5rem; }

.cel__eyebrow {
  font-family: var(--f-mono);
  font-size: 1rem;
  letter-spacing: 0.45em;
  color: var(--accent);
  text-transform: uppercase;
  margin-top: 0.3rem;
}

.cel__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(4rem, 11vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0.4rem 0 0.2rem;
  position: relative;
}
.cel__title-text {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 32px var(--accent-glow));
  position: relative;
  animation: title-bob 2.4s ease-in-out infinite;
  display: inline-block;
}
@keyframes title-bob {
  0%, 100% { transform: translateY(0)    scale(1); }
  50%      { transform: translateY(-6px) scale(1.02); }
}
/* chromatic aberration ghosts */
.cel__title::before,
.cel__title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: var(--f-display);
  font-weight: 900;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
}
.cel__title::before {
  color: #ff2bd6;
  transform: translate(-6px, 2px);
  animation: glitch-a 2.4s ease-in-out infinite;
}
.cel__title::after {
  color: #00f0ff;
  transform: translate(6px, -2px);
  animation: glitch-b 2.4s ease-in-out infinite;
}
@keyframes glitch-a {
  0%, 100% { transform: translate(-6px, 2px); }
  20%      { transform: translate(-9px, -3px); }
  50%      { transform: translate(-4px, 4px); }
}
@keyframes glitch-b {
  0%, 100% { transform: translate(6px, -2px); }
  30%      { transform: translate(9px, 3px); }
  60%      { transform: translate(4px, -4px); }
}

.cel__subtitle {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  color: var(--text);
  margin-bottom: 1.6rem;
  opacity: 0.92;
}

.cel__video-wrap {
  position: relative;
  width: clamp(420px, 42vw, 720px);
  aspect-ratio: 16 / 9;
}
.cel__video-frame {
  position: absolute; inset: 0;
  border: 1px solid var(--accent);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 0 60px var(--accent-glow),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  background: #000;
  overflow: hidden;
}
.cel__video-frame iframe { width: 100%; height: 100%; display: block; }
.cel__video-corners span {
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--accent);
}
.cel__video-corners span:nth-child(1) { top: -6px;    left: -6px;    border-right: none; border-bottom: none; }
.cel__video-corners span:nth-child(2) { top: -6px;    right: -6px;   border-left: none;  border-bottom: none; }
.cel__video-corners span:nth-child(3) { bottom: -6px; left: -6px;    border-right: none; border-top: none; }
.cel__video-corners span:nth-child(4) { bottom: -6px; right: -6px;   border-left: none;  border-top: none; }

/* ─────────────── SAD MODE ─────────────── */
.cel.is-sad {
  background: rgba(2, 2, 6, 0.92);
  backdrop-filter: blur(10px) saturate(0.5);
}
.cel.is-sad .cel__veil {
  background:
    radial-gradient(ellipse at center, rgba(120, 150, 200, 0.06) 0%, transparent 55%);
  animation: sad-pulse 6s ease-in-out infinite;
}
@keyframes sad-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.85; }
}
.cel.is-sad .cel__rings span { border-color: rgba(120, 150, 200, 0.25); animation-duration: 7s; }
.cel.is-sad .cel__eyebrow { color: rgba(180, 200, 230, 0.7); }
.cel.is-sad .cel__title-text {
  background: linear-gradient(180deg, rgba(200, 215, 240, 0.85), rgba(120, 145, 185, 0.85));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(80, 100, 140, 0.5));
  animation: sad-bob 5s ease-in-out infinite;
}
@keyframes sad-bob {
  0%, 100% { transform: translateY(0); opacity: 0.95; }
  50%      { transform: translateY(2px); opacity: 0.78; }
}
.cel.is-sad .cel__title::before { color: rgba(120, 150, 200, 0.4); animation-duration: 6s; }
.cel.is-sad .cel__title::after  { color: rgba(180, 200, 230, 0.4); animation-duration: 6s; }
.cel.is-sad .cel__subtitle { color: rgba(180, 200, 230, 0.7); }
.cel.is-sad .cel__video-frame {
  border-color: rgba(120, 150, 200, 0.4);
  box-shadow: 0 0 40px rgba(80, 100, 140, 0.3);
  filter: grayscale(0.7) brightness(0.85);
}
.cel.is-sad .cel__video-corners span { border-color: rgba(120, 150, 200, 0.55); }
.cel.is-sad .cel__meta-bracket { color: rgba(180, 200, 230, 0.6); }

/* ═════════════════════ AUDIO UNLOCK SPLASH ═════════════════════ */
.unlock {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(10,10,18,0.96), rgba(0,0,0,0.99));
  backdrop-filter: blur(2px);
}
.unlock[hidden] { display: none; }
.unlock__inner {
  text-align: center;
  border: 1px solid var(--hairline-2);
  padding: 3rem 4rem;
  max-width: 90vw;
  background: rgba(255, 255, 255, 0.015);
  position: relative;
}
.unlock__inner::before, .unlock__inner::after {
  content: ""; position: absolute; width: 20px; height: 20px;
  border: 2px solid var(--accent);
}
.unlock__inner::before { top: -2px; left: -2px;   border-right: none; border-bottom: none; }
.unlock__inner::after  { bottom: -2px; right: -2px; border-left: none;  border-top: none; }
.unlock__eyebrow {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.unlock__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.6rem);
  text-transform: uppercase;
  line-height: 1;
  background: linear-gradient(180deg, var(--text), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.unlock__sub {
  font-family: var(--f-sans);
  font-size: 1.1rem;
  color: var(--text-mid);
  margin: 1.2rem auto 1.6rem;
  max-width: 36rem;
  line-height: 1.5;
}
.unlock__sub kbd {
  border: 1px solid var(--hairline-2);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.unlock__hint {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* ═════════════════════ PAUSED INDICATOR ═════════════════════ */
.app.is-paused .hd__progress-fill { opacity: 0.4; }
.app.is-paused .hd__status::after {
  content: " · PAUSE";
  color: var(--text-mid);
}

/* ═════════════════════ SCREENSHOT MODE (?freeze=1) ═════════════════════ */
html[data-freeze="1"] *,
html[data-freeze="1"] *::before,
html[data-freeze="1"] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-freeze="1"] .panel { opacity: 0; }
html[data-freeze="1"] .panel.is-active { opacity: 1; }
html[data-freeze="1"] .kpi { opacity: 1 !important; transform: none !important; filter: none !important; }