/* Motion layer (rim light).
   One orchestrated moment and nothing ambient: when a page loads, its hero
   plays a single sequence. On home the portrait "lights up" out of the black
   while the headline rises word by word, then the lead and the actions follow.
   Everything else moves only in answer to the visitor: page-to-page cross-fade,
   the mobile menu, FAQ answers, and hover/focus colour (in site.css).

   The hero is hidden only while <html> has .js-motion and motion.js hasn't
   finished setting up (.motion-ready). js/motion-init.js sets .js-motion in
   <head> and removes it again if motion.js never arrives. Uses site.css tokens. */

:root{interpolate-size:allow-keywords}

/* Page-to-page: a quiet cross-fade; the header stays put. */
@view-transition{navigation:auto}
.top{view-transition-name:site-header}
::view-transition-old(root){animation:vt-fade-out var(--dur-fast) ease both}
::view-transition-new(root){animation:vt-fade-in var(--dur-base) ease both}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}

/* The hero sequence. motion.js sets --d (delay) on each hero child and --w on
   each headline word. */
.js-motion:not(.motion-ready) :is(.home-hero-content,.hero)>*,
.js-motion:not(.motion-ready) .home-hero-photo img{opacity:0}
.motion-ready :is(.home-hero-content,.hero)>:not(h1){animation:hero-rise var(--dur-hero) var(--ease-out) var(--d,0ms) both}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.word>span{display:inline-block}
.motion-ready .word>span{animation:word-rise var(--dur-hero) var(--ease-out) calc(var(--d,0ms) + var(--w,0) * 55ms) both}
.js-motion:not(.motion-ready) .home-hero-photo .fx-fluted{opacity:0}
.motion-ready .home-hero-photo .fx-fluted{animation:fluted-on var(--dur-light-on) var(--ease-out) both}
.motion-ready .home-hero-photo img{animation:light-on var(--dur-light) var(--ease-out) 200ms both}
@keyframes fluted-on{from{opacity:0}to{opacity:1}}
@keyframes hero-rise{from{opacity:0;translate:0 18px}}
@keyframes word-rise{from{translate:0 105%}}
@keyframes light-on{from{opacity:0;filter:brightness(.1) saturate(.3);scale:1.03}to{opacity:1;filter:none;scale:1}}

/* "Ukratko": the light behind the fluted glass drifts very slowly. This is the
   only ambient motion on the page; the hero light stays still. */
.summary-band>.fx-fluted:before{animation:band-drift var(--dur-drift) ease-in-out infinite alternate}
@keyframes band-drift{0%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(-5%,3%) rotate(6deg) scale(1.08)}100%{transform:translate(4%,-3%) rotate(-4deg) scale(1.04)}}

/* "Ukratko" quote: motion.js wraps each rendered line in .ql > span; the lines
   wait below their mask and rise in one by one once the quote is in view. */
.ql{display:block;overflow:hidden;padding:0 .12em .12em;margin:0 -.12em -.12em}
.ql>span{display:block;translate:0 110%}
.summary-quote.is-in .ql>span{animation:line-rise var(--dur-line) var(--ease-out) calc(var(--l,0) * var(--line-stagger)) both}
@keyframes line-rise{from{translate:0 110%}to{translate:0 0}}

/* Panels reveal once as they enter the viewport: out of a blur, rising into
   place. motion.js adds .is-in and staggers panels that enter together by
   --stagger (80ms). */
.js-motion :is(.pillars,.principles2>.principle,.venture,.talk-card,.text-card,.proof-grid,.cta-panel){opacity:0}
.js-motion :is(.pillars,.principles2>.principle,.venture,.talk-card,.text-card,.proof-grid,.cta-panel).is-in{animation:blur-rise var(--dur-reveal) var(--ease-out) var(--d,0ms) both}
@keyframes blur-rise{from{opacity:0;translate:0 40px;filter:blur(12px)}to{opacity:1;translate:0 0;filter:none}}

/* Footer: the big wordmark rises up out of the panel's bottom edge when it
   comes into view (motion.js adds .is-in). */
.js-motion .footer-wordmark svg{translate:0 40%;opacity:0}
.js-motion .footer-wordmark.is-in svg{animation:wordmark-rise 1200ms var(--ease-out) both}
@keyframes wordmark-rise{from{translate:0 40%;opacity:0}to{translate:0 0;opacity:1}}

/* Mobile menu: fades in when opened. */
@media(max-width:900px){
  .nav-toggle-input:checked~.nav-links{animation:menu-in var(--dur-base) var(--ease-out) both}
}
@keyframes menu-in{from{opacity:0;translate:0 -6px}}

/* FAQ answers open and close smoothly (Chromium; others open instantly). */
.consulting-faq details::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size var(--dur-base) var(--ease-out),opacity var(--dur-base) ease,content-visibility var(--dur-base) allow-discrete}
.consulting-faq details[open]::details-content{block-size:auto;opacity:1}
.consulting-faq summary:after{transition:transform var(--dur-base) var(--ease-out)}

/* Reduced motion: everything appears immediately. */
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*:before,*:after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important}
  .summary-band>.fx-fluted:before{animation:none!important}
}