/* aa-scroll.css | azrainalaman.com scrollcraft layer | 2026-10-12
   Additive and fail-safe. Hidden or offset starting states only exist on elements
   that aa-scroll.js has already prepared (data-aa-*, .aa-*). No JS = page as before.
   Motion is transform, translate, scale, opacity and clip-path only. */

:root{--aa-e:cubic-bezier(.23,1,.32,1);--aa-nav:66px}

/* hero headline: hold until the words are split, then rise (failsafe timer in the page head) */
html.aa-pre .hero h1,html.aa-pre .page-hero h1{visibility:hidden}

/* ---------- words (kinetic) ---------- */
/* page CSS colours every span inside h1/h2 (accent word). Split words must inherit instead. */
.aa-w,.aa-wi,.aa-rw{color:inherit!important}
.aa-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.aa-wi{display:inline-block;transform:translateY(108%)}
.aa-kin-in .aa-wi{transform:none;transition:transform .8s var(--aa-e);transition-delay:calc(var(--i,0)*55ms)}

/* ---------- hero depth planes ---------- */
.aa-planes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aa-pl{position:absolute;left:0;right:0;top:-28%;height:150%;will-change:transform;
  translate:calc(var(--mx,0)*var(--k,10)*-1px) calc(var(--my,0)*var(--k,10)*-.6px);transition:translate .5s var(--aa-e)}
.aa-pl-b{--k:10}.aa-pl-m{--k:24}.aa-pl-f{--k:40}
.aa-pl svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.aa-draw{stroke-dasharray:1;stroke-dashoffset:1}
.aa-planes.aa-drawn .aa-draw{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--aa-e) .25s}
.aa-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);color:rgba(255,255,255,.4);
  font:600 .76rem/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;animation:aa-bob 8s ease-in-out infinite;animation-delay:var(--d,0s)}
.aa-chip::before{content:'';width:9px;height:9px;border:1.5px solid currentColor;border-radius:50%;opacity:.7;flex:none}
.aa-glow{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55}
.aa-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:#fdba74;opacity:.5}
.aa-dot.w{background:#fff;opacity:.28}
@keyframes aa-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero-inner,.page-hero-inner{position:relative;z-index:1}

/* ---------- in: stagger rise ---------- */
[data-aa-in]>*{opacity:0;translate:0 26px;
  transition:opacity .7s var(--aa-e) calc(var(--i,0)*70ms),translate .7s var(--aa-e) calc(var(--i,0)*70ms),
  transform .2s,box-shadow .2s,border-color .2s,background .2s}
[data-aa-in].aa-in>*{opacity:1;translate:0 0}

/* ---------- wipe + image window ---------- */
[data-aa-wipe]{clip-path:inset(0 0 100% 0)}
[data-aa-img]{scale:1.16;translate:0 var(--ty,0px)}

/* ---------- tilt (pointer devices only) ---------- */
@media (hover:hover) and (pointer:fine){
  [data-aa-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ly,0px));
    transition:transform .2s var(--aa-e),box-shadow .2s,border-color .2s;will-change:transform}
}

/* ---------- pan: pinned horizontal rail ---------- */
.aa-pan-sec{padding:0!important;position:relative}
.aa-pan-stick{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;padding-top:var(--aa-nav);overflow:hidden;display:flex;align-items:center}
.aa-pan-sec .section-inner{max-width:none;margin:0;width:max-content;display:flex;align-items:center;
  gap:clamp(1.25rem,2.4vw,2.5rem);padding:0 7vw 0 7vw;will-change:transform}
.aa-pan-sec .section-header{flex:0 0 clamp(320px,29vw,430px);text-align:left;margin:0}
.aa-pan-sec .section-header p{margin-left:0;margin-right:0}
.aa-pan-sec .svc-grid{display:contents}
.aa-pan-sec .svc-card{flex:0 0 clamp(340px,29vw,420px);align-self:center}

/* ---------- stack: cards deal onto each other ---------- */
.aa-stack{display:block!important}
.aa-stack>*{position:sticky;top:calc(var(--aa-nav) + 30px + var(--si,0)*18px);max-width:780px;margin:0 auto 15vh!important;
  padding:2.1rem 2.4rem!important;transform-origin:50% 0;scale:var(--ss,1);
  box-shadow:0 18px 44px rgba(9,31,51,.1),0 2px 0 rgba(255,255,255,.7) inset;will-change:scale}
.aa-stack>*:last-child{margin-bottom:2rem!important}

/* ---------- pin-lit: stepper that holds while steps light up ---------- */
.aa-pinlit{position:relative}
.aa-pinlit>.section-inner{position:sticky;top:calc(var(--aa-nav) + 22px)}
.aa-pinlit .step{transition:opacity .5s var(--aa-e),translate .5s var(--aa-e),border-color .3s,box-shadow .3s}
.aa-pinlit .step:not(.aa-on){opacity:.28;translate:0 14px}
.aa-pinlit .step.aa-now{border-color:var(--accent);box-shadow:0 16px 36px rgba(249,115,22,.16)}
.aa-pbar{height:3px;border-radius:3px;background:var(--border);margin:-1.4rem auto 2rem;max-width:240px;overflow:hidden}
.aa-pbar i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- trace: a line that connects nodes ---------- */
.aa-tr{position:relative}
.aa-tr-line,.aa-tr-fill{position:absolute;border-radius:3px;pointer-events:none;z-index:0}
.aa-tr-line{background:var(--border)}
.aa-tr-fill{background:var(--accent);transform-origin:0 0}
.aa-node{position:relative;z-index:1;filter:grayscale(1);opacity:.5;transition:filter .45s,opacity .45s,scale .45s var(--aa-e)}
.aa-node.aa-lit{filter:none;opacity:1;scale:1.08}
.aa-tr.aa-tr-dark .aa-tr-line{background:rgba(255,255,255,.18)}

/* ---------- reading: words light as the eye reaches them ---------- */
.aa-rw{opacity:.34;transition:opacity .35s}
.aa-rw.aa-rl{opacity:1}

/* ---------- drift: two rows, opposite directions ---------- */
.aa-drift{display:flex!important;flex-direction:column;gap:1rem;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw)}
.aa-drow{display:flex;gap:1rem;width:max-content;will-change:transform}
.aa-drow>*{flex:0 0 clamp(260px,26vw,380px)}

/* ---------- query bar (signature move) ---------- */
.aa-qbar{position:fixed;left:24px;bottom:24px;z-index:900;display:flex;align-items:center;height:54px;padding:0 7px 0 18px;
  max-width:min(600px,calc(100vw - 112px));border-radius:999px;background:rgba(9,31,51,.95);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 32px rgba(9,31,51,.38);color:#fff;
  font:600 .9rem/1 'Plus Jakarta Sans',system-ui,sans-serif;
  translate:0 140%;opacity:0;transform:translateY(calc(var(--dock,0px)*-1));transition:translate .55s var(--aa-e),opacity .4s;pointer-events:none}
.aa-qbar.aa-show{translate:0 0;opacity:1;pointer-events:auto}
.aa-qicon{width:18px;height:18px;flex:none;margin-right:11px;color:rgba(255,255,255,.62)}
.aa-qtxt{flex:1 1 auto;min-width:210px;white-space:nowrap;overflow:hidden;letter-spacing:.01em}
.aa-caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.2em;background:var(--accent,#f97316);animation:aa-blink 1s steps(2) infinite}
@keyframes aa-blink{50%{opacity:0}}
.aa-qgo{flex:none;margin-left:12px;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 18px;border-radius:999px;
  background:var(--accent,#f97316);color:#091f33;font-weight:800;font-size:.8rem;text-decoration:none;white-space:nowrap;
  transition:transform .15s var(--aa-e),background .15s}
.aa-qgo svg{width:14px;height:14px;flex:none}
.aa-qgo:hover{background:#fb923c}
.aa-qgo:active{transform:scale(.97)}
.aa-qgo:focus-visible{outline:3px solid #fff;outline-offset:2px}
.aa-qbar.aa-done .aa-qgo{animation:aa-pulse 1.5s var(--aa-e) 1}
@keyframes aa-pulse{0%{box-shadow:0 0 0 0 rgba(249,115,22,.7)}100%{box-shadow:0 0 0 20px rgba(249,115,22,0)}}
@media (max-width:640px){
  .aa-chip{display:none}
  .aa-qbar{left:12px;bottom:14px;height:48px;padding:0 6px 0 14px;max-width:calc(100vw - 96px);font-size:.82rem}
  .aa-qtxt{min-width:0}
  .aa-qgo{width:36px;height:36px;padding:0;justify-content:center;margin-left:8px}
  .aa-qgo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .aa-chip,.aa-caret{animation:none}
  .aa-qbar{transition:none}
}