/* pro.css: styles for pro.js (GSAP/Lenis/Vanta/View Transitions/picture) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2,.7,.1,1); }
.hdr { view-transition-name: site-header; }
.wa-float { view-transition-name: wa-float; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Lenis (from lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* responsive images: picture is layout-transparent */
picture { display: contents; }

/* SplitText masked lines */
[data-split] .sl { padding-bottom: .08em; margin-bottom: -.08em; }

/* hero pinned by ScrollTrigger instead of CSS sticky */
.k-gsap { height: auto !important; }
.k-gsap .k-stage { position: relative; }
.k-gsap .k-band .k-line { will-change: transform, opacity; }

/* story pinned by ScrollTrigger (desktop) */
.story.st-gsap { height: auto; }
.story.st-gsap .story-pin { position: relative; }
.story.st-gsap .story-media { will-change: transform; }

/* 15 steps: horizontal scrubbed track (desktop) */
.h15-sec { overflow: clip; }
.h15-sec .wrap { overflow: visible; }
.steps15.h15 { display: flex; flex-wrap: nowrap; gap: clamp(16px, 1.8vw, 26px); width: max-content; perspective: 1200px; will-change: transform; padding-block: 6px; }
.steps15.h15 .card { flex: none; width: clamp(270px, 24vw, 340px); min-height: 220px; transform-origin: left center; }
.h15-meter { display: flex; align-items: baseline; gap: .5rem; margin-top: 1.2rem; font: 700 .8rem var(--sans); letter-spacing: .18em; }
.h15-meter b { font: 400 2.6rem/1 var(--serif); letter-spacing: 0; color: var(--accent); }
.h15-meter i { flex: 0 1 220px; height: 2px; background: rgba(150,226,200,.22); margin-left: .8rem; align-self: center; overflow: hidden; border-radius: 2px; }
.h15-meter u { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--accent)); transform-origin: left; transform: scaleX(0); }
.sec:not(.dark) .h15-meter b { color: var(--accent-deep); }
.sec:not(.dark) .h15-meter i { background: rgba(15,107,92,.18); }
.sec:not(.dark) .h15-meter u { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }

/* treatment page step rail */
.srail { position: fixed; left: clamp(12px, 2vw, 24px); bottom: clamp(14px, 3vh, 28px); z-index: 40; display: flex; align-items: center; gap: .7rem;
  padding: .55rem .9rem; border-radius: 999px; background: rgba(8,38,34,.88); color: #f6f3ec; font: 700 .78rem var(--sans); letter-spacing: .12em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(207,174,107,.3);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s, transform .35s; }
.srail.on { opacity: 1; transform: none; }
.srail i { width: 90px; height: 2px; background: rgba(150,226,200,.25); border-radius: 2px; overflow: hidden; }
.srail u { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--accent)); transform-origin: left; transform: scaleX(0); transition: transform .4s; }

/* Vanta NET host: gradient fallback (always), net canvas only when .vanta-on */
.vanta-host { position: relative; isolation: isolate;
  background: radial-gradient(65% 55% at 12% 0%, rgba(47,184,154,.24), transparent 70%),
              radial-gradient(45% 45% at 78% 28%, rgba(150,226,200,.12), transparent 70%),
              radial-gradient(55% 50% at 100% 100%, rgba(207,174,107,.18), transparent 70%),
              var(--night); }
.vanta-host > canvas.vanta-canvas { opacity: 0; transition: opacity 1.2s ease; }
.vanta-on > canvas.vanta-canvas { opacity: .55; }
.vanta-host > .wrap { position: relative; z-index: 2; }
.vanta-host > .wrap::before { content: ""; position: absolute; inset: -6% -4%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10,46,41,.82), rgba(10,46,41,.45) 70%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .steps15.h15 { display: grid; width: auto; }
  .srail { display: none; }
}

/* search page filters (Pagefind type/category) */
.sp-filters { display: grid; gap: .6rem; margin: 0 0 1.4rem; }
.sp-filters .chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.sp-filters .chip.on { background: var(--accent); color: var(--ink); border-color: var(--accent); }

/* contrast fixes (axe) */
.story .eyebrow { color: var(--accent); }
.story-steps li { opacity: .8; }
.story-steps li:not(.on) h3 { color: #b9cfc6; }
.story-steps li.on { opacity: 1; }
.cta-box .rnote { color: #a9c6bb; }