@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Seratonin";
  src: url("fonts/Seratonin-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --accent: #f90000;        /* red bar / tagline */
  --paper: #ded9cd;         /* washed super-8 cream */
  --line-main: rgba(255, 255, 255, 0.30);
  --line-loader: rgba(30, 26, 20, 0.16);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0e0e0c;
  color: #fff;
  font-family: "PP Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- Full-bleed video ---------- */
.fill-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.fill-video--main { object-position: center 42%; }

/* ---------- 7-column grid overlay ---------- */
.grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(100% / 7 - 1px),
    var(--line-main) calc(100% / 7 - 1px),
    var(--line-main) calc(100% / 7)
  );
}
.grid--loader::before { background: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(100% / 7 - 1px),
    var(--line-loader) calc(100% / 7 - 1px),
    var(--line-loader) calc(100% / 7)
  );
}
/* red bar = the last (7th) column */
.grid__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% * 6 / 7);
  width: calc(100% / 7);
  background: var(--accent);
  mix-blend-mode: multiply;
}

/* ---------- Vignette to seat the footage ---------- */
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(125% 125% at 50% 45%, transparent 55%, rgba(0,0,0,0.32) 100%);
}

/* ---------- Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--paper);
  opacity: 1;
  transition: opacity 900ms ease;
}
.loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Main stage ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
}
.stage .fill-video,
.stage .grid,
.stage .vignette,
.stage .hero,
.stage .social {
  opacity: 0;
  transition: opacity 1100ms ease 150ms;
}
.stage .fill-video { transform: scale(1.04); transition: opacity 1200ms ease 150ms, transform 1500ms ease 150ms; }
.stage.is-live .fill-video { opacity: 1; transform: scale(1); }
.stage.is-live .grid,
.stage.is-live .vignette { opacity: 1; }

/* ---------- Hero wordmark + tagline ---------- */
.hero {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  width: min(1080px, 86vw);
  z-index: 4;
  pointer-events: none;
}
.stage.is-live .hero { opacity: 1; transition-delay: 450ms; }

.wordmark {
  margin: 0 0 0 -1.5%;
  font-family: "PP Neue Montreal", sans-serif;
  font-weight: 600;
  font-size: clamp(3rem, 18.25vw, 300px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.18);
}
.tagline {
  margin: -0.32em 0 0 20%;
  font-family: "Seratonin", cursive;
  font-weight: 400;
  font-size: clamp(1.75rem, 6.6vw, 108px);
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}

/* ---------- Social ---------- */
.social {
  position: absolute;
  left: 50%;
  bottom: max(2.4rem, env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(14px);
  display: flex;
  gap: 1.7rem;
  z-index: 6;
}
.stage.is-live .social {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity 700ms ease 900ms, transform 700ms ease 900ms;
}

.social__link {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  pointer-events: auto;
  transition: color 200ms ease, transform 200ms ease, background-color 200ms ease;
  filter: drop-shadow(0 1px 7px rgba(0, 0, 0, 0.5));
}
.social__link:hover,
.social__link:focus-visible {
  color: var(--accent);
  transform: translateY(-3px);
  outline: none;
}
.social__link:focus-visible { background: rgba(255, 255, 255, 0.14); }

/* ---------- Reduced motion: freeze on poster frames ---------- */
@media (prefers-reduced-motion: reduce) {
  .fill-video { display: none; }
  .loader { background: var(--paper) url("assets/loader-poster.jpg") center / cover no-repeat; }
  .stage { background: #10110d url("assets/main-poster.jpg") center 42% / cover no-repeat; }
  .stage .grid,
  .stage .vignette,
  .stage .hero,
  .stage .social { transition-duration: 1ms !important; }
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  .tagline { white-space: normal; }
  .social { gap: 1.35rem; }
  .social__link { width: 42px; height: 42px; }
}