/* One intensity value (0–1) scales every phosphor component; Effects persists it.
   Never filter the page/container: fixed controls and 3D covers keep their geometry. */
:root{
  --crt-strength:.8;
  --crt-fringe:calc(var(--crt-strength) * 1.25px);
  --crt-near:calc(var(--crt-strength) * 80%);
  --crt-far:calc(var(--crt-strength) * 42%);
  --crt-text-glow:0 0 3px color-mix(in srgb,currentColor var(--crt-near),transparent),0 0 10px color-mix(in srgb,currentColor var(--crt-far),transparent);
  --crt-display-halo:color-mix(in srgb,currentColor calc(var(--crt-strength) * 45%),transparent);
}
.crt-definitions{position:fixed;width:0;height:0;overflow:hidden;pointer-events:none}
html[data-crt="on"] :is(h1,h2,h3,h4,p,a,button,label,legend,input,textarea,select,output,small,summary,dt,dd,li,.eyebrow,.tile-title,.tile-meta,.window-bar){
  text-shadow:.4px 0 currentColor,var(--crt-text-glow);
}
html[data-crt="on"] :is(h1,h2,.brand,.brand span,.home-wordmark .x){
  -webkit-text-stroke:.2px color-mix(in srgb,currentColor 85%,white);
  text-shadow:var(--crt-text-glow),0 0 26px var(--crt-display-halo),0 0 54px var(--crt-display-halo),calc(-1 * var(--crt-fringe)) 0 rgba(255,80,135,.65),var(--crt-fringe) 0 rgba(75,220,255,.65);
}
html[data-crt="on"] :is(.home-wordmark,.home-wordmark .x){animation:crt-phosphor-breathe 3.8s ease-in-out infinite}
@keyframes crt-phosphor-breathe{
  0%,100%{text-shadow:var(--crt-text-glow),0 0 18px var(--crt-display-halo),0 0 36px var(--crt-display-halo),calc(-1 * var(--crt-fringe)) 0 rgba(255,80,135,.5),var(--crt-fringe) 0 rgba(75,220,255,.5)}
  50%{text-shadow:var(--crt-text-glow),0 0 32px var(--crt-display-halo),0 0 68px var(--crt-display-halo),calc(-1 * var(--crt-fringe)) 0 rgba(255,80,135,.7),var(--crt-fringe) 0 rgba(75,220,255,.7)}
}
/* Native form text and small captions retain a crisp edge, without RGB fringes. */
html[data-crt="on"] :is(input,textarea,select,.tile-meta,small){text-shadow:0 0 3px color-mix(in srgb,currentColor var(--crt-far),transparent)}
html[data-crt="on"] svg:not(.crt-definitions):not(.pixel-frame){filter:drop-shadow(0 0 3px color-mix(in srgb,currentColor var(--crt-near),transparent)) drop-shadow(0 0 7px color-mix(in srgb,currentColor var(--crt-far),transparent))}
html[data-crt="on"] svg.pixel-frame{filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),calc(var(--crt-strength) * .7)))}
/* Bloom only the brightest static-image details; preserve the unblurred source.
   Footage, weather canvases, background blur and hue-shifted stickers are untouched. */
html[data-crt="on"] :is(.tile img,.release-feature>img,.about-portrait img,.lnk-art img,.vault-card img){filter:url(#crt-phosphor)}
.tape-texture[data-screen-mode="crt"]{opacity:.88;animation:crt-luminance 2.6s ease-in-out infinite}
@keyframes crt-luminance{0%,100%{opacity:.64}50%{opacity:1}}
html[data-crt-motion="still"] .tape-texture[data-screen-mode="crt"],
body.motion-paused .tape-texture[data-screen-mode="crt"]{animation:none;opacity:.96}
html[data-crt-motion="still"] :is(.home-wordmark,.home-wordmark .x),body.motion-paused :is(.home-wordmark,.home-wordmark .x){animation:none}
.effects-panel .crt-intensity{display:grid;grid-template-columns:1fr auto;gap:10px;padding-block:12px}
.effects-panel .crt-intensity input{grid-column:1/-1;width:100%;height:24px;margin:0;accent-color:var(--accent)}
.crt-intensity output{color:var(--accent)}
.effects-panel .screen-note{font-size:.72rem;line-height:1.5;color:var(--muted);margin:8px 0 12px}
@media(max-width:600px){
  :root{--crt-fringe:calc(var(--crt-strength) * .8px);--crt-near:calc(var(--crt-strength) * 68%);--crt-far:calc(var(--crt-strength) * 32%)}
}
/* Moving phone artwork must stay on inexpensive compositor layers. Screen texture remains. */
@media(max-width:600px),(pointer:coarse){
  html[data-crt="on"] .wall.is-spiral .tile img{filter:none}
  html[data-crt="on"] .wall.is-spiral :is(.tile,.tile-title,.tile-meta,.new-badge,.album-tag){text-shadow:none}
}
@media(prefers-reduced-motion:reduce){.tape-texture[data-screen-mode="crt"]{animation:none;opacity:.96}}
@media(prefers-reduced-motion:reduce){html[data-crt="on"] :is(.home-wordmark,.home-wordmark .x){animation:none}}
@media(forced-colors:active){
  .tape-texture{display:none}
  html[data-crt="on"] :is(.home-wordmark,.home-wordmark .x){animation:none}
  html[data-crt="on"] *{text-shadow:none!important}
  html[data-crt="on"] :is(h1,h2,.brand,.brand span,.home-wordmark .x){-webkit-text-stroke:0}
  html[data-crt="on"] :is(h1,h2,h3,h4,p,a,button,label,legend,input,textarea,select,output,small,summary,dt,dd,li,.eyebrow,.tile-title,.tile-meta,.window-bar){text-shadow:none}
  html[data-crt="on"] svg,html[data-crt="on"] img{filter:none!important}
}