/* ==========================================================================
   Scroll-driven scenes
   scroll.js writes progress vars (0 → 1) onto every [data-scroll] element:
     --e   enter:  top edge enters viewport → reaches 30% from top
     --p   view:   element enters bottom → leaves top
     --l   leave:  element top at viewport top → element fully scrolled past
     --pin pinned: progress through a tall section with a sticky child
   ========================================================================== */

/* ---------- HERO: full-bleed image, parallax + light ---------- */
.hero {
  --l: 0;
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(660px, 100svh);
  padding-block: calc(var(--header-h) + 2rem) 7rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--concrete);
}
/* one bottom fade across the full width, so the hero melts into the page */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  height: 26%;
  background: linear-gradient(0deg, var(--white), rgba(248, 247, 245, 0));
  pointer-events: none;
}
.hero__media {
  position: absolute;
  inset: 0 0 0 22%;
  z-index: -2;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 60%;
  transform: translate3d(0, calc(var(--l) * 16%), 0) scale(calc(1.06 + var(--l) * 0.16));
  transform-origin: 62% 60%;
  will-change: transform;
  animation: hero-in 1.8s var(--ease-out-expo) both;
}
@keyframes hero-in {
  from { opacity: 0; transform: scale(1.18); }
}
/* fades the photo into the page so it reads as one continuous wall */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--concrete) 0%, var(--concrete) 16%, rgba(228, 226, 222, 0.7) 30%, rgba(228, 226, 222, 0) 52%);
}
.hero__glow {
  position: absolute;
  left: 52%;
  top: 28%;
  width: 26%;
  height: 58%;
  background: radial-gradient(closest-side, rgba(255, 74, 0, 0.6), rgba(255, 74, 0, 0));
  mix-blend-mode: screen;
  opacity: calc(0.45 + var(--l) * 0.9);
  animation: breathe 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe {
  0%, 100% { scale: 0.94; }
  50% { scale: 1.08; }
}
/* sun shafts that sweep across the whole hero as you scroll */
.hero__shafts {
  position: absolute;
  inset: -20% -60%;
  z-index: -1;
  background: repeating-linear-gradient(115deg,
      rgba(255, 255, 255, 0) 0 12%,
      rgba(255, 255, 255, 0.28) 12% 16%,
      rgba(255, 255, 255, 0) 16% 30%);
  mix-blend-mode: soft-light;
  transform: translate3d(calc(var(--l) * -22%), 0, 0);
  pointer-events: none;
}
.hero__content {
  position: relative;
  max-width: 44rem;
  transform: translate3d(0, calc(var(--l) * -90px), 0);
  opacity: calc(1 - var(--l) * 1.4);
}
.hero__title { font-size: var(--text-hero); margin-bottom: 1.75rem; }
.hero .dash { margin-bottom: 1.75rem; }
.hero__lede { margin-bottom: 2.25rem; color: var(--ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
.hero__note { max-width: 26ch; font-size: var(--text-sm); color: var(--graphite); }

/* the angled type set "on the wall", like the concept */
.hero__wall {
  position: absolute;
  right: clamp(3rem, 8vw, 9rem);
  top: 30%;
  display: grid;
  gap: 2.5rem;
  color: #fff;
  mix-blend-mode: difference;
  transform: perspective(900px) rotateY(-22deg) rotateZ(-6deg)
    translate3d(0, calc(var(--l) * -160px), 0);
  transform-origin: left center;
}
.hero__wall ul { display: grid; gap: 0.6rem; font-size: 0.9rem; letter-spacing: 0.34em; }
.hero__wall p { max-width: 17ch; font-size: 0.72rem; line-height: 1.8; }

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  color: var(--graphite);
  translate: -50% 0;
  opacity: calc(1 - var(--l) * 4);
}
.hero__cue::after {
  content: "";
  width: 1px;
  height: 42px;
  background: linear-gradient(var(--orange), transparent);
  animation: cue 2s var(--ease-out-expo) infinite;
  transform-origin: top;
}
@keyframes cue {
  0% { transform: scaleY(0); }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- PILLAR STRIP ---------- */
.pillars {
  position: relative;
  z-index: 2;
  margin-top: -4.5rem;
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--white);
  box-shadow: var(--shadow-lift);
}
.pillar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  text-decoration: none;
  border-right: 1px solid var(--line);
}
.pillar:last-child { border-right: 0; }
.pillar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}
.pillar:hover::before,
.pillar:focus-visible::before { transform: scaleX(1); }
.pillar__thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--black); }
.pillar__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-expo);
}
.pillar:hover .pillar__thumb img { transform: scale(1.12); }
.pillar__label { display: grid; gap: 0.75rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.18em; }
.pillar__label svg { width: 22px; height: 22px; transition: transform var(--duration-normal) var(--ease-out-expo); }
.pillar:hover .pillar__label svg { transform: translateX(6px); color: var(--orange); }

/* ---------- BAND: oversized type drifting across the screen ---------- */
.band {
  --p: 0;
  position: relative;
  margin-top: var(--space-section);
  padding-block: clamp(3.5rem, 2rem + 4vw, 6rem);
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}
.band__row {
  display: flex;
  gap: 0.35em;
  width: max-content;
  font-size: var(--text-mega);
  white-space: nowrap;
  will-change: transform;
}
.band__row span { display: inline-flex; align-items: center; gap: 0.35em; }
.band__row span::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.09em;
  background: var(--orange);
}
.band__row--a { transform: translate3d(calc(-6% - var(--p) * 28%), 0, 0); }
.band__row--b {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(248, 247, 245, 0.55);
  transform: translate3d(calc(-38% + var(--p) * 28%), 0, 0);
}
.band__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin-top: 2.5rem;
  color: rgba(248, 247, 245, 0.6);
}
.band__pillars span[aria-hidden] { color: var(--orange); }

/* ---------- STORY: pinned three-doors scene ---------- */
.story { --pin: 0; --open: 0; position: relative; height: 340vh; background: var(--white); }
.story__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.story__copy {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-top: var(--header-h);
  max-width: min(34rem, 42%);
}
.story__steps { position: relative; min-height: 15rem; }
.story__step {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
  pointer-events: none;
}
.story[data-stage="1"] .story__step:nth-child(1),
.story[data-stage="2"] .story__step:nth-child(2),
.story[data-stage="3"] .story__step:nth-child(3) {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.story__tag { margin-bottom: 1rem; color: var(--graphite); }
.story__step:last-child .story__tag { color: var(--orange); }
.story__title { font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); margin-bottom: 1.25rem; }
.story__body { max-width: 36ch; color: var(--ink-soft); margin-bottom: 1.5rem; }
.story__meter { display: flex; gap: 0.5rem; margin-bottom: 1.75rem; }
.story__meter span {
  width: 44px;
  height: 4px;
  background: var(--line);
  transition: background var(--duration-normal);
}
.story[data-stage="1"] .story__meter span:nth-child(-n + 1),
.story[data-stage="2"] .story__meter span:nth-child(-n + 2),
.story[data-stage="3"] .story__meter span { background: var(--orange); }

/* the scene: concrete hall, three CSS-built monoliths */
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    var(--grain),
    linear-gradient(90deg, rgba(248, 247, 245, 0.9) 0%, rgba(248, 247, 245, 0) 45%),
    linear-gradient(180deg, #eeede9 0%, #dcdad5 66%, #c7c4bf 66.3%, #e9e7e3 75%, #f4f3f0 100%);
  background-blend-mode: multiply, normal, normal;
}
.scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 6;
  height: 14%;
  background: linear-gradient(0deg, var(--white), rgba(248, 247, 245, 0));
  pointer-events: none;
}
.scene__world {
  position: absolute;
  inset: 0;
  transform: scale(calc(1 + var(--open) * 0.22));
  transform-origin: 81% 60%;
  will-change: transform;
}
.scene__shafts {
  position: absolute;
  inset: -30% -60%;
  z-index: 4;
  background: repeating-linear-gradient(118deg,
      rgba(255, 255, 255, 0) 0 10%,
      rgba(255, 255, 255, 0.16) 10% 15%,
      rgba(255, 255, 255, 0) 15% 26%);
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--pin) * -30%), 0, 0);
  pointer-events: none;
}
.slab {
  position: absolute;
  bottom: 16%;
  z-index: 2;
  background:
    var(--grain),
    linear-gradient(95deg, #1d1c1b 0%, #0e0e0e 55%, #151514 100%);
  background-blend-mode: soft-light, normal;
  transition: opacity 700ms var(--ease-out-expo), filter 700ms var(--ease-out-expo);
}
/* left side face */
.slab::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 16%;
  background: linear-gradient(180deg, #4a4845, #2a2927);
  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 98%);
}
/* cast shadow on the floor */
.slab::after {
  content: "";
  position: absolute;
  left: -150%;
  bottom: -9%;
  width: 170%;
  height: 11%;
  background: linear-gradient(90deg, rgba(11, 11, 11, 0), rgba(11, 11, 11, 0.32));
  clip-path: polygon(0 100%, 88% 0, 100% 0, 100% 100%);
  filter: blur(2px);
}
.slab--a { left: 50%; width: 7%; height: 42%; }
.slab--b { left: 61%; width: 7%; height: 51%; }
.slab--c { left: 74%; width: 14%; height: 62%; }

.story[data-stage="1"] .slab--b,
.story[data-stage="1"] .slab--c { opacity: 0.4; }
.story[data-stage="2"] .slab--a { opacity: 0.22; filter: blur(1px); }
.story[data-stage="2"] .slab--c { opacity: 0.4; }
.story[data-stage="3"] .slab--a,
.story[data-stage="3"] .slab--b { opacity: 0.18; filter: blur(2px); }

.slab__tag {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.9rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--black);
  white-space: nowrap;
  font-size: 0.62rem;
}
.slab__tag::before { content: ""; width: 16px; height: 2px; background: currentColor; }
.slab--c .slab__tag { color: var(--orange); }

/* the doorway in the third slab: light floods in as --open goes 0 → 1 */
.slab__opening {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 14%;
  bottom: 0;
  overflow: hidden;
  background: #151515;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.slab__light {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #7a2000 0%, #e54000 30%, #ff4a00 58%, #ffb28a 86%, #fff5ee 100%);
  transform: scaleX(var(--open));
  transform-origin: right;
}
.scene__spill {
  position: absolute;
  z-index: 1;
  left: 74.5%;
  width: 17%;
  bottom: 0;
  height: 16%;
  background: linear-gradient(180deg, rgba(255, 74, 0, 0.85), rgba(255, 120, 60, 0));
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  filter: blur(4px);
  opacity: var(--open);
}
.scene__halo {
  position: absolute;
  z-index: 3;
  left: 68%;
  top: 18%;
  width: 28%;
  height: 72%;
  background: radial-gradient(closest-side, rgba(255, 90, 20, 0.45), rgba(255, 74, 0, 0));
  mix-blend-mode: screen;
  opacity: var(--open);
  pointer-events: none;
}

/* ---------- PANORAMA: full-bleed image with zoom-out parallax ---------- */
.panorama {
  --p: 0;
  position: relative;
  height: clamp(440px, 85vh, 860px);
  overflow: hidden;
  background: var(--black);
  isolation: isolate;
}
.panorama img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transform: scale(calc(1.3 - var(--p) * 0.25)) translate3d(calc((var(--p) - 0.5) * -4%), 0, 0);
  will-change: transform;
}
.panorama::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(11, 11, 11, 0.85) 0%, rgba(11, 11, 11, 0) 55%);
}
.panorama__caption {
  position: absolute;
  inset: auto 0 clamp(2.5rem, 2rem + 3vw, 5rem) 0;
  color: var(--white);
}
.panorama__caption .dash { margin-bottom: 1.5rem; }
.panorama__caption h2 {
  font-size: clamp(2.5rem, 1rem + 6vw, 7rem);
  transform: translate3d(calc((0.5 - var(--p)) * 12%), 0, 0);
}
.panorama__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  margin-top: 1.5rem;
  color: rgba(248, 247, 245, 0.75);
}
.panorama__labels span::before {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  margin-bottom: 0.6rem;
  background: var(--orange);
}

/* ---------- Small scroll effects used by sections ---------- */
.parallax-img { overflow: hidden; }
.parallax-img img {
  transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * -14%), 0) scale(1.18);
  will-change: transform;
}

/* ---------- CTA: the door opens as you arrive ---------- */
.cta { --e: 0; position: relative; overflow: hidden; background: var(--black); color: var(--white); isolation: isolate; }
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(255, 74, 0, 0) 38%, rgba(255, 74, 0, 0.22) 72%, rgba(255, 74, 0, 0) 100%);
  opacity: var(--e);
}
.cta__visual img {
  clip-path: inset(0 calc((1 - var(--e)) * 48%) 0 calc((1 - var(--e)) * 48%));
}

@media (max-width: 900px) {
  .hero {
    display: block;
    min-height: 0;
    padding-top: calc(var(--header-h) + clamp(15rem, 46svh, 26rem));
    padding-bottom: 6rem;
  }
  .hero__media { inset: 0 0 auto 0; height: calc(var(--header-h) + clamp(17rem, 52svh, 29rem)); }
  .hero__media::after {
    background: linear-gradient(0deg, var(--concrete) 0%, rgba(228, 226, 222, 0) 35%);
  }
  .hero__wall { display: none; }
  .hero__cue { display: none; }

  .pillars { margin-top: -2.5rem; }
  .pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar { grid-template-columns: 1fr; padding: 1rem; border-bottom: 1px solid var(--line); }
  .pillar:nth-child(2) { border-right: 0; }

  .story { height: 300vh; }
  .story__copy { justify-content: flex-end; max-width: none; padding-bottom: 2.5rem; }
  .story__steps { min-height: 15rem; }
  .scene {
    background:
      var(--grain),
      linear-gradient(0deg, rgba(248, 247, 245, 1) 0%, rgba(248, 247, 245, 0.92) 42%, rgba(248, 247, 245, 0) 58%),
      linear-gradient(180deg, #eeede9 0%, #dcdad5 40%, #c7c4bf 40.3%, #e9e7e3 50%, #f4f3f0 100%);
  }
  .slab { bottom: 55%; }
  .slab--a { left: 16%; width: 13%; height: 20%; }
  .slab--b { left: 36%; width: 13%; height: 25%; }
  .slab--c { left: 60%; width: 26%; height: 31%; }
  .scene__spill { left: 61%; width: 30%; bottom: 44%; height: 11%; }
  .scene__halo { left: 50%; top: 18%; width: 48%; height: 42%; }
  .scene__world { transform-origin: 73% 30%; }
  .slab__tag { font-size: 0.5rem; letter-spacing: 0.16em; }
}

@media (max-width: 600px) {
  .band__row--b { -webkit-text-stroke-width: 1px; }
}

/* Motion off: keep the story's state changes, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .hero__media img,
  .hero__content,
  .hero__wall,
  .hero__shafts,
  .scene__world,
  .scene__shafts,
  .band__row--a,
  .band__row--b,
  .panorama img,
  .panorama__caption h2,
  .parallax-img img { transform: none; }
  .hero__content { opacity: 1; }
  .band__row { flex-wrap: wrap; width: auto; white-space: normal; }
  .band__row--b { display: none; }
  .cta__visual img { clip-path: none; }
}