/* Persistent cinematic background shared by the portfolio scene and future scenes. */
.cinematic-journey {
  position: fixed;
  inset: 0;
  /* Global background layer: the main page content is intentionally at 6. */
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  background: #061326;
}

.cinematic-journey__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.choice-section__background-fade {
  display: none;
}

body.cinematic-motion .choice-section {
  --choice-cinematic-background-opacity: 1;
  background: transparent;
}

body.cinematic-motion .choice-section__background-fade {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  opacity: var(--choice-cinematic-background-opacity);
  background:
    radial-gradient(circle at 83% 34%, rgba(31, 107, 210, 0.28), transparent 32%),
    radial-gradient(circle at 12% 82%, rgba(217, 38, 50, 0.09), transparent 28%),
    linear-gradient(
      180deg,
      #071938 0%,
      #07172f 12%,
      #061326 25%,
      #081a36 62%,
      #071226 100%
    );
}

body.cinematic-motion .choice-section::before {
  opacity: calc(var(--choice-cinematic-background-opacity) * .22);
}

body.cinematic-motion .choice-section__glow {
  opacity: var(--choice-cinematic-background-opacity);
}

body.cinematic-ready .industries {
  z-index: 9;
  background-color: transparent;
  background-image: none;
}

body.cinematic-ready .legacy-tail {
  position: relative;
  z-index: 9;
}

/* The first section after the portfolio continues over the same persistent
   night scene instead of replacing it with its legacy static background. */
body.cinematic-ready .offer-alt {
  background-color: transparent;
  background-image: none;
}

.team-intro-slot {
  position: relative;
  min-height: 100svh;
}

body.cinematic-ready .team-intro {
  background-color: transparent;
  background-image: none;
}

/* Sequence 02 uses the existing Team and Reviews compositions as stationary
   foreground overlays. Their original internal layouts remain untouched. */
body.cinematic-motion .team-intro-slot {
  min-height: 0;
  height: 0;
}

body.cinematic-motion .team-intro,
body.cinematic-motion .reviews {
  position: fixed;
  inset: 0;
  z-index: 10;
  width: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

body.cinematic-motion .reviews {
  background-color: transparent;
  background-image: none;
}

/* Before & Afters fades into its resting position while sequence 02 keeps
   scrubbing, then returns to normal flow for the FAQ handoff. */
body.cinematic-motion .proof {
  background-color: transparent;
  background-image: none;
}

body.cinematic-motion .proof__stage {
  will-change: transform, opacity;
}

body.cinematic-motion .proof__eyebrow,
body.cinematic-motion .proof__heading,
body.cinematic-motion .proof__compare,
body.cinematic-motion .proof__drag-cue,
body.cinematic-motion .proof__sub {
  opacity: 1;
  transform: none;
  animation: none;
}

body.cinematic-motion .faq {
  background-color: transparent;
  background-image: none;
  margin-top: -12svh;
}

/* The founder outcome panel now follows the FAQ within the same sunrise
   flight; its former static sky is suppressed only for the cinematic path. */
body.cinematic-ready .founder-story {
  z-index: 9;
}

body.cinematic-motion .founder-story-bg {
  opacity: 0;
}

/* Sequence 03 finishes in a short, content-free continuation stage after
   the FAQ has faded. Future 04/05 stages can be inserted in the same place
   before the existing SHAPE section. */
.cinematic-continuation {
  display: none;
}

body.cinematic-motion .cinematic-continuation--03 {
  position: relative;
  display: block;
  height: 145svh;
  background: transparent;
  pointer-events: none;
}

/* SHAPE arrives over the final sunrise frames, already aligned in its final
   viewport position, before returning to normal document flow. */
body.cinematic-motion .shape-intro {
  background-color: transparent;
  background-image: none;
}

body.cinematic-motion .shape-intro__inner {
  will-change: transform, opacity;
}

/* The Growth Plan shares the final sunrise frame with SHAPE. Its own image
   backdrop is removed and the panel fades into a stationary final position. */
body.cinematic-motion .growth-plan {
  background-color: transparent;
  background-image: none;
}

body.cinematic-motion .growth-plan::before {
  opacity: 0;
}

body.cinematic-motion .growth-plan__panel,
body.cinematic-motion .growth-plan.is-visible .growth-plan__panel {
  animation: none;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-journey { transition: none; }
}