/* Entrance only. The website never acquires a scroll lock or inert state. */
#entrance-loader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 2147483647;
  overflow: hidden;
  pointer-events: none;
  background: #000;
  contain: layout paint;
  /* CSS-only escape if the script cannot initialize. */
  animation: tyrant-intro-safety 200ms 3s linear forwards;
}
#entrance-loader .intro-safe {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: grid;
  place-items: center;
}
#entrance-loader .intro-mark {
  position: relative;
  width: var(--intro-size, min(68vw, 85vh, 600px));
  aspect-ratio: 1744 / 1026;
  opacity: 0;
  transform-origin: center;
}
#entrance-loader .intro-mark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
#entrance-loader .intro-facet,
#entrance-loader .intro-whole { position: absolute; inset: 0; }
#entrance-loader .intro-facet-a { clip-path: polygon(0 0,100% 0,100% 39%,0 66%); }
#entrance-loader .intro-facet-b { clip-path: polygon(0 65.8%,100% 38.8%,100% 100%,0 100%); }
#entrance-loader .intro-whole { opacity: 0; }
#entrance-loader[data-state="playing"] { animation: tyrant-intro-exit 1080ms linear forwards; }
#entrance-loader[data-state="playing"] .intro-mark { animation: tyrant-intro-settle 660ms cubic-bezier(.2,.7,.25,1) both; }
#entrance-loader[data-state="playing"] .intro-facet-a { animation: tyrant-intro-upper 570ms cubic-bezier(.22,.7,.2,1) both; }
#entrance-loader[data-state="playing"] .intro-facet-b { animation: tyrant-intro-lower 610ms cubic-bezier(.22,.7,.2,1) both; }
#entrance-loader[data-state="playing"] .intro-whole { animation: tyrant-intro-whole 660ms steps(1,end) forwards; }
@keyframes tyrant-intro-upper {
  0% { opacity: 0; transform: translate(calc(-1 * var(--intro-x, 6px)),var(--intro-y, 8px)); }
  18% { opacity: .07; }
  65% { opacity: .8; }
  100% { opacity: 1; transform: translate(0,0); }
}
@keyframes tyrant-intro-lower {
  0%,8% { opacity: 0; transform: translate(var(--intro-x, 6px),var(--intro-y, 8px)); }
  28% { opacity: .12; }
  72% { opacity: .92; }
  100% { opacity: 1; transform: translate(0,0); }
}
@keyframes tyrant-intro-settle {
  0% { opacity: 1; transform: translateY(var(--intro-y, 8px)) scale(.96); }
  68% { transform: translateY(0) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tyrant-intro-whole { to { opacity: 1; } }
@keyframes tyrant-intro-exit {
  0%,70% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes tyrant-intro-safety { to { opacity: 0; visibility: hidden; } }
@supports not (aspect-ratio: 1744 / 1026) {
  #entrance-loader .intro-mark::before { content: ""; display: block; padding-top: 58.83%; }
}
@media (prefers-reduced-motion: reduce) {
  #entrance-loader[data-state="playing"] { animation-duration: 240ms; }
  #entrance-loader[data-state="playing"] .intro-mark { animation: none; opacity: 1; }
  #entrance-loader[data-state="playing"] .intro-facet { display: none; }
  #entrance-loader[data-state="playing"] .intro-whole { animation: none; opacity: 1; }
}
@supports not (clip-path: polygon(0 0,100% 0,100% 100%)) {
  #entrance-loader .intro-facet { display: none; }
  #entrance-loader[data-state="playing"] .intro-whole { animation: tyrant-intro-upper 660ms ease-out both; }
}