:root {
  --ink: #090a09;
  --paper: #f3efe7;
  --warm: #e7cfad;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html {
  background: var(--ink);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--sans);
  overscroll-behavior-y: none;
}

body.is-loading {
  overflow: hidden;
  touch-action: none;
}

button, a { color: inherit; font: inherit; }
button { cursor: pointer; }

.site-shell {
  opacity: 0;
  transition: opacity 800ms ease;
}

body.is-ready .site-shell { opacity: 1; }

.loader {
  --loader-progress: 0%;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--paper);
  background: var(--ink);
  transition: opacity 750ms cubic-bezier(.65, 0, .2, 1), visibility 750ms;
}

.loader::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(880px, 90vw);
  height: min(440px, 52vh);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(231, 207, 173, .055), transparent 68%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.loader[data-state="releasing"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader[data-state="released"] { display: none; }

.loader-inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  text-align: center;
}

.loader-arabic {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(100px, 18vw, 270px);
  font-weight: 300;
  line-height: .72;
  letter-spacing: -.055em;
  animation: greeting-in 1.4s cubic-bezier(.2, .75, .2, 1) both;
}

.loader-latin {
  margin: clamp(30px, 5vh, 70px) 0 0;
  color: var(--warm);
  font-family: var(--serif);
  font-size: clamp(34px, 5.5vw, 86px);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  animation: greeting-in 1.4s .18s cubic-bezier(.2, .75, .2, 1) both;
}

.loader-status {
  width: min(420px, 82vw);
  margin: 48px auto 0;
  display: flex;
  justify-content: space-between;
  color: rgba(243, 239, 231, .46);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: opacity 300ms ease;
}

.loader-status b { font-weight: 400; }

.loader-meter {
  width: min(420px, 82vw);
  height: 1px;
  margin: 12px auto 0;
  overflow: hidden;
  background: rgba(243, 239, 231, .14);
  transition: opacity 300ms ease;
}

.loader-meter i {
  display: block;
  width: var(--loader-progress);
  height: 100%;
  background: var(--warm);
  box-shadow: 0 0 16px rgba(231, 207, 173, .36);
  transition: width 180ms linear;
}

.loader-enter {
  min-width: min(320px, 86vw);
  margin-top: 24px;
  padding: 17px 20px;
  border: 1px solid rgba(243, 239, 231, .42);
  display: inline-flex;
  justify-content: space-between;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 400ms ease, transform 400ms ease, color 250ms ease, background 250ms ease;
}

.loader[data-state="ready"] .loader-enter,
.loader[data-state="fallback"] .loader-enter {
  opacity: 1;
  transform: translateY(0);
}

.loader[data-state="ready"] .loader-status,
.loader[data-state="ready"] .loader-meter,
.loader[data-state="fallback"] .loader-status,
.loader[data-state="fallback"] .loader-meter {
  opacity: .62;
}

.loader-enter:disabled {
  cursor: wait;
  color: rgba(243, 239, 231, .48);
  background: transparent;
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  padding: 34px clamp(22px, 4vw, 68px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand,
.site-header p {
  margin: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-header p { color: rgba(243, 239, 231, .6); }
.site-header span { margin: 0 8px; color: var(--warm); }

.welcome {
  position: relative;
  min-height: 112svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(9, 10, 9, .88), rgba(9, 10, 9, .24) 70%, rgba(9, 10, 9, .46)),
    url("/assets/plan-b-experience/poster-desktop.jpg") center / cover;
}

.welcome::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 35%;
  background: linear-gradient(transparent, var(--ink));
}

.welcome-copy {
  position: relative;
  z-index: 2;
  width: min(860px, calc(100vw - 48px));
  margin-left: clamp(24px, 8vw, 150px);
  padding: 16svh 0 20svh;
}

.eyebrow {
  margin: 0 0 24px;
  color: var(--warm);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
}

.welcome h1,
.closing h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(78px, 11vw, 174px);
  font-weight: 300;
  line-height: .78;
  letter-spacing: -.055em;
}

.welcome h1 em,
.closing h2 em {
  color: var(--warm);
  font-weight: 300;
}

.welcome-lede {
  max-width: 520px;
  margin: 36px 0 0;
  color: rgba(243, 239, 231, .7);
  font-size: 14px;
  line-height: 1.8;
}

.enter-film {
  margin-top: 34px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid rgba(243, 239, 231, .5);
  display: inline-flex;
  gap: 56px;
  background: transparent;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.film-track {
  height: 1850svh;
  background: #050605;
}

.film-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  background: #050605;
}

.film,
.film-poster,
.film-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.film,
.film-poster img { object-fit: cover; }
.film-poster { margin: 0; }

.film {
  z-index: 1;
  opacity: 0;
  transition: opacity 500ms ease;
}

.film.is-ready { opacity: 1; }

.film-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 6, 5, .28), transparent 30%, transparent 78%, rgba(5, 6, 5, .2)),
    linear-gradient(0deg, rgba(5, 6, 5, .3), transparent 25%, transparent 80%, rgba(5, 6, 5, .16));
}

.film-beats {
  position: absolute;
  z-index: 4;
  left: clamp(22px, 4vw, 68px);
  bottom: max(70px, 9vh);
  width: min(440px, calc(100vw - 44px));
  min-height: 72px;
}

.film-beat {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 420ms ease, transform 500ms ease;
}

.film-beat.is-visible {
  opacity: .82;
  transform: translateY(0);
}

.film-beat p {
  margin: 0 0 7px;
  color: var(--warm);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.film-beat h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.04em;
}

.film-controls {
  position: absolute;
  z-index: 7;
  right: clamp(22px, 4vw, 68px);
  bottom: max(24px, 4vh);
  display: flex;
  gap: 18px;
}

.film-controls button {
  padding: 10px 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(243, 239, 231, .76);
  background: transparent;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.film-controls button span:first-child { color: var(--warm); }

.scroll-cue {
  position: absolute;
  z-index: 5;
  left: clamp(22px, 4vw, 68px);
  bottom: max(26px, 4vh);
  margin: 0;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: opacity 450ms ease;
}

.scroll-cue.is-hidden { opacity: 0; }

.closing {
  min-height: 100svh;
  padding: 16vh clamp(24px, 8vw, 150px) 8vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ink);
}

.closing h2 { max-width: 1180px; }

.closing-actions {
  margin-top: 56px;
  display: flex;
  gap: 12px;
}

.closing-actions button,
.closing-actions a {
  min-width: 220px;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid rgba(243, 239, 231, .3);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.closing-actions button {
  color: var(--ink);
  background: var(--paper);
}

.disclaimer {
  margin: 14vh 0 0;
  color: rgba(243, 239, 231, .36);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.noscript-message {
  min-height: 100vh;
  padding: 12vw;
  background: var(--ink);
}

.noscript-message video {
  width: min(100%, 1100px);
  margin-top: 30px;
}

@keyframes greeting-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(18px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@media (max-width: 767px) {
  .site-header { padding: 24px 18px; }

  .loader-arabic {
    font-size: clamp(88px, 27vw, 150px);
    line-height: .8;
  }

  .loader-latin {
    margin-top: 28px;
    font-size: clamp(38px, 12vw, 60px);
  }

  .welcome {
    background:
      linear-gradient(0deg, rgba(9, 10, 9, .88), rgba(9, 10, 9, .12) 70%),
      url("/assets/plan-b-experience/poster-mobile.jpg") center / cover;
  }

  .welcome-copy {
    width: auto;
    margin: 0;
    padding: 42svh 24px 16svh;
    align-self: end;
  }

  .welcome h1 { font-size: clamp(70px, 22vw, 108px); }

  .welcome-lede {
    max-width: 32rem;
    font-size: 13px;
  }

  .film-track { height: 1650svh; }

  .film-beats {
    left: 18px;
    bottom: max(94px, 12vh);
  }

  .film-beat h2 { font-size: 38px; }

  .film-controls {
    left: 18px;
    right: 18px;
    bottom: max(24px, 4vh);
    justify-content: flex-end;
  }

  .scroll-cue {
    left: 18px;
    bottom: max(26px, 4vh);
    max-width: 46vw;
    line-height: 1.6;
  }

  .closing { padding-inline: 24px; }
  .closing h2 { font-size: clamp(62px, 18vw, 96px); }

  .closing-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .film-track { height: 100svh; }
  .film-beats, .scroll-cue { display: none; }
}