/* Page-load intro, converted from the Figma Motion frame "Motion · Page load" (3274:5431).
   html.intro      = intro armed (set before first paint): everything that gets revealed starts hidden.
   html.intro-run  = js/intro.js has built the logo pieces; all animations start from this moment.
   The logo is built letter by letter at the right end of the nav, travels to the centre, then to its
   place on the left; the nav links and button follow it in. The page content is visible throughout.
   Easing map: Figma EASE_OUT -> --eo, EASE_IN_AND_OUT -> --eio, EASE_OUT_BACK -> --eob. */

:root {
  --eo: cubic-bezier(0, 0, .58, 1);
  --eio: cubic-bezier(.42, 0, .58, 1);
  --eob: cubic-bezier(.175, .885, .32, 1.275);
}


/* ---- start states ---- */
html.intro .nav-logo-img { visibility: hidden; }
html.intro .nav-logo { opacity: 0; transform: translateX(1255px); }
html.intro .nav-link, html.intro .nav-actions .lang-toggle, html.intro .nav-actions .btn { opacity: 0; }
html.intro .lp { position: absolute; opacity: 0; }
html.intro .lp img { display: block; width: 100%; height: 100%; }
html:not(.intro) .lp { display: none; }

/* ---- logo pieces (positions inside the 225 x 30 wordmark box) ---- */
.lp-vl { left: 13.54px; top: 2.71px; width: 13px; height: 21px; }
.lp-vr { left: 25.95px; top: 2.71px; width: 13px; height: 21px; }
.lp-al { left: 41.03px; top: 2.71px; width: 13px; height: 21px; }
.lp-ar { left: 53.55px; top: 2.71px; width: 13px; height: 21px; }
.lp-l  { left: 71.14px; top: 2.71px; width: 18px; height: 21px; }
.lp-e  { left: 94.24px; top: 2.71px; width: 20px; height: 21px; }
.lp-e1 { left: 93.01px; top: 4.98px; width: 21px; height: 7px; }
.lp-e2 { left: 91.83px; top: 14.38px; width: 23px; height: 7px; }
.lp-e3 { left: 93.01px; top: 6.05px; width: 23px; height: 9px; }
.lp-e4 { left: 94.21px; top: 11.64px; width: 7px; height: 3px; }
.lp-n  { left: 120.01px; top: 2.71px; width: 24px; height: 21px; }
.lp-t  { left: 149.02px; top: 2.71px; width: 24px; height: 21px; }
.lp-o  { left: 176.99px; top: 2.42px; width: 26px; height: 22px; }
.lp-dot { left: 206.32px; top: 19.93px; width: 4px; height: 4px; transform-origin: 50% 50%; }

/* ---- keyframes ---- */
@keyframes in-logo-travel {              /* 4.35 s: 1255 -> 1223 (0.15-0.6) hold -> 611.5 (1.15-2.75) hold -> 0 (3.55-4.35) */
  0%      { transform: translateX(1255px); animation-timing-function: linear; }
  3.448%  { transform: translateX(1255px); animation-timing-function: var(--eo); }
  13.793% { transform: translateX(1223px); animation-timing-function: linear; }
  26.437% { transform: translateX(1223px); animation-timing-function: var(--eio); }
  63.218% { transform: translateX(611.5px); animation-timing-function: linear; }
  81.609% { transform: translateX(611.5px); animation-timing-function: var(--eio); }
  100%    { transform: translateX(0); }
}
@keyframes in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes in-vl { from { transform: translate(-14.98px, -21.25px); } to { transform: translate(0, 0); } }
@keyframes in-vr { from { transform: translate(12.04px, -23.05px); } to { transform: translate(0, 0); } }
@keyframes in-al { from { transform: translate(-12.49px, 22.8px); } to { transform: translate(0, 0); } }
@keyframes in-ar { from { transform: translate(12.57px, 22.76px); } to { transform: translate(0, 0); } }
@keyframes in-dot { from { transform: scale(.2); } to { transform: scale(1); } }
@keyframes in-rise6  { from { opacity: 0; transform: translateY(6px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes in-rise14 { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes in-rise18 { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes in-rise24 { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes in-hero-bg { from { background-color: transparent; } to { background-color: #fff; } }

/* ---- timeline (all delays are seconds from the moment html.intro-run is set) ---- */
html.intro-run .nav-logo {
  animation: in-logo-travel 4.35s linear both, in-fade .35s var(--eo) .15s both;
}
html.intro-run .lp-vl { animation: in-vl .5s var(--eob) .25s both, in-fade .06s linear .25s both; }
html.intro-run .lp-vr { animation: in-vr .5s var(--eob) .25s both, in-fade .06s linear .25s both; }
html.intro-run .lp-al { animation: in-al .5s var(--eob) .55s both, in-fade .06s linear .55s both; }
html.intro-run .lp-ar { animation: in-ar .5s var(--eob) .55s both, in-fade .06s linear .55s both; }
html.intro-run .lp-l  { animation: in-fade .18s var(--eo) 1.37s both; }
html.intro-run .lp-e, html.intro-run .lp-e1, html.intro-run .lp-e2, html.intro-run .lp-e3, html.intro-run .lp-e4 {
  animation: in-fade .18s var(--eo) 1.62s both;
}
html.intro-run .lp-n  { animation: in-fade .18s var(--eo) 1.87s both; }
html.intro-run .lp-t  { animation: in-fade .18s var(--eo) 2.12s both; }
html.intro-run .lp-o  { animation: in-fade .18s var(--eo) 2.37s both; }
html.intro-run .lp-dot { animation: in-dot .25s var(--eob) 2.95s both, in-fade .1s var(--eo) 2.95s both; }

html.intro-run .nav-link:nth-child(1) { animation: in-rise6 .55s var(--eo) 4.45s both; }
html.intro-run .nav-link:nth-child(2) { animation: in-rise6 .55s var(--eo) 4.55s both; }
html.intro-run .nav-link:nth-child(3) { animation: in-rise6 .55s var(--eo) 4.65s both; }
html.intro-run .nav-link:nth-child(4) { animation: in-rise6 .55s var(--eo) 4.75s both; }
html.intro-run .nav-actions .lang-toggle { animation: in-rise6 .55s var(--eo) 4.85s both; }
html.intro-run .nav-actions .btn { animation: in-rise6 .55s var(--eo) 4.95s both; }

/* The page itself is visible from the first paint (2026-09-09): only the wordmark travels and the nav
   links and button follow it in. The hero, sections and footer no longer wait for the logo. */