/* Scroll and entrance animations.
   Everything is progressive enhancement: without JavaScript (no .js class) all content is simply visible,
   and with prefers-reduced-motion the page is static (see the last block). */

:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal='left']  { transform: translate3d(-48px, 0, 0); }
.js [data-reveal='right'] { transform: translate3d(48px, 0, 0); }
.js [data-reveal='zoom']  { transform: scale(.9); }
.js [data-reveal='fade']  { transform: none; }
.js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

/* the card hover lift keeps its own quick transition; only the reveal (opacity/transform) is delayed */
.js .cap-card[data-reveal] {
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), translate .2s ease, box-shadow .2s ease;
  transition-delay: var(--rd, 0ms), var(--rd, 0ms), 0ms, 0ms;
}

/* Safety net: if main.js never ran (blocked, errored, offline), the page head timer adds .reveal-safe and everything shows */
.reveal-safe [data-reveal], .reveal-safe [data-reveal].is-in { opacity: 1 !important; transform: none !important; }
.reveal-safe .phase::before, .reveal-safe .gantt__bar, .reveal-safe .phase .phase__badge, .reveal-safe .metrics__cell::before { transform: none !important; }

/* ---------- Hero: entrance on load + scroll-linked drift ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes stage-in {
  from { opacity: 0; transform: scale(.88) translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: none; }
}
.hero__copy > * { animation: rise-in .9s var(--ease-out) both; }
.hero__copy > :nth-child(1) { animation-delay: .10s; }
.hero__copy > :nth-child(2) { animation-delay: .20s; }
.hero__copy > :nth-child(3) { animation-delay: .32s; }
.hero__copy > :nth-child(4) { animation-delay: .44s; }
.hero__copy > :nth-child(5) { animation-delay: .54s; }
.hero__copy > :nth-child(6) { animation-delay: .64s; }
.hero__art { animation: stage-in 1.1s var(--ease-out) .25s both; }
.hero__foot { animation: rise-in .9s var(--ease-out) .8s both; }
.nav { animation: nav-in .8s var(--ease-out) .05s both; }
@keyframes nav-in {
  from { opacity: 0; translate: 0 -30px; }
  to   { opacity: 1; translate: 0 0; }
}

/* --hp is 0 at the top and 1 once the hero has scrolled away (set in main.js) */
.hero__copy  { translate: 0 calc(var(--hp, 0) * -26px); opacity: calc(1 - var(--hp, 0) * .55); }
.hero__stage { translate: 0 calc(var(--hp, 0) * 64px);  opacity: calc(1 - var(--hp, 0) * .4); }

/* ---------- Generic parallax (JS sets --py on elements marked data-parallax) ---------- */
[data-parallax] { translate: 0 var(--py, 0px); }

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 80;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--gradient-coral-launch);
  transform: scaleX(var(--sp, 0));
  transform-origin: left center;
}

/* ---------- Section details ---------- */
/* timeline: the dashed connector draws itself down the page as each phase arrives */
.js .phase::before {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1s var(--ease-out) .35s;
}
.js .phase.is-in::before { transform: scaleY(1); }
.js .phase .phase__badge { transform: scale(.4); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) .1s; }
.js .phase.is-in .phase__badge { transform: scale(1); }

/* gantt bars grow from the left, row by row */
.js .gantt__bar {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms + 250ms);
}
.js .gantt.is-in .gantt__bar { transform: none; }

/* metric numbers count up (main.js); the divider rules draw in */
.metrics__cell { position: relative; }
.js .metrics__cell { border-left-color: transparent; }
.js .metrics__cell::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--color-mist-divider);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .8s var(--ease-out) .2s;
}
.js .metrics__cell:first-child::before { display: none; }
.js .metrics__cell.is-in::before { transform: scaleY(1); }
@media (max-width: 860px) { .js .metrics__cell:nth-child(3)::before { display: none; } }
@media (max-width: 460px) { .js .metrics__cell::before { display: none; } .js .metrics__cell { border-left-color: transparent; } }

/* pricing / estimator cards rise with a slight stagger (delay set in main.js) */

/* ---------- Reduced motion: no entrance, no drift, no progress bar ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal].is-in { opacity: 1; transform: none; transition: none; }
  .hero__copy > *, .hero__art, .hero__foot, .nav { animation: none; }
  .hero__copy, .hero__stage { translate: none; opacity: 1; }
  [data-parallax] { translate: none; }
  .scroll-progress { display: none; }
  .js .phase::before, .js .gantt__bar, .js .metrics__cell::before { transform: none; transition: none; }
  .js .phase .phase__badge { transform: none; transition: none; }
  .hero__art .art-cat, .hero__art .art-fg, .mascot-grid__cat, .tryon__phone img { animation: none; }
  .nav { transition: top .01ms; }
}