/* ==========================================================================
   Television
   ==========================================================================
   The photograph carries its own lit screen. Every overlay here is registered
   to the measured screen opening so the effects sit inside the glass, not on
   top of the bezel.
   ========================================================================== */
.tv {
  position: absolute;
  inset-inline-start: 50%;
  /* Box top at --tv-crown scene px above the viewport bottom (196 on desktop,
     so the bottom sits at 196 - 701.9 = -505.9). Phones raise the crown. */
  inset-block-end: calc((var(--tv-crown) - 701.9) * var(--us));
  inline-size: calc(711 * var(--us));
  /* True asset ratio 912:900 — Figma's 711x711 square silently crops it. */
  block-size: calc(701.9 * var(--us));
  transform: translateX(-50%);
}

.tv__unit { position: relative; z-index: 1; inline-size: 100%; block-size: 100%; }
.tv__unit img { inline-size: 100%; block-size: 100%; }

/* Ambient spill from the screen onto the bezel and the room. */
.tv__glow {
  position: absolute;
  inset-inline-start: var(--screen-x);
  inset-block-start: var(--screen-y);
  inline-size: var(--screen-w);
  block-size: var(--screen-h);
  z-index: 0;
  border-radius: 6% / 8%;
  background: radial-gradient(60% 60% at 50% 45%, rgba(90,150,255,0.30), rgba(60,110,220,0.10) 55%, transparent 78%);
  filter: blur(calc(30 * var(--us)));
  transform: scale(1.35);
  transition: opacity var(--dur-glow) var(--ease);
  pointer-events: none;
}

/* An exactly-registered copy of the lit screen region from the photograph:
   background-size and position are the inverse of the screen rect within the
   912x900 asset. Collapsing this layer collapses a real picture rather than
   an empty box. */
.tv__lit {
  position: absolute;
  inset: 0;
  background-image: url('../assets/TV2.png');
  background-image: image-set(url('../assets/TV2.webp') type('image/webp'),
                              url('../assets/TV2.png')  type('image/png'));
  background-size: 136.94% 194.81%;
  background-position: 51.22% 26.48%;
  background-repeat: no-repeat;
}

/* The dead set. A real photograph of the same television switched off, rather
   than a dark rectangle painted over the lit one — the bezel picks up
   different light when the tube is not lit, and no gradient reproduces that.

   Sits above the lit unit and below the collapsing picture, so the power-off
   animation still folds the image away over the top of it. */
.tv__off {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;

  /* Registration fix. Both files are 912x900 canvases, but the set is not
     drawn at the same size inside them:

         TV2      900 x 889, centred at y 454.0
         TV2-off  910 x 898, centred at y 449.5

     so the off unit renders 1.1% larger and sits 4.5px high. Toggling the
     power made the whole television jump a few pixels and grow. Scaled back
     to the lit asset's drawn size and nudged down to put the two centres on
     top of each other, so the cross-fade is a change of state and not a
     change of size.

     Better fixed in the export than in CSS - if the off asset is ever
     re-rendered at matching bounds, delete this transform. */
  transform: translateY(0.5%) scale(0.989);
  transform-origin: 50% 50%;
}
.tv__off[data-visible] { opacity: 1; }

/* The screen. This element's bounding box is the origin rect that the VHS
   transition surface is measured against — see js/transition.js. */
.tv__screen {
  position: absolute;
  inset-inline-start: var(--screen-x);
  inset-block-start: var(--screen-y);
  inline-size: var(--screen-w);
  block-size: var(--screen-h);
  z-index: 2;
  border-radius: 5% / 7%;
  overflow: hidden;
  transform-origin: center center;
  background: #0b0c10;
  /* Feather the overlay into the moulded bezel so it does not read as a
     rectangle pasted onto the photograph. */
  -webkit-mask-image: radial-gradient(105% 108% at 50% 50%, #000 82%, transparent 100%);
          mask-image: radial-gradient(105% 108% at 50% 50%, #000 82%, transparent 100%);
  backface-visibility: hidden;
}

.tv__signal {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 120ms linear;
}
.tv__signal[data-active] { opacity: 1; }

.tv__bloom {
  position: absolute; inset: 0;
  background: #dfe6f5;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Phosphor afterglow — the thing that sells a CRT over a hidden div. */
.tv__afterglow {
  position: absolute;
  inset-inline-start: var(--screen-x);
  inset-block-start: var(--screen-y);
  inline-size: var(--screen-w);
  block-size: var(--screen-h);
  z-index: 3;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}
.tv__afterglow::after {
  content: '';
  inline-size: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,232,255,0.95), rgba(140,180,255,0.35) 40%, transparent 72%);
}

/* Screen hit target and the physical power button both drive the toggle. */
.tv__power {
  position: absolute;
  z-index: 4;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.tv__power--screen {
  inset-inline-start: var(--screen-x);
  inset-block-start: var(--screen-y);
  inline-size: var(--screen-w);
  block-size: var(--screen-h);
  border-radius: 5% / 7%;
}
.tv__power--button {
  inset-inline-start: 76.5%;
  inset-block-start: 75.4%;
  inline-size: 7%;
  block-size: 4.4%;
  border-radius: 999px;
}
.tv__power:focus-visible { outline: 1px solid var(--color-text); outline-offset: 3px; }