/* ==========================================================================
   THE CRT BROADCAST MONITOR
   An analogue television that flickers static and tunes into the work.
   Cabinet, bezel, knobs and screen effects are all CSS — no images.
   ========================================================================== */

.crt {
  position: relative;
  /* Sized so the TV, the headline AND the booking CTA all sit above the fold.
     The television is the hook; the button is the point. */
  width: min(500px, 66vw, 52vh);
  margin-inline: auto;
  z-index: 2;
  --screen-r: 18px;
  /* Lets the on-screen display respond to the TV's own width rather than the
     viewport's — the cabinet is capped by vh too, so they disagree. */
  container-type: inline-size;
}

/* ---- Phosphor bloom: the TV lights the black room around it ------------- */
.crt__bloom {
  position: absolute;
  inset: -22%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 46%,
    rgba(201, 178, 127, 0.16) 0%,
    rgba(201, 178, 127, 0.06) 32%,
    transparent 68%
  );
  filter: blur(28px);
  animation: bloom-breathe 5.5s var(--ease-inout) infinite;
}
@keyframes bloom-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.035); }
}

/* ---- Cabinet ------------------------------------------------------------ */
.crt__cabinet {
  position: relative;
  border-radius: 22px 22px 16px 16px;
  padding: 18px 18px 15px;
  background:
    linear-gradient(180deg, #1c1a18 0%, #121110 42%, #0a0a09 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.9),
    0 40px 90px -20px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(201, 178, 127, 0.09);
}

/* Bezel: the recessed frame the glass sits inside. */
.crt__bezel {
  position: relative;
  border-radius: var(--screen-r);
  padding: 10px;
  background: linear-gradient(160deg, #0d0c0b, #191715 60%, #0b0a09);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* ---- Screen ------------------------------------------------------------- */
.crt__screen {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--screen-r);
  overflow: hidden;
  background: #050505;
  isolation: isolate;
  /* The inset shadow is what sells the glass curving away at the edges. */
  box-shadow:
    inset 0 0 40px 12px rgba(0, 0, 0, 0.9),
    inset 0 0 100px 30px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

/* Static */
.crt__noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 140ms linear;
  z-index: 3;
}
/* Not full strength — authentic static is bright white, which blows out a
   page this dark. 0.78 still reads as static without wrecking the mood. */
.crt.is-static .crt__noise { opacity: 0.78; }

/* CSS-only static, used when canvas is unavailable. */
.crt__noise-fallback {
  position: absolute;
  inset: -50%;
  z-index: 3;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  animation: fallback-static 0.14s steps(4) infinite;
}
.crt.no-canvas.is-static .crt__noise-fallback { opacity: 0.85; }
@keyframes fallback-static {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-12%, 8%); }
  50%  { transform: translate(9%, -11%); }
  75%  { transform: translate(-7%, -6%); }
  100% { transform: translate(0, 0); }
}

/* Image frames — stacked, one visible at a time. */
.crt__frames {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.crt__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portrait-orientation photos lose ~50% of their height in this 4:3 screen.
     Anchoring above centre keeps faces in frame instead of cropping heads. */
  object-position: 50% 20%;
  opacity: 0;
  transform: scale(1);
  /* Slightly lifted and warmed so it reads as a phosphor screen, not a photo. */
  filter: contrast(1.12) saturate(0.82) brightness(1.04);
  transition: opacity 420ms var(--ease);
  will-change: opacity, transform;
}
.crt__frame.is-live {
  opacity: 1;
  /* Very slow push-in for the whole time the image is on screen. */
  animation: ken-burns 5.2s linear forwards;
}
@keyframes ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}

/* Chromatic fringing — a 1px RGB split, the analogue tell. */
.crt__frame::after { content: none; }
.crt__aberration {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: screen;
  background:
    linear-gradient(90deg, rgba(255, 0, 40, 0.07), transparent 12%),
    linear-gradient(270deg, rgba(0, 180, 255, 0.07), transparent 12%);
}

/* Tune-in flash: a bright line that snaps open when the channel changes. */
.crt__tune {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  z-index: 6;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  opacity: 0;
  transform: translateY(-50%) scaleY(1);
  pointer-events: none;
}
.crt.is-tuning .crt__tune { animation: tune-in 460ms var(--ease-inout); }
@keyframes tune-in {
  0%   { opacity: 0;   transform: translateY(-50%) scaleY(0.4)  scaleX(0.2); }
  18%  { opacity: 1;   transform: translateY(-50%) scaleY(1)    scaleX(1); }
  40%  { opacity: 0.9; transform: translateY(-50%) scaleY(46)   scaleX(1); }
  100% { opacity: 0;   transform: translateY(-50%) scaleY(120)  scaleX(1); }
}

/* Scanlines */
.crt__scanlines {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.32) 0px,
    rgba(0, 0, 0, 0.32) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.7;
}

/* The rolling band — a horizontal seam sliding down the screen forever. */
.crt__roll {
  position: absolute;
  left: 0; right: 0;
  height: 22%;
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.035) 45%,
    rgba(255, 255, 255, 0.06) 52%,
    transparent
  );
  animation: roll 7s linear infinite;
}
@keyframes roll {
  from { transform: translateY(-120%); }
  to   { transform: translateY(560%); }
}

/* Glass: curvature highlight + reflection. */
.crt__glass {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  border-radius: var(--screen-r);
  background:
    /* soft sheen across the top-left of the tube */
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.02) 22%,
      transparent 46%
    ),
    /* darkened corners = curved glass */
    radial-gradient(
      ellipse 88% 82% at 50% 50%,
      transparent 52%,
      rgba(0, 0, 0, 0.55) 100%
    );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}

/* Whole-screen flicker. Irregular on purpose — a steady pulse reads as CSS. */
.crt__screen { animation: flicker 5.7s steps(1) infinite; }
@keyframes flicker {
  0%, 100%      { opacity: 1; }
  2.1%          { opacity: 0.86; }
  2.4%          { opacity: 1; }
  27.3%         { opacity: 0.93; }
  27.6%         { opacity: 1; }
  61.2%         { opacity: 0.88; }
  61.5%         { opacity: 1; }
  61.9%         { opacity: 0.95; }
  62.2%         { opacity: 1; }
  84.7%         { opacity: 0.9; }
  85%           { opacity: 1; }
}

/* ---- On-screen display -------------------------------------------------- */
.crt__osd {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  padding: 14px 16px;
  /* Real photographs are far brighter than the placeholders were — without a
     scrim the gold readout disappears against a light frame. */
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 18%),
    linear-gradient(to top,    rgba(0, 0, 0, 0.55), transparent 18%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 1.1vw, 0.6875rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(201, 178, 127, 0.55);
}
.crt__osd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
}
.crt__rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bone);
}
.crt__rec i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal);
  animation: pulse 1.6s var(--ease-inout) infinite;
}
.crt__ch { opacity: 0.9; }
.crt__tc { font-variant-numeric: tabular-nums; opacity: 0.75; }
.crt__osd-hint { opacity: 0.45; }

/* Never let the readout wrap onto two lines and collide with itself. */
.crt__rec, .crt__ch, .crt__tc, .crt__osd-hint { white-space: nowrap; }

/* On a narrow tube the hint is the first thing to go. */
@container (max-width: 460px) {
  .crt__osd-hint { display: none; }
}

/* ---- Cabinet furniture -------------------------------------------------- */
.crt__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: 13px;
  padding-inline: 4px;
}

.crt__brand {
  font-family: var(--font-serif);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-dim);
  white-space: nowrap;
}

.crt__grille {
  flex: 1;
  height: 16px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.85) 0px,
    rgba(0, 0, 0, 0.85) 2px,
    rgba(255, 255, 255, 0.035) 2px,
    rgba(255, 255, 255, 0.035) 4px
  );
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);
}

.crt__knobs {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

/* The power knob is a real control — pause/resume the broadcast. */
.crt__knob {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1px solid rgba(201, 178, 127, 0.28);
  background:
    radial-gradient(circle at 32% 28%, #2c2825, #131110 62%, #0a0908);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.8);
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* the indicator notch */
.crt__knob::after {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  width: 1px; height: 7px;
  background: var(--gold);
  transform: translateX(-50%);
}
.crt__knob:hover { border-color: var(--gold); }
.crt__knob[aria-pressed='true'] { transform: rotate(-42deg); }

.crt__knob--dummy { pointer-events: none; opacity: 0.55; }
.crt__knob--dummy::after { transform: translateX(-50%) rotate(30deg); }

/* ---- Paused state ------------------------------------------------------- */
.crt.is-paused .crt__roll,
.crt.is-paused .crt__bloom { animation-play-state: paused; }
.crt.is-paused .crt__screen { animation: none; }
.crt.is-paused .crt__frame.is-live { animation-play-state: paused; }

/* ---- Reduced motion -----------------------------------------------------
   No static, no flicker, no roll, no ken-burns. It becomes a slow,
   perfectly calm crossfade slideshow — still beautiful, nothing moving fast.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .crt__noise,
  .crt__noise-fallback,
  .crt__roll,
  .crt__tune { display: none; }

  .crt__screen { animation: none; }
  .crt__bloom  { animation: none; }
  .crt__rec i  { animation: none; }

  .crt__frame { transition: opacity 900ms ease; }
  .crt__frame.is-live { animation: none; transform: none; }
}

/* ---- Mobile -------------------------------------------------------------
   Cabinet chrome shrinks so the photographs keep the width.
   ------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* 100% keeps it inside the wrapper's padding — 92vw alone overflows it. */
  .crt { width: min(92vw, 100%); --screen-r: 14px; }
  .crt__cabinet { padding: 14px 14px 12px; border-radius: 18px; }
  .crt__bezel   { padding: 8px; }
  .crt__panel   { margin-top: 12px; }
  .crt__brand   { font-size: 0.58rem; letter-spacing: 0.22em; }
  .crt__grille  { height: 16px; }
  .crt__knob    { width: 20px; height: 20px; }
  .crt__knob--dummy { display: none; }
  .crt__osd { padding: 10px 11px; letter-spacing: 0.1em; }
  .crt__osd-hint { display: none; }
}