/* Athena's first frame occupies the viewport. Keep that space reserved from
   the start so the cut cannot move the page or the transport controls. */
.genesis:has([data-cinematic]) {padding:0 0 42px}
.genesis > .oath-sphere:has([data-cinematic]) {padding:0}
.oath-sphere #sphere-stage[data-cinematic] {
  width:100%;max-width:none;height:100vh;height:100svh;margin:0;overflow:hidden;
}
.genesis:has([data-cinematic]) > .hero-copy {margin:0;padding:8px 5.5%;background:var(--dl-panel)}
#sphere-stage[data-cinematic] .dl-twelve-controls {bottom:max(16px,env(safe-area-inset-bottom));z-index:8}
@media(max-width:700px) {
  .genesis:has([data-cinematic]) > .hero-copy {padding:8px 7%}
}