/* NOTE: StyleX classes carry ID-level specificity (:not(#\#)), so state rules
   below that override a StyleX-set property use !important on purpose.

   Global rules StyleX can't express (element resets, pseudo-elements, SVG
   internals, descendant state selectors) and the JS-driven animation states.
   Component styling lives in frontend/src/styles.js. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
::selection { background: #ffd83d; color: #0a0e2a; }
:focus-visible { outline: 3px solid #ffd83d; outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 2000; background: #ffd83d; color: #0a0e2a; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 16px; }
.lucide { width: 24px; height: 24px; stroke-width: 1.7; }

/* ---------- Page-load sequence (the one orchestrated moment) ----------
   1. loader wipes up  2. blueprint lines draw  3. headline words rise
   4. slab bar sweeps in  5. figure and buttons settle */
body.is-loading { overflow: hidden; }
body.is-loaded #loader { clip-path: inset(0 0 100% 0) !important; }

.plan path, .plan circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
body.is-loaded .plan path, body.is-loaded .plan circle {
  transition: stroke-dashoffset 1.6s cubic-bezier(.65,0,.2,1) calc(.3s + var(--i) * .12s);
  stroke-dashoffset: 0;
}
.plan-labels { opacity: 0; transition: opacity .8s ease 1.5s; }
body.is-loaded .plan-labels { opacity: 1; }

.split .w, .split-scroll .w { display: inline-block; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.2,.9,.1,1); }
body.is-loaded .split .w, .split-scroll.in .w { transform: none; }

.slab { clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.65,0,.2,1) .95s, width .6s cubic-bezier(.65,0,.2,1); }
body.is-loaded .slab { clip-path: inset(0 0 0 0); }
#slab-word.out { animation: word-out .32s cubic-bezier(.65,0,.2,1) forwards; }
#slab-word.in-word { animation: word-in .5s cubic-bezier(.2,.9,.1,1) forwards; }
@keyframes word-out { to { transform: translateY(-100%); opacity: 0; } }
@keyframes word-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Logo draws itself ---------- */
.logo-draw path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: ld-draw 1.4s cubic-bezier(.65,0,.2,1) .1s forwards; }
.logo-draw .ld-code { animation-delay: .5s; }
.logo-draw .ld-slash { animation-delay: .9s; }
.logo-draw .ld-spark { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: ld-pop .5s cubic-bezier(.3,1.7,.5,1) 1.2s forwards; }
a:hover > .logo-draw .ld-spark { animation: ld-pop .5s cubic-bezier(.3,1.7,.5,1) forwards, ld-orbit 1s cubic-bezier(.65,0,.2,1); }
@keyframes ld-draw { to { stroke-dashoffset: 0; } }
@keyframes ld-pop { to { transform: scale(1); } }
@keyframes ld-orbit { 50% { transform: scale(1.8); } }

/* ---------- Navigation: light on blue/ink sections, solid paper on paper ---------- */
#nav.is-solid { background: rgba(238,240,246,.92) !important; color: #0a0e2a !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 #d5d9ea !important; }
#nav.is-hidden { transform: translateY(-100%) !important; }
body.menu-open #nav { color: #fff !important; background: transparent !important; box-shadow: none !important; transform: none !important; }
body.menu-open #drawer { clip-path: circle(150% at calc(100% - 44px) 42px) !important; }
body.menu-open { overflow: hidden; }
#drawer a { opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .6s cubic-bezier(.2,.9,.1,1); }
body.menu-open #drawer a { opacity: 1; transform: none; }
body.menu-open #drawer a:nth-child(1) { transition-delay: .2s; }
body.menu-open #drawer a:nth-child(2) { transition-delay: .26s; }
body.menu-open #drawer a:nth-child(3) { transition-delay: .32s; }
body.menu-open #drawer a:nth-child(4) { transition-delay: .38s; }

/* ---------- Buttons: fill sweeps across on hover ---------- */
a:hover > .bf, button:hover > .bf, a:focus-visible > .bf { transform: translateX(0) !important; }
.ghost:hover { color: #2a2af5 !important; }
button[type=submit]:hover { color: #fff !important; }

/* ---------- Services index rows ---------- */
.svc-link:hover, .svc-link:focus-visible { color: #fff !important; padding-inline: 24px !important; }
.svc-link:hover .wipe, .svc-link:focus-visible .wipe { transform: scaleY(1) !important; }
.svc-link:hover .desc, .svc-link:focus-visible .desc { grid-template-rows: 1fr !important; opacity: .85 !important; margin-top: 8px !important; }
.svc-link:hover .lucide { color: #ffd83d; transform: rotate(-8deg) scale(1.15); }
.svc-link .lucide { transition: transform .45s cubic-bezier(.3,1.6,.5,1), color .3s; }
[data-cat].is-out { display: none; }
#filters [aria-pressed=true] { background: #0a0e2a !important; color: #eef0f6 !important; }
#filters button:hover { background: #ffd83d !important; color: #0a0e2a !important; }
#filters [aria-pressed=true]:hover { background: #0a0e2a !important; color: #eef0f6 !important; }

/* ---------- Process: numbers light up as the line reaches them ---------- */
.proc-num.lit { background: #ffd83d !important; color: #0a0e2a !important; border-color: #ffd83d !important; }

/* ---------- Scroll reveals ---------- */
.js .rv       { opacity: 0; transform: translateY(36px); }
.js .rv-scale { opacity: 0; transform: scale(.94) translateY(20px); }
.js .rv-row   { opacity: 0; transform: translateX(-24px); }
.js .rv, .js .rv-scale, .js .rv-row {
  transition: opacity .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s), transform .9s cubic-bezier(.2,.8,.2,1) var(--d, 0s);
}
.js .in { opacity: 1; transform: none; }

/* Footer wordmark: letters rise one by one when scrolled into view */
#giant .ch { display: inline-block; transform: translateY(100%); transition: transform .9s cubic-bezier(.2,.9,.1,1); }
#giant.in .ch { transform: none; }
#giant .ch:hover { color: #ffd83d; transition: color .15s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .rv, .js .rv-scale, .js .rv-row, .split .w, .split-scroll .w, #giant .ch { opacity: 1; transform: none; }
  .plan path, .plan circle { stroke-dashoffset: 0; }
  .slab { clip-path: none; }
}