/* Film, discreet text control and a playback line. */
html[data-intro="loading"], html[data-intro="playing"], html[data-intro="leaving"] { overflow: hidden; }
html[data-intro="loading"] body, html[data-intro="playing"] body { background: #05050b; }
html[data-intro="loading"] #app, html[data-intro="playing"] #app { opacity: 0; pointer-events: none; }
.festival-intro {
  --intro-progress: 0;
  position: fixed; inset: 0; z-index: 10000; overflow: hidden;
  background: #05050b; color-scheme: dark; isolation: isolate; outline: none;
}
.intro-film { position: absolute; inset: 0 0 56px; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; pointer-events: none; }
.intro-video { display: block; min-width: 0; min-height: 0; width: min(1440px, 100%); height: 100%; object-fit: contain; opacity: 0; transform: scale(1.045); mix-blend-mode: screen; mask-image: radial-gradient(ellipse at center, #000 45%, #000 58%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, #000 58%, transparent 76%); }
.is-playing .intro-video { animation: intro-film-in 1.2s cubic-bezier(.16,1,.3,1) both; }
.intro-skip { position: absolute; z-index: 1; right: clamp(12px, calc(5vw - 12px), 64px); bottom: calc(max(28px, env(safe-area-inset-bottom)) + 10px); min-height: 44px; padding: 10px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #c3bdcf; font: inherit; font-size: 13px; font-weight: 400; letter-spacing: .03em; cursor: pointer; transition: color .2s; }
.intro-skip:hover, .intro-skip:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.intro-skip:focus-visible { outline: 1px solid #c9a9ed; outline-offset: 1px; }
.intro-progress { position: absolute; inset-inline: clamp(24px, 5vw, 76px); bottom: max(28px, env(safe-area-inset-bottom)); height: 1px; background: #ffffff17; overflow: hidden; }
.intro-progress span { display: block; width: 100%; height: 100%; transform: scaleX(var(--intro-progress)); transform-origin: left; background: linear-gradient(90deg, #8f6be9, #d49bdc, #e5c8ff); box-shadow: 0 0 14px #ac81ec; }
html[data-intro="leaving"] .festival-intro { animation: intro-cover-out .9s cubic-bezier(.45,0,.2,1) both; pointer-events: none; }
html[data-intro="leaving"] #app { animation: intro-page-in .9s cubic-bezier(.16,1,.3,1) both; }
#main:focus { outline: none; }
@keyframes intro-film-in { to { opacity: 1; transform: scale(1); } }
@keyframes intro-cover-out { 0% { opacity: 1; } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.018); } }
@keyframes intro-page-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .intro-film { inset-inline: -20%; }
  .intro-video { width: 100%; max-width: none; }
  .intro-progress { inset-inline: 22px; bottom: max(24px, env(safe-area-inset-bottom)); }
  .intro-skip { right: 10px; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 10px); }
}
@media (prefers-reduced-motion: reduce) {
  .festival-intro { display: none; }
  html[data-intro] #app { opacity: 1; pointer-events: auto; animation: none; }
}