/* Home page: the film fills the screen; Sign in defocuses it and opens the glass sheet. */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100dvh;
  background: var(--room-dark);
  color: var(--ink);
  font: var(--weight-regular) var(--text-md) / 1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- the film ---------- */
.film { position: fixed; inset: 0; overflow: hidden; background: var(--room-dark); transform-origin: 50% 45%; transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.film > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.room, .room-poster { object-fit: cover; }
/* The film is never cropped: its title and cards stay clear of the screen edges and the Sign in button. */
.studio, .film-poster {
  object-fit: contain;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent), linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent), linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
@media (aspect-ratio: 16/9) { .studio, .film-poster { -webkit-mask: none; mask: none; } }
.film video { opacity: 0; transition: opacity var(--dur-base) linear; }
.film video.ready { opacity: 1; }
/* The same focus pull the film uses: the room falls out of focus, the glass comes forward. */
body.signing-in .film { filter: blur(22px) brightness(0.68) saturate(1.1); transform: scale(1.06); }

/* ---------- top bar ---------- */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: max(24px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) 0 32px;
  pointer-events: none;
}
.top > * { pointer-events: auto; }
/* The film carries the brand on wide screens, so the header brand only appears on phones. */
.brand-link { display: none; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: var(--text-lg); font-weight: var(--weight-medium); margin-right: auto; border-radius: 12px; }
.brand-link svg { width: 28px; height: 28px; }
.brand-link:focus-visible { outline: 0; box-shadow: var(--focus); }
.sign-in-open { min-width: 124px; }
body.signing-in .top, body.signing-in .motion-toggle { opacity: 0; transition: opacity var(--dur-base) linear; }

/* ---------- text for everyone (visible on phones, read by screen readers everywhere) ---------- */
.hero { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero h1 { margin: 0; font-weight: var(--weight-medium); font-size: var(--text-hero); line-height: 1.04; letter-spacing: -0.015em; }
.hero p { margin: 16px 0 0; max-width: 30ch; color: var(--ink-soft); font-size: var(--text-lg); line-height: 1.45; }

.motion-toggle { position: fixed; right: max(32px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom)); }

/* ---------- sign-in sheet ---------- */
#sign-in-form { display: grid; gap: var(--space-5); }
.sheet-close { position: absolute; top: 18px; right: 18px; }
.sheet-mark { width: 40px; height: 40px; }
#sign-in-form h2 { margin: -8px 0 0; font-size: var(--text-xl); font-weight: var(--weight-medium); line-height: 1.15; letter-spacing: -0.01em; }
#sign-in-form .lead { margin: -14px 0 4px; color: var(--ink-soft); font-size: var(--text-md); }
.form-error { padding-left: 4px; }
.submit { margin-top: 4px; }
.foot { margin: -6px 0 0; text-align: center; font-size: var(--text-sm); color: var(--ink-soft); }
dialog.sheet { background: var(--glass-smoked-strong); }

/* ---------- phones and portrait screens: the room loop with real text ---------- */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .brand-link { display: flex; }
  .studio, .film-poster { display: none; }
  .top { justify-content: space-between; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .hero {
    position: fixed;
    left: max(20px, env(safe-area-inset-left));
    right: 20px;
    bottom: max(96px, calc(env(safe-area-inset-bottom) + 80px));
    width: auto;
    height: auto;
    clip: auto;
    white-space: normal;
  }
  .motion-toggle { right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); }
  body.signing-in .hero { opacity: 0; transition: opacity var(--dur-base) linear; }
  dialog.sheet { padding: 36px 22px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .film video { display: none; }
  .film, .top, .motion-toggle, .hero { transition: none; }
  .motion-toggle { display: none; }
}