/* Site-wide motion layer for every Kairo page. Canonical tokens; every effect has a still state. */

/* Smooth scroll: Lenis owns the easing, so the native smooth behaviour steps aside. */
html.lenis { scroll-behavior:auto; }

/* Header settles into a slimmer floating bar after the hero. */
.site-header { transition:top .35s ease; }
.site-header .nav-shell { transition:background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, min-height .35s ease, padding .35s ease; }
.site-header.is-scrolled { top:10px; }
.site-header.is-scrolled .nav-shell { min-height:58px; padding-block:6px; }
.site-header .brand-logo { transition:width .35s ease; }
.site-header.is-scrolled .brand-logo { width:124px; }

/* Line-by-line headline reveals. The hero runs on load, sections on scroll. */
.hp-line { display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.hp-line-in { display:block; }
.hp-hero-title .hp-line-in { animation:hp-line-up 1.05s cubic-bezier(.2,.8,.2,1) both .08s; }
.hp-hero-title .hp-line:nth-child(2) .hp-line-in { animation-delay:.22s; }
.hp-lines .hp-line-in { transform:translateY(108%); transition:transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * .1s); }
.hp-lines.is-in .hp-line-in { transform:none; }
.hp-enter { animation:hp-fade-up .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(.25s + var(--d,0) * .09s); }
.hp-fade { opacity:0; translate:0 22px; transition:opacity .8s ease, translate .9s cubic-bezier(.2,.8,.2,1); transition-delay:calc(.1s + var(--fade-i,0) * .1s); }
.hp-fade.is-in { opacity:1; translate:0 0; }
@keyframes hp-line-up { from { transform:translateY(108%); } to { transform:none; } }
@keyframes hp-fade-up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* Buttons lean toward the pointer. */
.hp-magnetic { translate:var(--mx,0px) var(--my,0px); transition-property:transform, background, box-shadow, color, translate; transition-duration:.2s; transition-timing-function:ease-out; }

/* Video invitation and dialog. */
.hp-video-link { display:inline-flex; align-items:center; gap:13px; padding:4px 10px 4px 4px; border-radius:40px; color:var(--ink); }
.hp-video-play { position:relative; width:48px; height:48px; flex:none; display:grid; place-items:center; border-radius:50%; background:#fff; box-shadow:0 10px 26px rgba(81,57,216,.18), inset 0 0 0 1px rgba(112,79,245,.2); transition:background .25s; }
.hp-video-play::before { content:''; width:0; height:0; margin-left:4px; border-left:13px solid var(--purple); border-top:8px solid transparent; border-bottom:8px solid transparent; transition:border-color .25s; }
.hp-video-play::after { content:''; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid rgba(112,79,245,.35); animation:hp-ring 2.6s ease-out infinite; }
.hp-video-link:hover .hp-video-play,.hp-video-link:focus-visible .hp-video-play { background:var(--purple); }
.hp-video-link:hover .hp-video-play::before,.hp-video-link:focus-visible .hp-video-play::before { border-left-color:#fff; }
.hp-video-label strong { display:block; font:700 14px/1.3 var(--body); }
.hp-video-label small { display:block; font:11px/1.4 var(--mono); color:var(--muted); }
@keyframes hp-ring { from { scale:.92; opacity:1; } to { scale:1.4; opacity:0; } }
.hp-video-dialog { width:min(1120px, calc(100vw - 32px)); max-width:none; max-height:none; padding:0; border:0; background:transparent; overflow:visible; }
.hp-video-dialog::backdrop { background:rgba(15,19,33,.84); backdrop-filter:blur(8px); }
.hp-video-dialog[open] { animation:hp-video-in .45s cubic-bezier(.2,.8,.2,1); }
.hp-video-frame { position:relative; border-radius:18px; overflow:hidden; background:#000; box-shadow:0 40px 110px rgba(0,0,0,.45); }
.hp-video-frame video { display:block; width:100%; aspect-ratio:16/9; background:#000; }
.hp-video-close { position:absolute; top:12px; inset-inline-end:12px; z-index:2; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.94); color:var(--ink); font-size:26px; line-height:1; cursor:pointer; }
.hp-video-close:focus-visible { outline:3px solid var(--lime); outline-offset:3px; }
html.hp-video-open { overflow:hidden; }
@keyframes hp-video-in { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:none; } }

/* Page heroes enter on load (CSS only, so there is no flash before scripts run). */
:is(.product-hero, .inner-hero, .resources-hero, .insights-hero, .growth-hub-hero, .trust-hero, .article-hero, .legal-hero, .ga-hero) :is(h1, .publication-lockup strong) { animation:sm-rise 1.1s cubic-bezier(.2,.8,.2,1) both .1s; }
:is(.product-hero, .inner-hero, .resources-hero, .insights-hero, .growth-hub-hero, .trust-hero, .article-hero, .legal-hero, .ga-hero) :is(.eyebrow, .ga-kicker, .article-back, .article-meta, .resource-switcher, .publication-lockup > span, .growth-hub-lockup > p) { animation:hp-fade-up .8s cubic-bezier(.2,.8,.2,1) both; }
:is(.product-hero, .inner-hero, .resources-hero, .insights-hero, .growth-hub-hero, .trust-hero, .article-hero, .legal-hero, .ga-hero) :is(h1 ~ p, .resources-hero-grid > p, .publication-lockup > p, .growth-hub-lockup > span, .article-deck, .ga-hero-deck) { animation:hp-fade-up .9s cubic-bezier(.2,.8,.2,1) both .4s; }
:is(.product-hero, .inner-hero, .trust-hero, .article-hero, .ga-hero) :is(.hero-actions, .article-byline, .ga-hero-actions) { animation:hp-fade-up .9s cubic-bezier(.2,.8,.2,1) both .55s; }
.ga-hero :is(.ga-hero-note, .ga-hero-assurance) { animation:hp-fade-up .9s cubic-bezier(.2,.8,.2,1) both .7s; }
:is(.neo-constellation, .partnership-orbit, .hero-statement-card, .trust-status, .ga-hero-visual) { animation:sm-art-in 1.3s cubic-bezier(.2,.8,.2,1) both .3s; }
.thank-you-card > * { animation:hp-fade-up .8s cubic-bezier(.2,.8,.2,1) both; }
.thank-you-card > :nth-child(2) { animation-delay:.1s; }
.thank-you-card > :nth-child(3) { animation-delay:.25s; }
.thank-you-card > :nth-child(n+4) { animation-delay:.4s; }
@keyframes sm-rise { from { clip-path:inset(0 0 100% 0); transform:translateY(34px); } to { clip-path:inset(-25% -5% -30% -5%); transform:none; } }
@keyframes sm-art-in { from { opacity:0; transform:translateY(26px) scale(.96); } to { opacity:1; transform:none; } }

/* The site's existing reveal blocks use the same easing as the homepage. */
.reveal { transform:translateY(28px) scale(.985); transition:opacity .8s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { transform:none; }

/* Dark sections: a soft light follows the pointer. */
.sm-spot { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .5s; mix-blend-mode:screen; background:radial-gradient(460px circle at var(--spot-x,50%) var(--spot-y,50%), rgba(174,152,255,.14), transparent 70%); }
.sm-spot.is-on { opacity:1; }

/* Reading progress on articles and policies. */
.sm-progress { position:fixed; top:0; left:0; right:0; z-index:300; height:3px; background:linear-gradient(90deg,var(--purple,#704ff5),var(--lime,#c9f45a)); transform:scaleX(var(--p,0)); transform-origin:left; pointer-events:none; }
html[dir=rtl] .sm-progress { transform-origin:right; background:linear-gradient(270deg,var(--purple,#704ff5),var(--lime,#c9f45a)); }

@media (prefers-reduced-motion: reduce) {
  .hp-lines .hp-line-in,.hp-fade { transform:none; translate:none; opacity:1; }
  :is(.product-hero, .inner-hero, .resources-hero, .insights-hero, .growth-hub-hero, .trust-hero, .article-hero, .legal-hero, .ga-hero) *, :is(.neo-constellation, .partnership-orbit, .hero-statement-card, .trust-status, .ga-hero-visual), .thank-you-card > *, .hp-video-play::after, .hp-video-dialog[open] { animation:none!important; }
  .site-header, .site-header .nav-shell, .site-header .brand-logo, .hp-magnetic { transition:none; }
}