/* FOUNTAIN+ CONTROLS OS V1.0
   IDLE = INVISIBLE. INTERACTION = TEMPORARILY VISIBLE. */

body[data-controls-os-version="1.0"] .tv-controls,
body[data-controls-os-version="1.0"] #tv-stage:fullscreen .tv-controls,
body[data-controls-os-version="1.0"] #tv-stage:-webkit-full-screen .tv-controls{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(8px)!important;
  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility 0s linear .16s!important;
}

/* Explicit state only. Legacy :hover and stage :focus-within rules do not own visibility. */
body[data-controls-os-version="1.0"] .tv-stage.controls-awake .tv-controls,
body[data-controls-os-version="1.0"] #tv-stage:fullscreen.controls-awake .tv-controls,
body[data-controls-os-version="1.0"] #tv-stage:-webkit-full-screen.controls-awake .tv-controls{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  transition-delay:0s!important;
}

/* Neutralize older hover/focus rules, including fullscreen's forced opacity:1. */
body[data-controls-os-version="1.0"] .tv-stage:hover:not(.controls-awake) .tv-controls,
body[data-controls-os-version="1.0"] .tv-stage:focus-within:not(.controls-awake) .tv-controls,
body[data-controls-os-version="1.0"] #tv-stage:fullscreen:not(.controls-awake) .tv-controls,
body[data-controls-os-version="1.0"] #tv-stage:-webkit-full-screen:not(.controls-awake) .tv-controls{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

body[data-controls-os-version="1.0"] .tv-controls button{
  -webkit-tap-highlight-color:transparent;
}

@media(max-width:760px){
  body[data-controls-os-version="1.0"] .tv-controls{
    will-change:opacity,transform;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-controls-os-version="1.0"] .tv-controls{
    transition:none!important;
  }
}