.intro-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
}
.intro-scene::backdrop { background: transparent; }
html:has(.intro-scene[open]) { overflow: hidden; }
.greeting {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  font: 900 clamp(1.55rem, 7vw, 5rem)/1 "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-align: center;
  transition: opacity .1s linear .16s, transform .26s var(--shutter-ease);
}
.greeting:lang(ar), .greeting:lang(sa) { letter-spacing: 0; line-height: 1.5; }
.playing .greeting { opacity: 0; transform: scaleY(0); }
.film {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .1s linear .3s, transform 1s cubic-bezier(.23,1,.32,1) .4s, filter .45s ease;
}
.playing .film { opacity: 1; transform: none; }
/* Shutter: the letters collapse into a line, the line crosses the screen and opens on the first frame. */
.curtain { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.curtain::before, .curtain::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.5%;
  background: #000;
}
.curtain::before { top: 0; }
.curtain::after { bottom: 0; }
.curtain i {
  position: absolute;
  z-index: 1;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
}
.playing .curtain::before { animation: shutter-up .7s var(--shutter-ease) .5s forwards; }
.playing .curtain::after { animation: shutter-down .7s var(--shutter-ease) .5s forwards; }
.playing .curtain i { animation: shutter-line .8s var(--shutter-ease) .1s forwards; }
@keyframes shutter-up { to { transform: translateY(-101%); } }
@keyframes shutter-down { to { transform: translateY(101%); } }
@keyframes shutter-line {
  45%, 62% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.monochrome .film { filter: grayscale(1) contrast(1.28); }
.frame-credit {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  display: grid;
  gap: 2px;
  max-width: calc(100% - 40px);
  padding: 8px 11px;
  border-radius: 4px;
  background: #000a;
  font: .72rem/1.4 ui-monospace, monospace;
  opacity: 0;
  transition: opacity .35s ease;
}
.frame-credit span { color: #d4d4d4; font-size: .62rem; letter-spacing: .14em; }
.playing .frame-credit { opacity: 1; }
.playing:not(.monochrome) .frame-credit { transition-delay: 1.05s; }
.monochrome .frame-credit { opacity: 0; }
.skip-intro {
  position: absolute;
  z-index: 2;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  padding: 10px 14px;
  border: 1px solid #777;
  border-radius: 6px;
  background: #151515;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.skip-intro:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.intro-scene {
  --shutter-ease: cubic-bezier(.77,0,.175,1);
  --iris: 0%;
  --progress: 0%;
  background: transparent;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.intro-scene::-webkit-scrollbar { display: none; }
.intro-track { min-height: 100%; }
.playing .intro-track { height: calc(100% + clamp(2200px, 430svh, 4200px)); }
.intro-stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}
.monochrome .intro-stage {
  mask-image: radial-gradient(circle at center, transparent var(--iris), #000 calc(var(--iris) + 1px));
}
.film-controls {
  position: absolute;
  z-index: 2;
  left: max(18px, env(safe-area-inset-left));
  right: calc(max(18px, env(safe-area-inset-right)) + 118px);
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  opacity: 0;
  visibility: hidden;
}
.playing .film-controls {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease 1.05s;
}
.monochrome .film-controls, .monochrome .view-code { visibility: hidden; }
.film-toggle, .skip-intro, .view-code, .code-close, .code-download {
  min-height: 44px;
  font: 600 .84rem/1.2 system-ui, sans-serif;
}
.film-toggle {
  flex: none;
  min-width: 74px;
  padding: 10px 12px;
  border: 1px solid #777;
  border-radius: 6px;
  background: #151515;
  color: #fff;
  cursor: pointer;
}
.film-seek {
  flex: 1;
  min-width: 0;
  height: 44px;
  margin: 0;
  accent-color: #fff;
  cursor: pointer;
}
.view-code {
  position: absolute;
  z-index: 2;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 56px);
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  background: var(--ink, #a3ff9f);
  color: #070d0a;
  cursor: pointer;
}
.view-code[hidden], .code-panel[hidden] { display: none; }
.code-panel {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #070d0a;
  color: var(--ink, #a3ff9f);
}
.code-panel header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding: max(16px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 14px max(18px, env(safe-area-inset-left));
  border-bottom: 1px solid #ffffff2e;
}
.code-panel h2 { margin: 0; font: 600 1rem/1.3 ui-monospace, monospace; letter-spacing: 0; }
.code-run { margin: 3px 0 0; font: .78rem/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }
.code-actions { display: flex; align-items: center; gap: 8px; }
.code-download, .code-close {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.code-panel a:hover { color: inherit; }
.code-panel pre {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 14px max(18px, env(safe-area-inset-left));
  overflow: auto;
  overscroll-behavior: contain;
  font: 11px/1.3 ui-monospace, monospace;
  white-space: pre;
}
.film-toggle:focus-visible, .film-seek:focus-visible, .view-code:focus-visible,
.code-close:focus-visible, .code-download:focus-visible, .code-panel pre:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Sin etiqueta de mundo sobre el vídeo (el control de avance sigue diciendo el estilo a los lectores de pantalla). */
.frame-credit { display: none !important; }