/* The homepage's opening film and the live studio under the logo.
   The film plays full screen over the real homepage (a landscape cut on desktop,
   a portrait one on phones); at its end it glides onto
   the studio's stage and fades, handing over to the live Bunnybat #437. */

/* ---------- Opening film: full screen ---------- */
/* The page holds still under the film. Only <html> is locked: overflow on <body> as well makes <body> a
   scroll box of its own, which unsticks the banner and which iOS Safari lets a finger scroll through. */
html.intro-on { overflow: hidden; overscroll-behavior: none; }
/* The banner comes in before the film finishes, above it and with working links. */
html.intro-on .site-nav, html.intro-banner-on .site-nav {
  z-index: 1001;
  transition: opacity 0.3s ease;
}
html.intro-on:not(.intro-banner-on) .site-nav { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  html.intro-on .site-nav, html.intro-banner-on .site-nav { transition: none; }
}
.intro { position: fixed; inset: 0; z-index: 1000; touch-action: none; }
/* Black behind the film until the hand-over, so nothing of the page shows at the edges. */
.intro:not(.is-handing) { background: #000; }
html:not(.intro-on) .intro:not(.is-handing) { display: none; }
/* Handing over: the homepage round the film is live already. */
.intro.is-handing { pointer-events: none; }
.intro-window {
  /* inset, not 100vw/100vh: on phones 100vh isn't the visible height while the toolbar shows. */
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
}
/* Start beyond the screen's corners, then draw the soft vignette inward as the film fades.
   Mask the black fill too, so the real homepage shows through the feathered edges. */
.intro.is-handing .intro-window {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, #000 60%, rgba(0, 0, 0, 0.92) 72%, rgba(0, 0, 0, 0.45) 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at center, #000 60%, rgba(0, 0, 0, 0.92) 72%, rgba(0, 0, 0, 0.45) 88%, transparent 100%);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* The film covers the window (the script places it by hand for the glide onto the stage). */
.intro-window video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.intro-controls {
  position: absolute;
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.3s ease;
}
.intro.is-handing .intro-controls, .intro.is-handing .intro-start { opacity: 0; pointer-events: none; }
.intro-btn, .intro-start {
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f4efff;
  background: rgba(10, 8, 30, 0.55);
  border: 1px solid rgba(184, 165, 232, 0.45);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
}
.intro-btn:hover, .intro-btn:focus-visible { border-color: #f3d27a; color: #fff; }
.intro-btn:focus-visible, .intro-start:focus-visible { outline: 2px solid #f3d27a; outline-offset: 3px; }
.intro-btn[aria-pressed="true"] { border-color: #f3d27a; }
/* Nate's SOUND button. Sound on: wiggling lines beside it. Sound off: no lines. */
.intro-sound { display: flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease; }
.intro-sound img { display: block; height: 2.1rem; width: auto; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55)); }
.intro-sound:hover { transform: translateY(-1px) scale(1.05); }
.intro-sound:active { transform: translateY(1px) scale(0.96); }
.intro-sound:focus-visible { outline: 2px solid #f3d27a; outline-offset: 3px; border-radius: 999px; }
.intro-sound-lines { width: 0.9rem; height: 1.6rem; overflow: visible; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 1px #000) drop-shadow(0 1px 1px #000); visibility: hidden; }
.intro-sound[aria-pressed="true"] .intro-sound-lines { visibility: visible; }
.intro-sound[aria-pressed="true"] .intro-sound-lines path { animation: intro-wiggle 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 50%; }
.intro-sound-lines path:nth-child(2) { animation-delay: 0.15s; }
.intro-sound-lines path:nth-child(3) { animation-delay: 0.3s; }
@keyframes intro-wiggle { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.6) translateX(-2px); opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .intro-sound-lines path { animation: none !important; } }
.intro-start {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.05rem;
  padding: 1rem 2.2rem;
  background: rgba(10, 8, 30, 0.7);
  border-color: #f3d27a;
}

/* ---------- Studio under the logo ---------- */
body .hero.has-studio {
  display: grid;
  min-height: 0;
  padding: 8px 0 24px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "art" "studio";
  row-gap: 10px;
  justify-items: center;
}
body .hero.has-studio .hero-art-wrap { grid-area: art; width: clamp(240px, calc(27svh * 1.493), 470px); max-width: 92%; margin: 0 auto; }
/* The studio frame spans the whole window (set by home-intro.js as --home-page-w, the page's width
   without its scrollbar), so OPTIONS, the board and the Nest can be moved to either edge. The studio's
   own column stays where it was: the frame centres its stage on the page. */
.home-studio { grid-area: studio; justify-self: start; width: var(--home-page-w, 100%); max-width: none; min-width: 0; margin: 0 0 0 calc(50% - var(--home-page-w, 100%) / 2); }
/* The featured Bunnybat stays in front of the roaming flock by its outline, cut out of their layer
   (src/nest/roam.ts, "nest-dock"), not by lifting this frame over them: the frame spans the page's
   width and the stage's height, and over them it would take their taps. */
/* The song's SOUND button, top left of the studio's stage (placed by assets/home-intro.js). */
.home-sound { position: absolute; z-index: 3; left: 0; top: 0; }
.home-sound img { height: 1.7rem; }
.home-studio iframe {
  display: block;
  width: 100%;
  height: var(--home-studio-h, 560px);
  border: 0;
  background: transparent;
  color-scheme: normal;
}
.home-studio.has-board-overlay iframe {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: var(--home-page-w, 100vw);
  height: 100dvh;
}
/* The frame leaves document flow while it becomes the board's viewport. Keep its original
   studio space so opening the board cannot pull the gallery count up or strand the page scroll. */
.home-studio.has-board-overlay { min-height: var(--home-studio-h, 560px); }
@media (max-width: 899px) {
  body .hero.has-studio .hero-art-wrap { width: min(86%, calc(24svh * 1.493), 525px); }
}

/* ---------- The Mixer, opened over the homepage ---------- */
.mixer-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(980px, 100vw);
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(184, 165, 232, 0.3);
  background: #0a0a18;
  color: #f4efff;
  overflow: hidden;
}
.mixer-drawer::backdrop { background: rgba(5, 3, 14, 0.62); }
.mixer-drawer[open] { display: flex; flex-direction: column; }
.mixer-drawer-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.8rem 0.6rem 1.1rem; border-bottom: 1px solid rgba(184, 165, 232, 0.2); }
.mixer-drawer-title { margin: 0; font-family: var(--font-display, system-ui, sans-serif); font-size: 0.95rem; letter-spacing: 0.04em; }
.mixer-drawer-bar a { color: #b8a5e8; font-size: 0.85rem; }
.mixer-drawer-x { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(184, 165, 232, 0.4); background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; }
.mixer-drawer-x svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
.mixer-drawer iframe { flex: 1; width: 100%; border: 0; background: #0a0a18; }
@media (prefers-reduced-motion: no-preference) {
  .mixer-drawer[open] { animation: mixer-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
  @keyframes mixer-in { from { transform: translateX(40px); opacity: 0; } }
}

/* The homepage lets clicks through its content column to the art behind; the studio and Mixer take them. */
.container .home-studio, .container .mixer-drawer { pointer-events: auto; }