html.asami-intro-pending { overflow: hidden; }
html.asami-intro-pending::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: #0a0a0a;
  pointer-events: none;
  transition: opacity 450ms ease;
}
html.asami-intro-leaving::before { opacity: 0; }
html.asami-intro-waiting::before, html.asami-intro-playing::before { animation: none; }
.asami-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  opacity: 1;
  isolation: isolate;
  transition: opacity 450ms ease;
}
.asami-intro.asami-intro-leaving { opacity: 0; }
.asami-intro-start {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
  height: 100%;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  color: #e8e8ee;
  background: #0a0a0a;
  font: 500 16px/1.5 system-ui, sans-serif;
  letter-spacing: .2em;
  cursor: pointer;
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
.asami-intro-start img { display: block; width: min(66vw, 340px); height: auto; max-height: 35vh; object-fit: contain; mix-blend-mode: screen; }
.asami-intro-start-copy { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.asami-intro-start-label { display: block; }
.asami-intro-sound-notice {
  display: block;
  color: #a9a9b2;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
}
.asami-intro-start:focus-visible { outline: 2px solid #ff2da4; outline-offset: -14px; }
.asami-intro-video {
  display: block;
  position: absolute;
  inset: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #0a0a0a;
}
.asami-intro-playing[data-mode="video"] .asami-intro-video { visibility: visible; }
.asami-intro-static .asami-intro-video { visibility: hidden; }
.asami-intro-static-logo { display: none; width: min(72vw, 700px); height: auto; max-height: 45vh; object-fit: contain; }
.asami-intro-static.asami-intro-playing .asami-intro-static-logo { display: block; }
.asami-intro-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vh, 36px);
  padding: 24px;
  box-sizing: border-box;
  visibility: hidden;
  background: #0a0a0a;
  pointer-events: none;
}
.asami-intro-playing:is([data-mode="fallback"], [data-mode="static"]) .asami-intro-fallback { visibility: visible; }
.asami-intro-fallback-logo,
.asami-intro-fallback-icon {
  display: block;
  flex: 0 1 auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  transform-origin: 50% 50%;
  /* Paused negative delay seeks the image to the audio's currentTime. A stalled
     audio clock therefore holds this frame; no wall-clock animation can drift. */
  animation-duration: 3.2s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: calc(-1 * var(--asami-intro-time, 0s));
}
.asami-intro-fallback-logo {
  width: min(78vw, 700px);
  max-height: 45vh;
  animation-name: asami-intro-wordmark;
}
.asami-intro-fallback-icon {
  width: min(30vw, 240px);
  max-height: 25vh;
  animation-name: asami-intro-emblem;
}
.asami-intro-fallback-icon + .asami-intro-fallback-logo { max-height: 18vh; }
.asami-intro-fallback-text {
  display: none;
  color: #e8e8ee;
  font: 600 clamp(24px, 7vw, 44px)/1.2 system-ui, sans-serif;
  letter-spacing: .16em;
  text-align: center;
}
.asami-intro[data-logo="text"] .asami-intro-fallback-text { display: block; }
.asami-intro[data-logo="text"] :is(.asami-intro-fallback-logo, .asami-intro-fallback-icon) { display: none; }
.asami-intro[data-mode="static"] :is(.asami-intro-fallback-logo, .asami-intro-fallback-icon) {
  animation: none;
  opacity: 1;
  transform: none;
}
@keyframes asami-intro-emblem {
  0%, 6.25% { opacity: 0; transform: translateY(8px) scale(.91); }
  16.5625% { opacity: .72; transform: translateY(2px) scale(.97); }
  22.8125% { opacity: 1; transform: translateY(0) scale(1.035); }
  28.125% { opacity: 1; transform: scale(1); }
  35.3125% { opacity: 1; transform: scale(1.015); }
  40.625%, 84.375% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.99); }
}
@keyframes asami-intro-wordmark {
  0%, 25% { opacity: 0; transform: translateY(6px) scale(.97); }
  28.4375% { opacity: .2; transform: translateY(4px) scale(.985); }
  35.3125% { opacity: 1; transform: translateY(0) scale(1.025); }
  40.625%, 84.375% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.99); }
}
@media (prefers-reduced-motion: reduce) {
  html.asami-intro-pending::before, .asami-intro { transition: none; }
  .asami-intro-fallback-logo, .asami-intro-fallback-icon { animation: none; opacity: 1; transform: none; }
}