/* Arena Park loader + cinematic opening, isolated from the owner's site styles. */
html,
body {
  overflow-x: clip !important;
}

body.intro-playing {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

.loader {
  position: fixed;
  z-index: 5000;
  inset: 0;
  overflow: hidden;
  background: #005742;
  transition: opacity .32s cubic-bezier(.2,.75,.25,1), visibility .32s;
}

.loader.is-ready { background: transparent; }
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.loader__motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity .08s linear;
}

.loader.is-ready .loader__motion { opacity: 1; }
.loader.is-ready .loader__fallback { opacity: 0; visibility: hidden; }

.loader__skip {
  position: absolute;
  z-index: 2;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(0,40,30,.32);
  color: #fff;
  padding: 10px 16px;
  font: 500 9px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: .14em;
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

.loader.is-ready .loader__skip { opacity: .72; pointer-events: auto; }
.loader__skip:hover { opacity: 1; }

/* The owner's fixed navigation appears only after the cinematic block is passed. */
.nav {
  transition: transform .42s cubic-bezier(.2,.75,.25,1), opacity .3s, visibility .3s;
}

body.intro-playing .nav,
body.cinematic-active .nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0,-105%,0);
}

body.cinematic-passed .nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  body.intro-playing { position: static; overflow-x: hidden; }
}