/* Default television texture. Artwork and controls stay in front. */
.static-field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;user-select:none;contain:strict}
.texture-static main,.texture-static .event-footer{position:relative;z-index:1}
.texture-static #dc-root>.acid-desktop,.texture-static #dc-root>.acid-mobile{background:transparent!important}
.texture-static #dc-root>div>svg:first-child{display:none}
.texture-static #dc-root>div>svg:nth-child(2){opacity:.045!important}

/* A slow acid-print wash only appears after a tab. The real lettering/artwork
   stays above this layer; the original TV grain remains visible through it. */
#dc-root>.acid-desktop::before,#dc-root>.acid-mobile::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background-image:url('/free-acid/assets/cheetah-spots.svg'),linear-gradient(145deg,#c6ff3d 10%,#18ad76 34%,#dc35bd 63%,#c6ff3d 90%);
  background-size:240px 240px,100% 100%;transition:opacity 1.2s ease;
}
#dc-root>.tripping::before{opacity:calc(.12 + var(--trip) * .23)}
@media(prefers-reduced-motion:reduce){#dc-root>div::before{transition:none}}

/* On phones/tablets, avoid a large SVG reference-filter surface. Small transform
   layers keep the ripple and post-tab wiggle visible independently of WebKit's
   SVG displacement renderer. No hover or pointer tracking is required. */
@media (max-width:1199px), (any-pointer:coarse){
  #dc-root .ripple,#dc-root .melting .melt-host{filter:none}
  @media (prefers-reduced-motion:no-preference){
    #dc-root .ripple{animation:acid-mobile-ripple 3.6s ease-in-out infinite alternate;transform-origin:50% 0}
  }
}
@keyframes acid-mobile-ripple{
  from{transform:translate3d(-2px,0,0) skewX(-1.2deg) scaleY(.98)}
  to{transform:translate3d(2px,2px,0) skewX(1.2deg) scaleY(1.02)}
}