/* The opening reel follows Margins' 3s sweep, .6s lock, 1.5s expansion. */
#opening-reel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0d0d0c;
  overflow: hidden;
  pointer-events: none;
}
#opening-reel[hidden] {
  display: none;
}
.intro-track {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
.intro-card {
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  will-change: transform;
  width: 560px;
  aspect-ratio: 16/9;
}
.intro-card img,
.intro-expanded video,
.intro-expanded img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-expanded {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  transform: translate(-50%, -50%);
}
.intro-frame {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(#ffeec8, #ffeec8) left top/22px 1px no-repeat,
    linear-gradient(#ffeec8, #ffeec8) left top/1px 22px no-repeat,
    linear-gradient(#ffeec8, #ffeec8) right top/22px 1px no-repeat,
    linear-gradient(#ffeec8, #ffeec8) right top/1px 22px no-repeat,
    linear-gradient(#ffeec8, #ffeec8) left bottom/22px 1px no-repeat,
    linear-gradient(#ffeec8, #ffeec8) left bottom/1px 22px no-repeat,
    linear-gradient(#ffeec8, #ffeec8) right bottom/22px 1px no-repeat,
    linear-gradient(#ffeec8, #ffeec8) right bottom/1px 22px no-repeat;
}
html[data-intro="running"] {
  overflow: hidden;
}
html[data-intro="running"] body > header {
  opacity: 0;
}
html[data-intro="running"] .hero-content,
html[data-intro="running"] .hero-bottom,
html[data-intro="running"] .scene-picker {
  opacity: 0;
}
html[data-intro="finished"] .hero-content,
html[data-intro="finished"] .hero-bottom,
html[data-intro="finished"] .scene-picker {
  animation: intro-ui-in 0.8s both;
}
@keyframes intro-ui-in {
  from {
    opacity: 0;
    translate: 0 16px;
    filter: blur(5px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #opening-reel {
    display: none;
  }
  html[data-intro] .hero-content,
  html[data-intro] .hero-bottom,
  html[data-intro] .scene-picker {
    animation: none;
  }
}

html[data-intro="running"][data-intro-phase="expand"] body > header {
  opacity: 1;
  z-index: 201;
  transition: opacity 0.6s;
}