/* huru motion: one shared set of movements for every page.
   Load it last, after the page's other stylesheets. site.js adds the classes it uses:
   - .js-reveal on <html> when motion is allowed
   - .is-in on anything marked data-reveal once it scrolls into view
   - .in-view on figure rows, step lists, the timeline and the image block once they scroll into view
   For visitors whose devices ask for reduced motion, none of this runs and everything shows at once.

   To make something new ease into view, add data-reveal to it.
   To stagger a row of items, add data-stagger to their parent (each child then follows the one before). */

/* ---------- 1. ease into view: a soft rise with a touch of blur clearing ---------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1s ease var(--d, 0s), transform 1.1s cubic-bezier(.16, .8, .24, 1) var(--d, 0s), filter 1s ease var(--d, 0s); }
.js-reveal [data-reveal]:where(.is-in) { opacity: 1; transform: none; filter: none; }

/* ---------- 2. the hero arrives in sequence when the page loads ---------- */
@keyframes huru-rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes huru-settle { from { transform: scale(1.06); opacity: 0; } to { transform: none; opacity: 1; } }
.js-reveal :is(.ho-copy, .cer-hero-copy) > * { animation: huru-rise 1.1s cubic-bezier(.16, .8, .24, 1) both; }
.js-reveal :is(.ho-copy, .cer-hero-copy) > :nth-child(2) { animation-delay: .12s; }
.js-reveal :is(.ho-copy, .cer-hero-copy) > :nth-child(3) { animation-delay: .24s; }
.js-reveal :is(.ho-copy, .cer-hero-copy) > :nth-child(4) { animation-delay: .36s; }
.js-reveal :is(.ho-copy, .cer-hero-copy) > :nth-child(5) { animation-delay: .48s; }
/* the hero photo settles gently into place */
.js-reveal .ho-1-img { animation: huru-settle 2.4s cubic-bezier(.16, .8, .24, 1) both; }
.js-reveal .ho-marquee { animation: huru-rise 1.1s cubic-bezier(.16, .8, .24, 1) .6s both; }

/* ---------- 3. lines draw themselves as their section comes into view ---------- */
/* the short teal flicks above figures and steps */
.js-reveal .cer-figure::before { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) + .35s); }
.js-reveal .cer-figures.in-view .cer-figure::before { transform: none; }
.js-reveal .v8-built-steps li.teal-rule::before { background-size: 0 100%; transition: background-size .9s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) + .35s); }
.js-reveal .v8-built-steps.in-view li.teal-rule::before { background-size: 36px 100%; }
.js-reveal .v8-built-steps li.teal-rule:nth-child(2)::before { --d: .15s; }
.js-reveal .v8-built-steps li.teal-rule:nth-child(3)::before { --d: .3s; }
/* the three-step timeline: the line runs across, then each step number appears in turn */
.js-reveal .v3-timeline::before { transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.45, 0, .2, 1) .2s; }
.js-reveal .v3-timeline.in-view::before { transform: none; }
.js-reveal .v3-timeline li { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .9s cubic-bezier(.16, .8, .24, 1); }
.js-reveal .v3-timeline.in-view li { opacity: 1; transform: none; }
.js-reveal .v3-timeline.in-view li:nth-child(1) { transition-delay: .1s; }
.js-reveal .v3-timeline.in-view li:nth-child(2) { transition-delay: .7s; }
.js-reveal .v3-timeline.in-view li:nth-child(3) { transition-delay: 1.3s; }

/* ---------- 4. photos settle as they come into view ---------- */
.js-reveal .v9-image-block .v9-photo img { transform: scale(1.12); transition: transform 2.4s cubic-bezier(.16, .8, .24, 1); }
.js-reveal .v9-image-block.in-view .v9-photo img { transform: scale(1.03); }

/* ---------- 5. slides: each panel's content eases in when its tab is chosen ---------- */
@keyframes huru-fade-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.js-reveal [role="tabpanel"]:not([hidden]) :is(.slp-call, .slp-specs > div, .slp-carousel, .slp-app > *, .slp-data > *) { animation: huru-fade-rise .7s cubic-bezier(.16, .8, .24, 1) both; }
.js-reveal [role="tabpanel"]:not([hidden]) .slp-call:nth-child(2) { animation-delay: .08s; }
.js-reveal [role="tabpanel"]:not([hidden]) .slp-carousel { animation-delay: .04s; }
.js-reveal [role="tabpanel"]:not([hidden]) .slp-specs > div:nth-child(n+2) { animation-delay: .16s; }
.js-reveal [role="tabpanel"]:not([hidden]) .slp-specs > div:nth-child(n+4) { animation-delay: .24s; }

/* ---------- 6. questions: the answer eases open ---------- */
.js-reveal .v8-faq-item[open] > :not(summary) { animation: huru-fade-rise .5s cubic-bezier(.16, .8, .24, 1) both; }

/* ---------- 7. hover: cards lift, photos lean in, buttons nudge ---------- */
/* the two offer boxes stay still: their photos and hairlines already respond */
.slp-trade, .v7-col, .slp-card { transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
.slp-trade:hover, .v7-col:hover, .slp-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(11, 20, 55, .35); }
.slp-card img, .v6-half-visual img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.slp-card:hover img, .v6-half:hover .v6-half-visual img { transform: scale(1.04); }
.btn { transition: background .2s, color .2s, box-shadow .2s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.btn:hover { transform: translateY(-2px); }
.slp-arrow { transition: background .2s, color .2s, box-shadow .2s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.slp-arrow:hover { transform: translateY(-2px); }

/* ---------- reduced motion: everything still, everything shown ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .slp-trade:hover, .v7-col:hover, .slp-card:hover, .btn:hover, .slp-arrow:hover { transform: none; }
}