/* The studio: shared by the TV and the phones.
   - #bg is "Studio Lights": the lighting rig out of focus behind the stage,
     gold, pink, cyan and violet bulbs breathing (bulbs added by studio.js).
   - The lighting tokens below are what every button, card and pill is lit with,
     so both screens catch the same light. */
:root {
  /* top-lit gloss laid over any fill */
  --gloss: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.08) 46%, rgba(0,0,0,0) 52%, rgba(0,0,0,.10) 100%);
  /* the glint that sweeps across a button on hover */
  --glint: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  /* rim light: bright lip on top, shade on the bottom edge */
  --rim: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.18);
  /* contact shadow + soft studio ambient, under the chunky 3D slab */
  --ambient: 0 2px 4px rgba(10,4,24,.45), 0 22px 44px -12px rgba(10,4,24,.75);

  --pink-top: #ff7cb8; --pink-low: #e2327f; --pink-slab: #9e1a52;
  --yellow-top: #ffe788; --yellow-low: #f5b71c; --yellow-slab: #b7800a;
  --cyan-top: #8cf0ff; --cyan-low: #17b9e0; --cyan-slab: #0a7894;
  --cream-top: #fffdf7; --cream-low: #f4e6c8;
}

#bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(142,92,255,.30), transparent 60%),
    radial-gradient(90% 60% at 50% 115%, rgba(255,79,154,.18), transparent 65%),
    radial-gradient(ellipse at 50% 120%, #4a2390 0%, var(--purple) 42%, var(--purple-deep) 100%);
}
/* vignette over the bulbs, so the edges fall into the dark like a real set */
#bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 95% at 50% 42%, transparent 52%, rgba(8,2,20,.78) 100%);
}
#bg .bulb {
  position: absolute;
  width: var(--size); height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hue) 46%, transparent) 0%, color-mix(in srgb, var(--hue) 20%, transparent) 45%, transparent 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 6%, transparent);
  animation: bulb-breathe var(--dur) ease-in-out var(--delay) infinite alternate;
}
@keyframes bulb-breathe {
  from { opacity: .35; transform: translate3d(0, 0, 0) scale(.92); }
  to { opacity: .95; transform: translate3d(0, -14px, 0) scale(1.04); }
}
@media (max-width: 640px) {
  #bg .bulb:nth-child(n + 11) { display: none; }
}

/* the glint: any element with .lit gets a sweep across it on hover */
.lit { position: relative; overflow: hidden; isolation: isolate; }
.lit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glint) no-repeat; background-size: 250% 100%; background-position: 160% 0;
  transition: background-position .75s ease;
}
.lit:hover::before { background-position: -60% 0; }

@media (prefers-reduced-motion: reduce) {
  #bg .bulb { animation: none; }
  .lit::before { transition: none; }
}