/*
 * Design tokens shared by the TV and mobile frames.
 * Colors, type, and focus only: each frame owns its own layout.
 */

:root {
  --accent: #3d8bff;
  --accent-strong: #6aa6ff;
  --accent-soft: rgba(61, 139, 255, 0.16);
  --accent-contrast: #ffffff;

  --bg: #090c12;
  --bg-raised: #0f131c;
  --surface-1: #141a25;
  --surface-2: #1b2231;
  --surface-3: #252e41;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #f3f5f9;
  --text-2: #b4bccb;
  --text-3: #7b8597;

  --live: #ff4d5e;
  --success: #2bd47d;
  --warning: #ffb547;

  /* The focused element on TV: a light fill with dark ink, or a ring on
     artwork, and a slight scale. */
  --focus-fill: var(--text);
  --focus-ink: #0b0e14;
  --focus-ink-2: #3a4252;
  --focus-ring: 5px;
  --focus-scale: 1.06;
  --focus-scale-row: 1.02;

  --font:
    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
}

[data-theme='coral'] {
  --accent: #ff6b4a;
  --accent-strong: #ff8f75;
  --accent-soft: rgba(255, 107, 74, 0.16);
}

[data-theme='jade'] {
  --accent: #14c39a;
  --accent-strong: #4fd9b6;
  --accent-soft: rgba(20, 195, 154, 0.16);
  --accent-contrast: #04140f;
}

[data-theme='violet'] {
  --accent: #8b5cff;
  --accent-strong: #a989ff;
  --accent-soft: rgba(139, 92, 255, 0.18);
}

/* Generated artwork: posters, backdrops, and channel logos. */

.art {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    150deg,
    hsl(var(--h1) 62% 34%),
    hsl(var(--h2) 58% 14%)
  );
  color: #fff;
}

.art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.art__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.72) 100%
  );
}

.art__text {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.art__kicker {
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
}

.art__title {
  font-size: 1em;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.logo {
  display: grid;
  place-items: center;
  background: linear-gradient(
    145deg,
    hsl(var(--h1) 70% 46%),
    hsl(var(--h2) 66% 26%)
  );
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  position: relative;
  overflow: hidden;
}

.logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 28% 22%,
    rgba(255, 255, 255, 0.28),
    transparent 55%
  );
}

.logo span {
  position: relative;
  z-index: 1;
}

/* Simulated video: a generated scene that drifts slowly, never real media. */

.media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(
    150deg,
    hsl(var(--h1) 58% 30%),
    hsl(var(--h2) 54% 9%)
  );
}

.media__scene {
  position: absolute;
  inset: -8%;
  animation: media-drift 16s ease-in-out infinite alternate;
}

.media__scene svg {
  width: 100%;
  height: 100%;
}

.is-paused .media__scene {
  animation-play-state: paused;
}

.media__bug {
  position: absolute;
  top: 5%;
  right: 4%;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: #fff;
  opacity: 0.55;
}

@keyframes media-drift {
  from {
    transform: scale(1.02) translate3d(-2%, -1%, 0);
  }
  to {
    transform: scale(1.1) translate3d(2%, 1.5%, 0);
  }
}