/* ============================================================
   MOTION — "The Steady Hand"  (see motion-spec.md)
   Loaded LAST on every page so it wins the cascade. Piggybacks
   the existing .reveal -> .in IntersectionObserver; no JS deps.
   ============================================================ */

:root{
  --m-ease: cubic-bezier(.22,.75,.25,1);
  --m-slow: 1.4s;
  --m-med: 1s;
  --m-fast: .55s;
  --m-stagger: .15s;
}

/* Page transitions — soft cross-fade between pages (progressive enhancement) */
@view-transition{ navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.35s; }

/* =====================  THE HAIRSTROKE  =====================
   Hairline rules draw in from the left; the numeral/tick inks in
   a beat later. Borders are replaced with absolute ::after lines
   (absolute = safe inside grid/flex parents). */

/* --- treatment list rows (homepage §8 + treatments hub) --- */
.treatlist .treatrow{ border-bottom-color:transparent; position:relative; }
.treatlist .treatrow::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--border); transform:scaleX(0); transform-origin:left;
  transition:transform var(--m-med) var(--m-ease); }
.treatlist.reveal.in .treatrow::after{ transform:scaleX(1); }
.treatlist .treatrow__num{ opacity:0; transform:translateY(6px);
  transition:opacity var(--m-med) var(--m-ease), transform var(--m-med) var(--m-ease); }
.treatlist.reveal.in .treatrow__num{ opacity:1; transform:none; }
.treatlist.reveal.in .treatrow:nth-child(1)::after{ transition-delay:0s; }
.treatlist.reveal.in .treatrow:nth-child(2)::after{ transition-delay:var(--m-stagger); }
.treatlist.reveal.in .treatrow:nth-child(3)::after{ transition-delay:calc(2*var(--m-stagger)); }
.treatlist.reveal.in .treatrow:nth-child(4)::after{ transition-delay:calc(3*var(--m-stagger)); }
.treatlist.reveal.in .treatrow:nth-child(1) .treatrow__num{ transition-delay:calc(var(--m-med)*.5); }
.treatlist.reveal.in .treatrow:nth-child(2) .treatrow__num{ transition-delay:calc(var(--m-med)*.5 + var(--m-stagger)); }
.treatlist.reveal.in .treatrow:nth-child(3) .treatrow__num{ transition-delay:calc(var(--m-med)*.5 + 2*var(--m-stagger)); }
.treatlist.reveal.in .treatrow:nth-child(4) .treatrow__num{ transition-delay:calc(var(--m-med)*.5 + 3*var(--m-stagger)); }

/* --- FAQ items --- */
.faq .faq__item{ border-bottom-color:transparent; position:relative; }
.faq .faq__item::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--border); transform:scaleX(0); transform-origin:left;
  transition:transform var(--m-med) var(--m-ease); }
.faq.reveal.in .faq__item::after{ transform:scaleX(1); }
.faq.reveal.in .faq__item:nth-child(1)::after{ transition-delay:0s; }
.faq.reveal.in .faq__item:nth-child(2)::after{ transition-delay:var(--m-stagger); }
.faq.reveal.in .faq__item:nth-child(3)::after{ transition-delay:calc(2*var(--m-stagger)); }
.faq.reveal.in .faq__item:nth-child(4)::after{ transition-delay:calc(3*var(--m-stagger)); }
.faq.reveal.in .faq__item:nth-child(5)::after{ transition-delay:calc(4*var(--m-stagger)); }
.faq.reveal.in .faq__item:nth-child(6)::after{ transition-delay:calc(5*var(--m-stagger)); }

/* --- method steps (eyebrows page + training day agenda) --- */
.method .method__step{ border-bottom-color:transparent; position:relative; }
.method .method__step::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--border); transform:scaleX(0); transform-origin:left;
  transition:transform var(--m-med) var(--m-ease); }
.method.reveal.in .method__step::after{ transform:scaleX(1); }
.method .method__n{ opacity:0; transition:opacity var(--m-med) var(--m-ease); }
.method.reveal.in .method__n{ opacity:1; transition-delay:calc(var(--m-med)*.5); }
.method.reveal.in .method__step:nth-child(2)::after{ transition-delay:var(--m-stagger); }
.method.reveal.in .method__step:nth-child(3)::after{ transition-delay:calc(2*var(--m-stagger)); }
.method.reveal.in .method__step:nth-child(4)::after{ transition-delay:calc(3*var(--m-stagger)); }
.method.reveal.in .method__step:nth-child(5)::after{ transition-delay:calc(4*var(--m-stagger)); }
.method.reveal.in .method__step:nth-child(6)::after{ transition-delay:calc(5*var(--m-stagger)); }
.method.reveal.in .method__step:nth-child(7)::after{ transition-delay:calc(6*var(--m-stagger)); }

/* --- expect ticks (studio page, desktop ruled grid) --- */
@media (min-width:761px){
  .pticks--row li{ border-bottom-color:transparent; }
  .pticks--row li::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--border); transform:scaleX(0); transform-origin:left;
    transition:transform var(--m-med) var(--m-ease); }
  .pticks--row.reveal.in li::after{ transform:scaleX(1); }
  .pticks--row.reveal.in li:nth-child(2)::after{ transition-delay:var(--m-stagger); }
  .pticks--row.reveal.in li:nth-child(3)::after{ transition-delay:var(--m-stagger); }
  .pticks--row.reveal.in li:nth-child(4)::after{ transition-delay:calc(2*var(--m-stagger)); }
}

/* =====================  THE APPROACH  =====================
   Imagery settles into place: a soft fade with a slow scale from
   1.05 -> 1 (never a wipe — wipes read as late loading). Fires
   when the .reveal parent enters view. */
.meet__media.reveal .video,
.award.reveal .award__media img,
.arrive__media.reveal img,
.method.reveal .slideshow{
  opacity:0; transform:scale(1.05);
  transition:opacity var(--m-slow) var(--m-ease) .1s, transform calc(var(--m-slow)*1.4) var(--m-ease) .1s;
}
.meet__media.reveal.in .video,
.award.reveal.in .award__media img,
.arrive__media.reveal.in img,
.method.reveal.in .slideshow{
  opacity:1; transform:none;
}

/* =====================  THE SETTLE  =====================
   Hero copy on page load: kicker -> headline (baseline mask rise)
   -> em word blurs in last -> lede -> CTAs. Heroes only; scroll
   sections keep the soft reveal. */
@keyframes m-fade{ from{ opacity:0; } }
@keyframes m-rise{ from{ opacity:0; transform:translateY(22px); } }

.hero__copy .eyebrow, .phero__copy .eyebrow{ animation:m-fade var(--m-med) var(--m-ease) both; }
.hero__title, .phero__title{ animation:m-rise var(--m-slow) var(--m-ease) .15s both; }
.hero__lede, .phero__lede{ animation:m-rise var(--m-med) var(--m-ease) .5s both; }
.hero__sublede, .phero__sublede{ animation:m-rise var(--m-med) var(--m-ease) .65s both; }
.hero__cta, .phero__cta{ animation:m-rise var(--m-med) var(--m-ease) .8s both; }
.hero__proof{ animation:m-fade var(--m-med) var(--m-ease) .95s both; }
/* LCP EXEMPTION: hero imagery (homepage arch + interior phero arches) renders INSTANTLY —
   entrance-animating the largest element pushed lab LCP to 6.8s. The copy settles around it. */
.phero__media.reveal{ opacity:1 !important; transform:none !important; }

/* =====================  MICRO  ===================== */
.btn{ position:relative; overflow:hidden; transition:transform var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease); }
.btn::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.18) 50%, transparent 62%);
  transform:translateX(-101%); transition:transform .7s var(--m-ease); }
.btn:hover::after{ transform:translateX(101%); }
.btn:active{ transform:translateY(1px); }

/* mobile menu items stagger in */
@media (max-width:760px){
  .nav .nav__list > li{ opacity:0; transform:translateY(14px);
    transition:opacity var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease); }
  .menu-open .nav .nav__list > li{ opacity:1; transform:none; }
  .menu-open .nav .nav__list > li:nth-child(2){ transition-delay:var(--m-stagger); }
  .menu-open .nav .nav__list > li:nth-child(3){ transition-delay:calc(2*var(--m-stagger)); }
  .menu-open .nav .nav__list > li:nth-child(4){ transition-delay:calc(3*var(--m-stagger)); }
  .menu-open .nav .nav__list > li:nth-child(5){ transition-delay:calc(4*var(--m-stagger)); }
  .menu-open .nav .nav__list > li:nth-child(6){ transition-delay:calc(5*var(--m-stagger)); }
  .menu-open .nav .nav__list > li:nth-child(7){ transition-delay:calc(6*var(--m-stagger)); }
}

/* cards subtly respond: gentle lift + deeper shadow on hover */
.tier, .reason, .pcard, .review-card{ transition:transform var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease); }
.tier:hover, .reason:hover, .pcard:hover, .review-card:hover{ transform:translateY(-3px); }

/* =====================  REDUCED MOTION  ===================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-delay:0ms !important; }
  .treatlist .treatrow::after, .faq .faq__item::after, .method .method__step::after,
  .pticks--row li::after{ transform:scaleX(1) !important; transition:none !important; }
  .treatlist .treatrow__num, .method .method__n{ opacity:1 !important; transform:none !important; }
  .meet__media.reveal .video, .award.reveal .award__media img,
  .arrive__media.reveal img, .method.reveal .slideshow{
    opacity:1 !important; transform:none !important; transition:none !important; }
  .nav .nav__list > li{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn::after{ display:none; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}