/* =================================================================
   Scroll-driven animations homepage
   ================================================================= */

/* ---------- Hero parallax ---------- */
.hero__media { overflow: hidden; }
.hero__media img {
  will-change: object-position;
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center var(--hero-pos, 55%);
}

/* ---------- Process section: progressive vertical line ---------- */
.process {
  position: relative;
}
.process__step {
  position: relative;
  overflow: hidden;
}
.process__step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--amber);
  transform: scaleY(var(--p-fill, 0));
  transform-origin: top;
  transition: transform .25s var(--ease);
}
/* Animated right edge of the closed box mirrors the per-step left lines.
   Driven by --p-fill on .process (mirrors last step's progress). */
.process::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--amber);
  transform: scaleY(var(--p-fill, 0));
  transform-origin: top;
  transition: transform .25s var(--ease);
  pointer-events: none;
}

/* ---------- Mobile-only: single continuous left + right lines spanning
     the entire stacked column. The per-step ::after is hidden so we
     don't get broken segments, and the container grows two animated
     edges instead. ---------- */
@media (max-width: 900px) {
  .process__step::after { display: none; }
  .process::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--amber);
    transform: scaleY(var(--p-fill, 0));
    transform-origin: top;
    transition: transform .25s var(--ease);
    pointer-events: none;
    z-index: 1;
  }
  /* .process::after already exists for the right edge reuse it as-is. */
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__media img { transform: none !important; }
  .process__step::after { transform: scaleY(1); }
  .process::after { transform: scaleY(1); }
}