.intro-loader { display: none; }
.intro-line { display: block; }

:root:is([data-intro="loading"],[data-intro="revealing"]) {
  --intro-backdrop: #0b0c14;
  --boot-ease: cubic-bezier(.22,.7,.25,1);
}

:root:is([data-intro="loading"],[data-intro="revealing"]) .intro-loader {
  position: fixed;
  inset: 0;
  z-index: 13;
  display: block;
  overflow: clip;
  pointer-events: none;
}

.intro-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--intro-backdrop);
  background-image: radial-gradient(ellipse, #a78bfa26, #7c3aed12 38%, transparent 72%);
  background-position: center calc(50% - var(--intro-mark-lift,24px));
  background-repeat: no-repeat;
  background-size: 91vmin 82vmin;
}

.intro-drawing {
  position: absolute;
  left: 50%;
  top: calc(50svh - var(--intro-mark-lift,24px));
  width: var(--intro-mark-width,min(50.88svh,80%));
  translate: -50% -50%;
  overflow: visible;
  filter: drop-shadow(0 0 1px #b69af799);
}

:root[data-intro="loading"] { scrollbar-color: var(--intro-backdrop) var(--intro-backdrop); }
:root[data-intro="loading"] :is(.hero-header,.hero-ui,.scene-navigation) { visibility: hidden; }
:root[data-intro="loading"] .intro-loader::before { animation: light-arrive .92s var(--boot-ease) both; }
:root[data-intro="loading"] .intro-drawing { animation: drawing-arrive .36s ease-out both; }
:root:is([data-intro="loading"],[data-intro="revealing"]) .intro-tile {
  transform-box: fill-box;
  transform-origin: center;
  animation: tile-arrive .76s cubic-bezier(.4,.06,.22,1) var(--arrival) both;
}
:root:is([data-intro="loading"],[data-intro="revealing"]) .intro-reflection {
  animation: tile-reflection 1.46s ease-in-out .16s both;
}

:root[data-intro="revealing"] .intro-loader::before { animation: backdrop-dissolve .70s ease-in-out both; }
:root[data-intro="revealing"] .intro-drawing { animation: drawing-dissolve .98s ease both; }
:root[data-intro="revealing"] #webgl { animation: mark-light 1.42s cubic-bezier(.48,.06,.36,.96) both; }
:root[data-intro="revealing"] .world-set { animation: terrain-focus .94s var(--boot-ease) both; }
:root[data-intro="revealing"] .hero-header { animation: layer-arrive .60s var(--boot-ease) .44s both; }
:root[data-intro="revealing"] .intro-line { overflow: clip; overflow-clip-margin: .12em; }
:root[data-intro="revealing"] .intro-line > span {
  display: block;
  animation: title-arrive .62s var(--boot-ease) var(--line-delay,.50s) both;
}
.intro-line:nth-child(2) { --line-delay: .59s; }
.intro-line:nth-child(3) { --line-delay: .68s; }
:root[data-intro="revealing"] .world-copy { animation: copy-arrive .73s var(--boot-ease) .69s both; }
:root[data-intro="revealing"] .primary-action { animation: layer-arrive .54s var(--boot-ease) .76s both; }
:root[data-intro="revealing"] .video-teaser { animation: layer-arrive .54s var(--boot-ease) .84s both; }
:root[data-intro="revealing"] :is(.scene-navigation,.scroll-cue) { animation: layer-arrive .51s var(--boot-ease) .90s both; }

@keyframes drawing-arrive { from { opacity: 0; } }
@keyframes light-arrive { from { background-size: 36vmin 36vmin; } }
@keyframes tile-arrive {
  from {
    transform: translate(calc(var(--drift-x) * 1.18),calc(var(--drift-y) * 1.18)) rotate(var(--turn)) scale(.68);
    opacity: 0;
  }
  17% { opacity: .86; }
  to { transform: none; opacity: 1; }
}
@keyframes tile-reflection {
  from { transform: translateX(-148px); }
  to { transform: translateX(224px); }
}
@keyframes backdrop-dissolve { to { opacity: 0; } }
@keyframes drawing-dissolve { 14% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mark-light { from { filter: brightness(.40); } to { filter: brightness(1); } }
@keyframes terrain-focus { from { filter: blur(15px); } to { filter: blur(0); } }
@keyframes title-arrive {
  from { opacity: 0; translate: 0 .48em; filter: blur(8px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}
@keyframes copy-arrive {
  from { opacity: 0; translate: 0 .4em; filter: blur(5px); clip-path: inset(0 0 85%); }
  to { opacity: 1; translate: 0 0; filter: blur(0); clip-path: inset(-.15em); }
}
@keyframes layer-arrive {
  from { opacity: 0; translate: 0 12px; visibility: hidden; }
  to { opacity: 1; translate: 0 0; visibility: visible; }
}

@media (min-width: 701px) and (max-width: 950px) {
  .intro-drawing { width: var(--intro-mark-width,min(37.79svh,80%)); }
}

@media (prefers-reduced-motion: reduce) {
  :root:is([data-intro="loading"],[data-intro="revealing"]) .intro-loader { display: none; }
  :root[data-intro="loading"] :is(.hero-header,.hero-ui,.scene-navigation) { visibility: visible; }
  :root[data-intro="revealing"] :is(#webgl,.world-set,.hero-header,.intro-line > span,.world-copy,.primary-action,.video-teaser,.scene-navigation,.scroll-cue) {
    animation: none;
  }
}