:root {
  --black: #010000;
  --gray: #8D8D8D;
  --cream: #F5E3CF;
  --brick: #662D26;
  --tan: #AD8C6A;
  --wine: #481512;
  --white: #fffaf5;
  --video-ratio: 1904 / 1072;
}

* { box-sizing: border-box; }
/* The scrollbar's space is always reserved, so the film doesn't shift when the
   page starts scrolling after loading. */
html { scroll-behavior: auto; background: var(--wine); scrollbar-gutter: stable; }
/* On a first visit the page holds still while the film loads. */
html.is-film-loading,
html.is-film-loading body { overflow: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--wine);
  color: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  overscroll-behavior-y: none;
}

.video-scrub {
  position: relative;
  height: 580vh;
  min-height: 2700px;
  background: var(--wine);
}

.video-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}

.video-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(102,45,38,.22) 0%, rgba(72,21,18,.10) 40%, #010000 80%);
}
.video-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(72,21,18,.19), transparent 14%, transparent 86%, rgba(72,21,18,.19));
  pointer-events: none;
}

/* The canvas is sized to the frame images; object-fit scales it like a video.
   The whole frame is always visible: portrait screens get the portrait film
   and landscape screens the landscape film, so the bars stay small.
   Pinned to the stage, because as a grid item its height would grow to the
   frame's natural height and overflow (cropping) on tall or wide screens. */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  background: transparent;
}

.video-vignette {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1,0,0,.07) 0%, transparent 24%, transparent 76%, rgba(1,0,0,.20) 100%),
    radial-gradient(ellipse at center, transparent 63%, rgba(1,0,0,.10) 100%);
}

.film-grain {
  position: absolute;
  z-index: 3;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: .012;
  background-image: repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, transparent 1px 4px);
  background-size: 7px 7px;
  transform: rotate(.001deg);
}

/* Initial scroll cue. It is deliberately subtle and disappears almost immediately
   after the visitor starts scrolling, so the film remains visually clean. */
.scroll-hint {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  color: var(--cream);
  pointer-events: none;
  text-align: center;
  will-change: opacity, transform;
  filter: drop-shadow(0 5px 18px rgba(1,0,0,.34));
}

.scroll-hint__motion {
  position: relative;
  width: 34px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scroll-hint__track {
  position: relative;
  width: 26px;
  height: 38px;
  border: 1px solid rgba(245,227,207,.72);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(1,0,0,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
/* Load progress fills the cue from the bottom, like a cup. */
.scroll-hint__track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--load, 0%);
  background: rgba(245,227,207,.34);
  opacity: 0;
  transition: height .3s ease-out, opacity .5s ease;
}

.scroll-hint__dot {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 999px;
  background: var(--cream);
  box-shadow: 0 0 10px rgba(245,227,207,.25);
  animation: scroll-dot 1.8s cubic-bezier(.22,.7,.25,1) infinite;
}

.scroll-hint__chevrons {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 18px;
  height: 10px;
  transform: translateX(-50%);
  overflow: visible;
  opacity: .82;
  animation: scroll-chevron 1.8s ease-in-out infinite;
}
.scroll-hint__chevrons path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scroll-hint__copy {
  font-size: .61rem;
  font-weight: 520;
  letter-spacing: .30em;
  text-indent: .30em;
  white-space: nowrap;
  opacity: .84;
}
.scroll-hint__mobile { display: none; }
.scroll-hint__loading { display: none; }

/* Loading state: progress text and fill instead of the scroll animation. */
.scroll-hint.is-loading .scroll-hint__desktop,
.scroll-hint.is-loading .scroll-hint__mobile { display: none; }
.scroll-hint.is-loading .scroll-hint__loading { display: inline; }
.scroll-hint.is-loading .scroll-hint__track::after { opacity: 1; }
.scroll-hint.is-loading .scroll-hint__dot,
.scroll-hint.is-loading .scroll-hint__chevrons {
  animation: none;
  opacity: 0;
}

@keyframes scroll-dot {
  0% { transform: translateY(0); opacity: .12; }
  18% { opacity: 1; }
  68% { opacity: .85; }
  100% { transform: translateY(14px); opacity: 0; }
}

@keyframes scroll-chevron {
  0%, 100% { transform: translate(-50%, -1px); opacity: .38; }
  50% { transform: translate(-50%, 2px); opacity: .9; }
}

/* Finale: hollow STIR mark, original solid tagline and a larger Coming Soon.
   All appearance is reversible by scroll. */
.end-card {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, #71312a 0%, #5a211d 34%, #481512 70%, #3b100e 100%);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.end-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 20%, rgba(245,227,207,.028) 48%, transparent 66%);
  opacity: .8;
}

.end-aura {
  position: absolute;
  left: 50%;
  top: 47%;
  width: min(72vw, 930px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.84);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(173,140,106,.13) 0%, rgba(102,45,38,.08) 38%, transparent 70%);
  opacity: 0;
  will-change: opacity, transform;
}

.end-lockup {
  position: relative;
  z-index: 2;
  width: min(760px, 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(-1.5vh);
}

.logo-animation {
  position: relative;
  width: min(540px, 60vw);
  aspect-ratio: 804 / 315;
  margin-inline: auto;
  filter: drop-shadow(0 14px 46px rgba(1,0,0,.17));
}
.logo-animation img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  will-change: opacity, transform;
}
/* The glow and blur are fixed; the script only fades and moves the logos. */
.logo-hollow {
  opacity: 0;
  transform: scale(.95);
  filter: drop-shadow(0 0 8px rgba(245,227,207,.12));
}
.logo-ghost {
  opacity: 0;
  transform: scale(.97);
  filter: blur(7px);
}

.tagline-wrap {
  width: min(515px, 64vw);
  margin-top: clamp(.1rem, .5vw, .35rem);
  opacity: 0;
  transform: translateY(10px);
  clip-path: inset(0 50% 0 50%);
  will-change: opacity, transform, clip-path;
}
.tagline-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.coming-soon {
  margin: clamp(1.25rem, 2.4vw, 2rem) 0 0;
  color: var(--cream);
  font-size: clamp(1.45rem, 3.25vw, 3rem);
  font-weight: 520;
  line-height: 1;
  letter-spacing: .30em;
  text-indent: .30em;
  opacity: 0;
  transform: translateY(14px);
  text-shadow: 0 8px 30px rgba(1,0,0,.16);
  will-change: opacity, transform, letter-spacing;
}

.end-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(245,227,207,.055);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.92);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.end-orbit--one { width: min(78vw, 980px); aspect-ratio: 1; }
.end-orbit--two {
  width: min(49vw, 610px);
  aspect-ratio: 1;
  border-color: rgba(173,140,106,.085);
}

.noscript {
  position: fixed;
  z-index: 100;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  padding: 1rem;
  background: var(--black);
  color: var(--white);
}

@media (max-width: 760px) {
  .video-scrub {
    height: 620vh;
    min-height: 2800px;
  }

  .scroll-hint {
    bottom: max(34px, calc(env(safe-area-inset-bottom) + 22px));
    gap: .72rem;
  }
  .scroll-hint__track {
    width: 25px;
    height: 39px;
    border-radius: 12px;
  }
  .scroll-hint__dot {
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
  }
  .scroll-hint__desktop { display: none; }
  .scroll-hint__mobile { display: inline; }
  .scroll-hint__copy {
    font-size: .58rem;
    letter-spacing: .27em;
    text-indent: .27em;
  }

  .end-lockup {
    width: 92vw;
    transform: translateY(-1vh);
  }
  .logo-animation { width: min(79vw, 430px); }
  .tagline-wrap { width: min(80vw, 435px); }
  .coming-soon {
    margin-top: 1.15rem;
    font-size: clamp(1.25rem, 7vw, 2rem);
    letter-spacing: .22em;
    text-indent: .22em;
  }
  .end-orbit--one { width: 118vw; }
  .end-orbit--two { width: 82vw; }
}

@media (prefers-reduced-motion: reduce) {
  .film-grain { display: none; }
  .scroll-hint__dot,
  .scroll-hint__chevrons { animation: none; }
}

/* Mobile performance pass: skip the decorative grain layer while scrubbing. */
@media (max-width: 760px) {
  .film-grain { display: none; }
}