/* EMBERHOUSE / CONTINUOUS FLOW — REVIEW EXPERIMENT
 * Entire feature is scoped behind html.emg-flow-enabled.
 * Disable at any time with ?flow=off, or use the untouched combined preview.
 * No scroll-snap, scroll hijacking, pinning, forced video loading or logo edits.
 */
html.emg-flow-enabled body.emg-home-details main {
  isolation: isolate;
}

/* One recurring copper motif connects chapters without changing their layout. */
html.emg-flow-enabled body.emg-home-details .emg-flow-chapter {
  position: relative;
}
html.emg-flow-enabled body.emg-home-details .emg-flow-seam {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  height: 2px;
  width: clamp(50px, 6vw, 100px);
  top: 0;
  left: max(24px, 6vw);
  border-radius: 2px;
  background: #C4743E;
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: .85;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
html.emg-flow-enabled body.emg-home-details .emg-flow-chapter.emg-flow-visible > .emg-flow-seam {
  transform: scaleX(1);
}
/* The original copper divider already owns this boundary. */
html.emg-flow-enabled body.emg-home-details .emg-connect > .emg-flow-seam,
html.emg-flow-enabled body.emg-home-details .emg-connect-finale > .emg-flow-seam {
  display: none;
}

/* The hero title exits like a title card as the showreel approaches. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html.emg-flow-enabled body.emg-home-details .home-hero__copy {
    translate: 0 var(--emg-flow-hero-shift, 0px);
    opacity: var(--emg-flow-hero-opacity, 1);
    will-change: auto;
  }
  html.emg-flow-enabled body.emg-home-details .home-hero .home-explore-link {
    opacity: var(--emg-flow-explore-opacity, 1);
  }
}

/* Text is always fully visible when the experiment is off or JS isn't ready. */
@media (prefers-reduced-motion: no-preference) {
  html.emg-flow-enabled.emg-flow-ready body.emg-home-details .emg-flow-reveal {
    opacity: 0;
    translate: 0 24px;
    transition:
      opacity .72s cubic-bezier(.16,1,.3,1),
      translate .82s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--emg-flow-delay, 0ms);
  }
  html.emg-flow-enabled.emg-flow-ready body.emg-home-details .emg-flow-reveal.emg-flow-entered {
    opacity: 1;
    translate: 0 0;
  }
  /* Give the final sign-off a held beat: the logo, tagline, and buttons appear in sequence. */
  html.emg-flow-enabled.emg-flow-ready body.emg-home-details .emg-connect-finale .emg-flow-reveal,
  html.emg-flow-enabled.emg-flow-ready body.emg-home-details .emg-connect__closing .emg-flow-reveal {
    translate: 0 17px;
  }
  html.emg-flow-enabled.emg-flow-ready body.emg-home-details .emg-connect-finale .emg-flow-entered,
  html.emg-flow-enabled.emg-flow-ready body.emg-home-details .emg-connect__closing .emg-flow-entered {
    translate: 0 0;
  }
}

/* Subtle continuity for the narrative text, without replacing the original colors. */
html.emg-flow-enabled body.emg-home-details .emg-connect__statement {
  position: relative;
}
html.emg-flow-enabled body.emg-home-details .emg-flow-chapter a:focus-visible {
  outline-offset: 6px;
}

/* Protect motion on touch devices: only short entrance movements remain. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.emg-flow-enabled.emg-flow-ready body.emg-home-details .emg-flow-reveal {
    translate: 0 11px;
    transition-duration: .48s, .56s;
  }
  html.emg-flow-enabled body.emg-home-details .emg-flow-seam {
    width: 42px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.emg-flow-enabled body.emg-home-details .emg-flow-reveal {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
  html.emg-flow-enabled body.emg-home-details .emg-flow-seam {
    transform: none !important;
    transition: none !important;
  }
  html.emg-flow-enabled body.emg-home-details .home-hero__copy {
    translate: none !important;
    opacity: 1 !important;
  }
}