/* ==========================================================================
   SCENES — the three scroll-scrubbed service animations on the home page.
   Each .scene is a tall scroll track; .scene__sticky holds a viewport-height
   stage that stays put while the timeline scrubs through its stages.
   ========================================================================== */

.scene {
  position: relative;
  height: 340vh;              /* scroll track length — controls pacing */
  background: var(--bg);
  color: var(--fg);
}

.scene--light { --bg: var(--c-white); --fg: var(--c-ink); }
.scene--mid   { --bg: var(--c-mid);   --fg: var(--c-ink); }
.scene--deep  { --bg: var(--c-deep);  --fg: var(--c-bone); }

.scene__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  padding: 5.5rem var(--pad-x) 3rem;
  overflow: hidden;
}

/* --- Copy column ------------------------------------------------------- */

.scene__copy { position: relative; z-index: 2; }

.scene__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
  opacity: 0.7;
}

.scene__eyebrow::before {
  content: "";
  width: clamp(24px, 4vw, 52px);
  height: 1px;
  background: currentColor;
}

.scene__title {
  font-size: clamp(1.8rem, 3.4vw, 3.4rem);
  margin-bottom: 1.2rem;
  max-width: 14ch;
}

/* Stage captions occupy the same box and cross-fade as the timeline runs. */
.scene__steps {
  position: relative;
  min-height: 8.5rem;
}

.scene__step {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.scene__step-n {
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0.55;
}

.scene__step-t {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.35rem);
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.scene__step-b {
  font-size: 0.88rem;
  line-height: 1.6;
  opacity: 0.8;
  max-width: 34ch;
}

/* Progress rail showing position through the scene's stages. */
.scene__rail {
  display: flex;
  gap: 6px;
  margin-top: 1.8rem;
}

.scene__rail span {
  width: 34px;
  height: 2px;
  background: currentColor;
  opacity: 0.25;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.scene__rail span.is-on { opacity: 1; }

.scene__cta { margin-top: 1.6rem; }

/* On the deep and mid scenes the pill sits on a dark ground; on the light
   scene it needs the inverse treatment to stay visible. */
.scene--light .scene__cta {
  background: var(--c-deep);
  color: var(--c-bone);
}

/* --- Stage (the artwork) ---------------------------------------------- */

.scene__stage {
  position: relative;
  height: min(74vh, 620px);
  display: grid;
  place-items: center;
  /* Perspective gives the flat SVG artwork real depth when it tilts. */
  perspective: 1400px;
}

.scene__art {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
  overflow: visible;
}

/* A wide scene gives the footage more room than the two-column split, since
   the clip carries the visual rather than supporting it. */
.scene--wide .scene__sticky {
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
}

/* --- Full-bleed scene --------------------------------------------------
   The footage fills the whole viewport edge to edge and the copy sits over
   it, rather than sharing a two-column split. */

.scene--bleed .scene__sticky {
  display: block;
  padding: 0;
}

/* The stage fills the whole viewport — the section is meant to read as a
   full screen of footage. */
.scene--bleed .scene__stage {
  position: absolute;
  inset: 0;
  height: 100%;
  perspective: none;
  /* The clips sit on light studio backgrounds, so any letterboxing blends
     rather than showing as black bars. */
  background: var(--c-white);
}

.scene--bleed .scene__video,
.scene--bleed .scene__fallback,
.scene--bleed .scene__fallback img {
  object-fit: contain;
  border-radius: 0;
}

/* Scrim: the copy has to stay readable over whatever frame is showing.
   White, to match the clips' backgrounds and the lighter palette. */
.scene--bleed .scene__sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.88) 22%,
    rgba(255, 255, 255, 0.35) 42%,
    rgba(255, 255, 255, 0) 60%
  );
}

.scene--bleed .scene__copy {
  position: absolute;
  z-index: 2;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: clamp(2rem, 6vh, 4.5rem);
  max-width: 52ch;
  color: var(--c-ink);
}

.scene--bleed .scene__steps { min-height: 7.5rem; }

@media (max-width: 900px) {
  .scene--bleed .scene__steps { min-height: 9.5rem; }
  .scene--bleed .scene__copy { bottom: 1.5rem; }
}

.scene__fallback,
.scene__fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Scrubbed video, when a clip has been supplied for this scene. Hidden until
   the file actually loads, so the SVG stays visible if it is missing. */
.scene__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}

.scene.has-video .scene__video { display: block; }
.scene.has-video .scene__art,
.scene.has-video .scene__fallback { display: none; }

/* The footage fills its stage rather than letterboxing inside it. */
.scene--wide .scene__video {
  object-fit: cover;
  border-radius: var(--radius);
}

@media (max-width: 900px) {
  .scene { height: 300vh; }
  .scene__sticky {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1rem;
    padding-top: 5rem;
  }
  .scene__stage { height: 100%; min-height: 0; }
  .scene__steps { min-height: 7rem; }
  .scene__title { max-width: none; }
}

/* --- Services intro ---------------------------------------------------- */

.services-intro__title {
  font-size: var(--fs-h2);
  max-width: 20ch;
  margin-bottom: 1.4rem;
}

.services-intro__body {
  max-width: 46ch;
  opacity: 0.8;
}