/* ============================================================
   landing.css — the entry screen and the film.

   The video lives in #screen behind everything and morphs from
   "atmosphere" (blurred, dimmed, looping) to "the film" (sharp, full
   opacity, letterboxed) when the visitor enters. Same element, so
   there is no reload and no black gap between the two states.
   ============================================================ */

/* ---------- the shared film surface ---------- */

#screen {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}

.screen__film {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* scaled up so the blur never samples an empty edge */
  transform: scale(1.22);
  /* The source clip is already near-black, so this LIFTS it (brightness > 1)
     rather than dimming it — dimming would crush it to an invisible black
     rectangle. It only has to be a suggestion of motion behind the type. */
  filter: blur(32px) saturate(1.45) brightness(1.55) contrast(1.12);
  opacity: 0;
  transition: opacity 1.8s var(--e-out), filter 1.2s var(--e-out),
              transform 1.4s var(--e-out), object-fit 0s;
  will-change: transform, opacity, filter;
}

/* fades up from the poster once the first frame is actually decoded */
body[data-film="live"] .screen__film { opacity: 0.62; }

/* slow drift so it never feels like a frozen still */
body[data-film="live"] .screen__film {
  animation: backdropDrift 34s ease-in-out infinite;
}
@keyframes backdropDrift {
  0%, 100% { transform: scale(1.22) translate3d(0, 0, 0); }
  50%      { transform: scale(1.3) translate3d(-1.4%, 1.6%, 0); }
}

/* gradient wash: keeps the type legible over any frame of footage.
   Deliberately lighter in the middle than a usual scrim, or the film
   disappears entirely behind it. */
.screen__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(78% 62% at 50% 50%, rgba(5, 6, 8, 0.1) 0%, rgba(5, 6, 8, 0.66) 100%),
    linear-gradient(to bottom, rgba(5, 6, 8, 0.72) 0%, rgba(5, 6, 8, 0.1) 34%, rgba(5, 6, 8, 0.18) 66%, rgba(5, 6, 8, 0.86) 100%);
  transition: opacity 1s var(--e-out);
}

/* Film unavailable: the poster becomes the frame.
   This has to be explicit. The element sits at opacity 0 until the film
   fades in, and opacity hides the poster as well — so without this a deploy
   with a missing/broken film renders a black rectangle, not the fallback. */
body[data-film="poster"] .screen__film {
  opacity: 1;
  filter: blur(18px) saturate(1.2) brightness(0.95);
  transform: none;
  animation: none;
}

/* ---------- entered: the film becomes the page ---------- */

body[data-stage="film"] .screen__film {
  /* sharp and unfiltered, shown whole — letterboxed, not cropped */
  filter: none;
  opacity: 1;
  /* contain, not cover: the source is 1080x1080, so cropping it to fill a
     wide screen would throw away 540px of height. The film is shown as it
     was shot, framed by the page. */
  object-fit: contain;
  transform: none;
  animation: none;
  transition:
    filter 0.7s var(--e-out),
    opacity 0.55s var(--e-out),
    transform 0.8s var(--e-out),
    object-fit 0s;
}

body[data-stage="film"] .screen__scrim { opacity: 0; }

/* ---------- 1 · entry ---------- */

.stage--entry {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 6vh 5vw;
}

.entry__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5vh, 3.4rem);
  text-align: center;
}

.entry__title {
  margin: 0;
  font-size: clamp(2.4rem, 11.5vw, 8.5rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: 0.14em;
  text-indent: 0.14em; /* cancels the trailing letter-space */
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 60px rgba(0, 0, 0, 0.55);
}

.entry__title-inner { display: inline-flex; }

/* ---------- enter button ---------- */

.btn-enter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 2.1rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.5s var(--e-out), border-color 0.5s var(--e-out),
              background-color 0.5s var(--e-out);
}

.btn-enter__label,
.btn-enter__icon { position: relative; z-index: 2; }
.btn-enter__icon { display: grid; place-items: center; transition: transform 0.5s var(--e-out); }

.btn-enter__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 140% at 50% 120%, var(--accent-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.6s var(--e-out);
}

/* the ring that traces the button on hover */
.btn-enter__ring {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, transparent 20%, var(--accent-hi), transparent 80%);
  background-size: 220% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  animation: ringSweep 5s linear infinite;
  transition: opacity 0.5s var(--e-out);
}
@keyframes ringSweep { to { background-position: -220% 0; } }

@media (hover: hover) {
  .btn-enter:hover { color: #08090c; border-color: transparent; background-color: rgba(255, 255, 255, 0.9); }
  .btn-enter:hover .btn-enter__glow { opacity: 0.55; }
  .btn-enter:hover .btn-enter__ring { opacity: 1; }
  .btn-enter:hover .btn-enter__icon { transform: translateX(3px); }
}

.btn-enter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.btn-enter[disabled] { opacity: 0.5; cursor: default; }

/* the entry screen leaves by scaling the type up and dissolving */
.stage--entry.is-leaving .entry__inner {
  opacity: 0;
  transform: scale(1.12);
  filter: blur(6px);
  transition: opacity 0.5s var(--e-out), transform 0.6s var(--e-out), filter 0.5s var(--e-out);
}

/* ---------- 2 · film stage ---------- */

.stage--film {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* the video is the page; only the bar takes clicks */
}

body[data-stage="film"] { overflow: hidden; }
body[data-stage="film"] .fx__grain { opacity: 0.03; }

/* the transport bar: hidden until you move the mouse, so the film is clean */
.filmbar {
  position: absolute;
  left: 50%;
  bottom: max(1.6rem, env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: min(46rem, calc(100vw - 2.4rem));
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(10, 11, 15, 0.55);
  backdrop-filter: saturate(150%) blur(20px);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  opacity: 0;
  transition: transform 0.6s var(--e-out), opacity 0.45s var(--e-out);
}
.filmbar.is-visible { transform: translate(-50%, 0); opacity: 1; }

.filmbar__btn {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.3s var(--e-out), color 0.3s var(--e-out);
}
.filmbar__btn:hover { background: var(--accent); color: #08090c; }
.filmbar__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* swap the glyphs without re-rendering the button */
.filmbar__btn .i-play,
.filmbar__btn .i-muted { display: none; }
.filmbar__btn[aria-pressed="true"] .i-play,
.filmbar__btn[aria-pressed="true"] .i-muted { display: block; }
.filmbar__btn[aria-pressed="true"] .i-pause,
.filmbar__btn[aria-pressed="true"] .i-sound { display: none; }

.filmbar__time {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  min-width: 2.6rem;
}
.filmbar__time--total { text-align: right; }

.filmbar__track {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
}
.filmbar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: var(--accent);
}
.filmbar__track::after {           /* hover hit area */
  content: "";
  position: absolute;
  inset: -9px 0;
}

/* ---------- play again ---------- */

.replay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.9rem 2rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(5, 6, 8, 0.5);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  animation: replayIn 0.7s var(--e-out) both;
}
.replay:hover { background: rgba(255, 255, 255, 0.92); color: #08090c; border-color: transparent; }
.replay:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes replayIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .screen__film { filter: blur(24px) saturate(1.4) brightness(1.45) contrast(1.1); transform: scale(1.15); }
  body[data-film="live"] .screen__film { opacity: 0.55; }
  .filmbar { width: calc(100vw - 1.4rem); gap: 0.6rem; padding: 0.5rem 0.7rem; }
  .filmbar__time { font-size: 0.64rem; min-width: 2.2rem; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .screen__film { animation: none !important; }
  .btn-enter__ring { animation: none; }
  .entry__char,
  .btn-enter,
  .filmbar,
  .replay { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .is-revealed .entry__char { opacity: 1; transform: none; }
  .replay { opacity: 1; }
}