/* The cinematic scroll story. Shared chrome lives in base.css.
   JS writes the custom properties; CSS does all the compositing. */

:root {
  --mx: 0;
  --my: 0;
  --back-opacity: 1;
  --back-x: 0px;
  --back-y: 0px;
  --back-scale: 0.76;
  --four-y: 10vh;
  --four-scale: 0.78;
  --bazaar-y: 20vh;
  --blur-px: 0px;
  --back-brightness: 1;
  --bazaar-blur-px: 0px;
  --bazaar-brightness: 1;
  --bazaar-saturation: 1;
  --shade-opacity: 1;
  --shade-z: 2;
  --shade-top-alpha: 0;
  --shade-mid-alpha: 0;
  --shade-bottom-alpha: 0;
  --blur-tint: 74, 181, 224;
  --title-y: 0px;
  --title-scale: 1;
  --title-opacity: 1;
  /* Widening the bridge to a full span also makes it taller, and bottom anchors
     it, so at 108vw the deck rises into the wordmark. Dropping the anchor puts
     it back underneath and lets the arch springing run off-screen. */
  --bridge-x: -50%;
  --bridge-y: 0px;
  --bridge-bottom: -20vh;
  --bridge-width: 108vw;
  --bridge-scale: 1.02;
  --split-left-x: -50%;
  --split-left-y: 0px;
  --split-left-scale: 1;
  --split-right-x: -50%;
  --split-right-y: 0px;
  --split-right-scale: 1;
  --frame2-opacity: 0;
  --frame2-x: -50%;
  --frame2-y: -50%;
  --frame2-scale: 1.06;
  --intro-copy-y: 0px;
  --intro-copy-opacity: 1;
  --panel2-opacity: 0;
  --panel2-y: calc(-50% + 58px);
  --panel3-opacity: 0;
  --panel3-y: calc(-50% + 58px);
}

.site-shell {
  min-height: 100vh;
}

/* ---------------------------------------------------------------- scroll rig */

/* Shortened from 3700px: the card slider that used to occupy 2760–3660 was
   moved to its own page, so the story now ends with the community panel. */
.cinema-scroll {
  position: relative;
  height: calc(100vh + 2900px);
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: #7fb4d4;
}

.world {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #79b7dd;
}

/* The header sits inside the pinned stage, over the artwork. */
.cinema-scroll .site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: auto;
}

/* ------------------------------------------------------------ scene images */

.scene-img {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity, filter;
  pointer-events: none;
}

.sky-img {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  filter: blur(var(--blur-px)) brightness(var(--back-brightness));
}

.back-stack {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: -3vw;
  right: -3vw;
  opacity: var(--back-opacity);
  transform: translate3d(var(--back-x), var(--back-y), 0)
    scale(var(--back-scale));
  transform-origin: 50% 100%;
  will-change: transform, filter, opacity;
}

.back-img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(var(--blur-px)) brightness(var(--back-brightness));
}

.back-bazaar {
  z-index: 3;
  top: auto;
  bottom: 0;
  left: 48%;
  right: auto;
  width: 112%;
  height: auto;
  object-fit: contain;
  opacity: 1;
  filter: blur(var(--bazaar-blur-px)) brightness(var(--bazaar-brightness))
    saturate(var(--bazaar-saturation));
  transform: translate3d(-50%, var(--bazaar-y), 0) scale(0.86);
}

/* Carries real alpha rather than relying on mix-blend-mode: screen — .back-stack
   sets opacity and transform, so it isolates the blend group and the blend never
   applies. See README. */
.back-four {
  z-index: 1;
  top: auto;
  bottom: 0;
  left: 48%;
  right: auto;
  width: 112%;
  height: auto;
  object-fit: contain;
  opacity: 0.9;
  transform: translate3d(-50%, calc(var(--four-y) - 110px), 0)
    scale(var(--four-scale));
}

/* --------------------------------------------------------------- hero title */

.hero-title {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: clamp(96px, 17vh, 205px);
  width: min(94vw, 1780px);
  margin: 0;
  color: #fdf1e1;
  font-family: "Ogg Medium", Georgia, serif;
  font-size: clamp(3.4rem, 13vw, 14rem);
  font-weight: 500;
  line-height: 0.78;
  text-align: center;
  transform: translate3d(-50%, var(--title-y), 0) scale(var(--title-scale));
  opacity: var(--title-opacity);
  will-change: transform, opacity;
}

/* ------------------------------------------------------- bridge / splitframe */

.bridge-img {
  z-index: 4;
  left: 50%;
  bottom: var(--bridge-bottom);
  /* The cap has to clear 108vw on a wide display or the span would clamp back
     to a centred island; the source is 2600px, so beyond that it upscales. */
  width: min(var(--bridge-width), 3200px);
  height: auto;
  transform: translate3d(var(--bridge-x), var(--bridge-y), 0)
    scale(var(--bridge-scale));
  transform-origin: 50% 48%;
}

.splitframe-img {
  z-index: 6;
  left: 50%;
  bottom: -2vh;
  width: min(118vw, 2240px);
  height: auto;
  pointer-events: none;
}

.splitframe-left {
  transform: translate3d(var(--split-left-x), var(--split-left-y), 0)
    scale(var(--split-left-scale));
  transform-origin: 21% 52%;
}

.splitframe-right {
  transform: translate3d(var(--split-right-x), var(--split-right-y), 0)
    scale(var(--split-right-scale));
  transform-origin: 79% 52%;
}

.frame-two-img {
  z-index: 5;
  filter: none !important;
  left: 50%;
  top: 50%;
  width: min(122vw, 2160px);
  height: auto;
  opacity: var(--frame2-opacity);
  transform: translate3d(var(--frame2-x), var(--frame2-y), 0)
    scale(var(--frame2-scale));
  transform-origin: 50% 48%;
}

.shade {
  position: absolute;
  inset: 0;
  z-index: var(--shade-z);
  pointer-events: none;
  opacity: var(--shade-opacity);
  background: linear-gradient(
    180deg,
    rgba(var(--blur-tint), var(--shade-top-alpha)) 0%,
    rgba(var(--blur-tint), var(--shade-mid-alpha)) 48%,
    rgba(var(--blur-tint), var(--shade-bottom-alpha)) 100%
  );
}

/* -------------------------------------------------------------- intro copy */

.intro-copy {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: clamp(48px, 24vh, 340px);
  width: min(600px, calc(100vw - 32px));
  text-align: center;
  transform: translate3d(-50%, var(--intro-copy-y), 0);
  opacity: var(--intro-copy-opacity);
  will-change: transform, opacity;
}

.intro-copy p {
  margin: 0 auto;
  max-width: 600px;
  color: #fdf1e1;
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.62);
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.hero-tags span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 20px;
  color: var(--ink);
  border-radius: 999px;
  background: #fdf1e1;
  font-size: clamp(0.85rem, 2vw, 0.98rem);
  font-weight: 500;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ story panels */

.story-panel {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 45%;
  width: min(760px, calc(100vw - 32px));
  text-align: center;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
}

.story-panel h2 {
  margin: 0;
  color: #fdf1e1;
  font-family: "Ogg Medium", Georgia, serif;
  font-size: clamp(2.1rem, 6vw, 4.75rem);
  font-weight: 500;
  line-height: 0.98;
  text-shadow: 0 16px 38px var(--shadow);
}

.story-panel p {
  width: min(560px, 100%);
  margin: 24px auto 0;
  color: #fdf1e1;
  font-size: clamp(1rem, 2.4vw, 1.14rem);
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.62);
}

.story-panel-bridge {
  top: 58%;
  opacity: var(--panel2-opacity);
  transform: translate3d(-50%, var(--panel2-y), 0);
}

.story-panel-bazaar {
  top: 40%;
  opacity: var(--panel3-opacity);
  transform: translate3d(-50%, var(--panel3-y), 0);
}

.note-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin-top: 28px;
  padding: 0 28px;
  border-radius: 999px;
  color: var(--ink);
  background: #fdf1e1;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
  font-size: clamp(0.95rem, 2.2vw, 1rem);
  font-weight: 600;
  text-decoration: none;
  pointer-events: auto;
}

.note-button:hover {
  background: #fff;
}

/* --------------------------------------------------------- media queries */

@media (max-width: 1100px) {
  .splitframe-img {
    width: 150vw;
  }
  .frame-two-img {
    width: 132vw;
  }
}

@media (max-width: 640px) {
  .stage {
    min-height: 560px;
  }
  /* The bridge is the anchor of the composition, so it keeps spanning the
     screen rather than shrinking with the viewport. */
  .bridge-img {
    width: 210vw;
    bottom: -14vh;
  }
  .splitframe-img {
    width: 210vw;
    bottom: -1vh;
  }
  .frame-two-img {
    width: 190vw;
  }
  .hero-title {
    top: 13vh;
  }
  .intro-copy {
    bottom: 40px;
  }
  .story-panel-bridge {
    top: 56%;
  }
  .story-panel-bazaar {
    top: 38%;
  }
}

/* Short landscape phones: the stage is only ~380px tall, so pull the type in. */
@media (max-height: 520px) {
  .hero-title {
    top: 8vh;
    font-size: clamp(2.4rem, 9vw, 5rem);
  }
  .intro-copy {
    bottom: 20px;
  }
  .intro-copy p {
    font-size: 0.92rem;
  }
  .hero-tags {
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-img,
  .back-stack,
  .hero-title,
  .intro-copy,
  .story-panel {
    transition: none;
  }
}