/* ============================================================
   ALITHOS — About page (about.html only).
   Builds on css/motion.css. Hero intro is CSS-only and always ends
   fully visible; scroll effects are gated on html.m-on (motion.js),
   and everything is static under prefers-reduced-motion.
   ============================================================ */

/* ---------- hero: copy left, portrait right ---------- */
.ab-hero{padding-bottom:96px}
.ab-hero > .wrap.ab-hero-grid{max-width:1200px; display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,420px); gap:72px; align-items:center}
.ab-hero h1{max-width:18ch}
.ab-hero .sec-sub{max-width:50ch}

.ab-portrait{margin:0 46px 34px 0; position:relative; justify-self:end; width:100%; max-width:420px}
.ab-tilt{position:relative; transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d}
.ab-frame{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--deep); border:1px solid rgba(92,188,245,.22); box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(6,18,29,.6)}
.ab-frame img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 30%; filter:saturate(.92) contrast(1.02); transform:scale(1.06); animation:abZoom 2.4s cubic-bezier(.2,.7,.2,1) .15s forwards}
@keyframes abZoom{to{transform:scale(1)}}
/* blueprint wash over the photo */
.ab-frame::after{content:""; position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(rgba(92,188,245,.07) 1px, transparent 1px) 0 0/100% 32px,
  linear-gradient(180deg, transparent 55%, rgba(6,18,29,.55));
  mix-blend-mode:screen}
.ab-cover{position:absolute; inset:0; background:var(--void); transform-origin:top; animation:abWipe 1.15s cubic-bezier(.7,0,.2,1) .25s forwards; z-index:2}
.ab-cover::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--teal-hi); box-shadow:0 0 16px 2px rgba(92,188,245,.8)}
@keyframes abWipe{to{transform:scaleY(0)}}
.ab-scan{position:absolute; left:0; right:0; top:0; height:70px; z-index:1; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(92,188,245,.10) 85%, rgba(92,188,245,.55) 99%, transparent); animation:abScan 6.5s ease-in-out 1.6s infinite; opacity:0}
@keyframes abScan{0%{transform:translateY(-70px); opacity:0} 8%{opacity:1} 50%{transform:translateY(calc(var(--fh,520px))); opacity:1} 58%{opacity:0} 100%{transform:translateY(calc(var(--fh,520px))); opacity:0}}
.ab-sheen{position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(320px circle at var(--sx,70%) var(--sy,20%), rgba(92,188,245,.16), transparent 60%); opacity:0; transition:opacity .4s}
.ab-portrait:hover .ab-sheen{opacity:1}

.ab-brackets{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:3}
.ab-brackets path{fill:none; stroke:var(--teal-hi); stroke-width:1.6; stroke-linecap:square; filter:drop-shadow(0 0 4px rgba(46,159,232,.6)); stroke-dasharray:var(--len,1000); stroke-dashoffset:var(--len,1000); animation:abDraw 1.1s cubic-bezier(.5,0,.2,1) forwards; animation-delay:calc(var(--di,0) * 90ms + .6s)}
.ab-brackets .ab-dim{stroke:rgba(212,167,44,.75); stroke-width:1; filter:none}
.ab-brackets .ab-tick{stroke:rgba(92,188,245,.55); stroke-width:1; filter:none}
.ab-brackets .ab-t{fill:rgba(212,167,44,.9); font:600 11px var(--mono); letter-spacing:.1em; text-anchor:middle; opacity:0; animation:abFade .8s ease 1.7s forwards}
.ab-brackets .ab-fig{fill:var(--mist); text-anchor:start; font-size:10px; letter-spacing:.2em}
@keyframes abDraw{to{stroke-dashoffset:0}}
@keyframes abFade{to{opacity:1}}
.ab-cap{position:absolute; left:-14px; bottom:-18px; z-index:4; background:var(--void); color:var(--light); font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; padding:10px 16px; border:1px solid rgba(92,188,245,.3); white-space:nowrap; animation:abCap .8s cubic-bezier(.2,.7,.2,1) 1.25s both}
.ab-cap::before{content:""; display:inline-block; width:7px; height:7px; margin-right:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px rgba(212,167,44,.8); vertical-align:1px; animation:abPulse 2.6s ease-in-out infinite}
@keyframes abCap{from{opacity:0; transform:translateY(10px)}}
@keyframes abPulse{50%{opacity:.35}}

@media (min-width:901px) and (max-width:1199px){
  .ab-hero > .wrap.ab-hero-grid{grid-template-columns:minmax(0,1fr) minmax(240px,350px); gap:48px}
  .ab-portrait{max-width:350px}
}
@media (max-width:900px){
  .ab-hero{padding-bottom:56px}
  .ab-hero > .wrap.ab-hero-grid{grid-template-columns:1fr; gap:48px}
  .ab-portrait{justify-self:center; max-width:300px; width:calc(100% - 64px); margin:0 40px 30px 24px}
}
@media (max-width:640px){ .ab-portrait{max-width:260px} }
@media (max-width:360px){ .ab-portrait{max-width:220px} }

/* ---------- story + ledger ---------- */
.ab-story{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr); gap:72px; align-items:start}
.about-copy{position:relative}
.about-copy .sec-title{max-width:16ch}
.ab-mark{font-style:normal; color:var(--light); background:linear-gradient(90deg, var(--gold), var(--gold)) 0 100%/100% 2px no-repeat; padding-bottom:1px}
html.m-on .ab-mark{background-size:0 2px; transition:background-size 1s cubic-bezier(.2,.7,.2,1) .5s}
html.m-on .m-in .ab-mark{background-size:100% 2px}

.ab-ledger{position:sticky; top:110px; border:1px solid var(--line-d2); background:linear-gradient(180deg, rgba(16,37,54,.9), rgba(10,28,44,.9)); box-shadow:0 24px 60px rgba(0,0,0,.35)}
.ab-ledger-head{display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line-d2); font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-hi)}
.ab-led{width:8px; height:8px; border-radius:50%; background:var(--teal-hi); box-shadow:0 0 10px var(--teal); animation:abPulse 2.2s ease-in-out infinite}
.ab-ledger .fact-list{margin:0; border:0; counter-reset:abf; background:transparent; gap:0}
.ab-ledger .fact-list li{position:relative; grid-template-columns:96px 1fr; background:transparent; border-bottom:1px solid var(--line-d); counter-increment:abf; padding:16px 20px 16px 44px; transition:background .3s}
.ab-ledger .fact-list li:last-child{border-bottom:0}
.ab-ledger .fact-list li::before{content:counter(abf, decimal-leading-zero); position:absolute; left:16px; top:19px; font-family:var(--mono); font-size:.58rem; color:var(--slate); letter-spacing:.06em}
.ab-ledger .fact-list li::after{content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:linear-gradient(90deg, var(--teal-hi), transparent); transform-origin:left; transform:scaleX(0); transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--md,0s) + .2s)}
html.m-on .ab-ledger .fact-list li.m-in::after{transform:scaleX(1)}
html:not(.m-on) .ab-ledger .fact-list li::after{transform:scaleX(1); opacity:.35}
.ab-ledger .fact-list li:hover{background:rgba(46,159,232,.06)}
.ab-ledger .fact-list li.ab-paid{background:linear-gradient(90deg, rgba(212,167,44,.10), transparent 80%)}
.ab-ledger .fact-list li.ab-paid .k{color:var(--gold)}
.ab-ledger .fact-list li.ab-paid::after{background:linear-gradient(90deg, var(--gold), transparent)}
.ab-ledger .fact-list a{color:var(--teal-hi); display:inline-block; padding:10px 0; margin:-10px 0; overflow-wrap:anywhere}

@media (max-width:900px){
  .ab-story{grid-template-columns:1fr; gap:44px}
  .ab-ledger{position:relative; top:auto}
}
@media (max-width:560px){ .ab-ledger .fact-list li{grid-template-columns:1fr; gap:4px} }

/* ---------- principles: drawn icons, sweeping rule ---------- */
.ab-rules-band .principles{gap:20px}
.ab-rules-band .principle{position:relative; border:1px solid var(--line-d); border-top:0; background:linear-gradient(180deg, rgba(16,37,54,.55), transparent); padding:28px 26px 30px; overflow:hidden; transition:border-color .3s, transform .35s cubic-bezier(.2,.7,.2,1)}
.ab-rules-band .principle::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, var(--teal), var(--teal-hi) 60%, var(--gold)); transform-origin:left}
html.m-on .ab-rules-band .principle::before{transform:scaleX(0); transition:transform 1s cubic-bezier(.2,.7,.2,1) calc(var(--md,0s) + .15s)}
html.m-on .ab-rules-band .principle.m-in::before{transform:scaleX(1)}
.ab-rules-band .principle:hover{border-color:rgba(46,159,232,.35); transform:translateY(-4px)}
.ab-ico{width:46px; height:46px; display:block; margin-bottom:18px; overflow:visible}
.ab-ico .ab-i{fill:none; stroke:var(--teal-hi); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(46,159,232,.55))}
.ab-ico .ab-sand{stroke:var(--gold)}
html.m-on .ab-ico .ab-i{stroke-dasharray:var(--len,200); stroke-dashoffset:var(--len,200); transition:stroke-dashoffset 1.4s cubic-bezier(.5,0,.2,1); transition-delay:calc(var(--md,0s) + var(--ii,0) * 160ms + .25s)}
html.m-on .m-in .ab-ico .ab-i{stroke-dashoffset:0}

/* pointer spotlight (principles + services) */
.ab-spot{position:relative}
.ab-spot::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(46,159,232,.13), transparent 45%); opacity:0; transition:opacity .3s}
.ab-spot:hover::after{opacity:1}

/* ---------- money-flow diagram ---------- */
.ab-flow-row{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; align-items:center; margin-top:64px}
.ab-flow-copy p:first-child{margin-top:0}
.ab-flow{display:grid; grid-template-columns:auto minmax(60px,1fr) auto minmax(90px,1.4fr) auto; align-items:center; gap:0; padding:34px 24px; border:1px solid var(--line-d); background:radial-gradient(ellipse at 50% 50%, rgba(46,159,232,.08), transparent 70%), linear-gradient(rgba(159,180,196,.05) 1px, transparent 1px) 0 0/100% 28px; position:relative}
.fl-node{border:1px solid rgba(92,188,245,.45); background:var(--void); padding:12px 14px; text-align:center; min-width:76px; position:relative; z-index:1}
.fl-node b{display:block; font-size:1.05rem; color:var(--light)}
.fl-k{display:block; font-family:var(--mono); font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist)}
.fl-you{border-color:rgba(212,167,44,.6)}
.fl-you .fl-k{color:var(--gold)}
.fl-dan{box-shadow:0 0 0 4px rgba(46,159,232,.08), 0 0 26px rgba(46,159,232,.25)}
.fl-track{position:relative; align-self:stretch; display:flex; align-items:center; justify-content:center; min-height:70px}
.fl-lbl{position:absolute; top:calc(50% - 26px); left:0; right:0; text-align:center; font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); line-height:1.3; padding:0 4px}
.fl-fee .fl-lbl{color:var(--gold)}
.fl-line{position:relative; display:block; width:100%; height:2px; background:rgba(92,188,245,.35)}
.fl-fee .fl-line{background:rgba(212,167,44,.4)}
.fl-line em{position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%; background:var(--teal-hi); box-shadow:0 0 10px var(--teal); opacity:0}
.fl-fee .fl-line em{background:var(--gold); box-shadow:0 0 10px rgba(212,167,44,.9)}
.fl-stop{position:absolute; top:calc(50% + 12px); left:0; right:0; text-align:center; font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; color:#E07A6B}
.fl-x{display:inline-block; width:9px; height:9px; margin-right:6px; vertical-align:-1px; background:linear-gradient(45deg, transparent 42%, #E07A6B 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #E07A6B 42% 58%, transparent 58%)}
.fl-team{list-style:none; margin:0; padding:0; display:grid; gap:8px; position:relative; z-index:1}
.fl-team li{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--light); border:1px solid var(--line-d2); background:var(--void); padding:8px 12px; transition:border-color .4s, box-shadow .4s}
html.m-on .ab-flow.ab-live .fl-team li{animation:abPing 3.2s ease-in-out infinite; animation-delay:calc(var(--ti,0) * .25s + 1.6s)}
@keyframes abPing{0%,70%,100%{border-color:var(--line-d2); box-shadow:none} 80%{border-color:var(--teal-hi); box-shadow:0 0 14px rgba(46,159,232,.35)}}
/* pulses travel only after the diagram scrolls into view (about.js adds .ab-live) */
html.m-on .ab-flow.ab-live .fl-line em{animation:abFlowX 2.4s linear infinite}
html.m-on .ab-flow.ab-live .fl-line em:nth-child(2){animation-delay:.8s}
html.m-on .ab-flow.ab-live .fl-line em:nth-child(3){animation-delay:1.6s}
@keyframes abFlowX{0%{left:0; opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{left:calc(100% - 8px); opacity:0}}
/* static fallback: dots parked along the line */
html:not(.m-on) .fl-line em{opacity:1}
html:not(.m-on) .fl-line em:nth-child(2){left:calc(50% - 4px)}
html:not(.m-on) .fl-line em:nth-child(3){left:calc(100% - 8px)}
/* the diagram assembles: nodes then lines */
html.m-on .ab-flow > *{opacity:0; transform:translateY(10px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
html.m-on .ab-flow > :nth-child(2){transition-delay:.15s} html.m-on .ab-flow > :nth-child(3){transition-delay:.3s}
html.m-on .ab-flow > :nth-child(4){transition-delay:.45s} html.m-on .ab-flow > :nth-child(5){transition-delay:.6s}
html.m-on .ab-flow.ab-live > *{opacity:1; transform:none}
html.m-on .ab-flow .fl-line{transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.5,0,.2,1) .5s}
html.m-on .ab-flow.ab-live .fl-line{transform:none}

@media (max-width:1100px){ .ab-flow-row{grid-template-columns:1fr; gap:36px} .ab-flow{max-width:680px} }
@media (max-width:640px){
  .ab-flow{grid-template-columns:1fr; justify-items:center; padding:28px 18px}
  .fl-node{min-width:140px}
  .fl-track{width:100%; min-height:92px}
  .fl-line{width:2px; height:100%; position:absolute; left:50%; top:0; margin-left:-1px}
  html.m-on .ab-flow .fl-line{transform:scaleY(0); transform-origin:top}
  .fl-line em{top:0; left:-3px}
  .fl-lbl{top:50%; left:calc(50% + 14px); right:auto; transform:translateY(-50%); text-align:left; padding:0}
  .fl-stop{top:50%; right:calc(50% + 14px); left:auto; transform:translateY(-50%); text-align:right}
  html.m-on .ab-flow.ab-live .fl-line em{animation-name:abFlowY}
  html:not(.m-on) .fl-line em:nth-child(2){left:-3px; top:calc(50% - 4px)}
  html:not(.m-on) .fl-line em:nth-child(3){left:-3px; top:calc(100% - 8px)}
  .fl-team{grid-template-columns:1fr 1fr; width:100%}
  .fl-team li{text-align:center}
}
@keyframes abFlowY{0%{top:0; opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{top:calc(100% - 8px); opacity:0}}

/* ---------- services ---------- */
.ab-svc-grid .svc{overflow:hidden; transition:border-color .3s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s}
.ab-svc-grid .svc:hover{border-color:rgba(46,159,232,.45); transform:translateY(-5px); box-shadow:0 22px 50px rgba(0,0,0,.35)}
.ab-svc-grid .svc::before{content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:linear-gradient(90deg, transparent, var(--teal-hi), transparent); transform:translateX(-100%)}
html.m-on .ab-svc-grid .svc.m-in::before{animation:abSweep 1.6s cubic-bezier(.4,0,.2,1) calc(var(--md,0s) + .3s) 1}
@keyframes abSweep{to{transform:translateX(100%)}}
.ab-svc-grid .ab-feature{border-color:rgba(46,159,232,.4); box-shadow:0 0 0 1px rgba(46,159,232,.12), 0 20px 50px rgba(6,18,29,.45)}
.ab-step{display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; color:var(--teal-hi); margin-bottom:14px}
.ab-step::after{content:""; display:inline-block; width:40px; height:1px; background:currentColor; margin-left:10px; vertical-align:3px; opacity:.6}
.ab-svc-grid .price span{font-variant-numeric:tabular-nums}

/* ---------- reduced motion: everything visible and still ---------- */
@media (prefers-reduced-motion: reduce){
  .ab-frame img, .ab-cover, .ab-scan, .ab-cap, .ab-cap::before, .ab-led, .ab-brackets path, .ab-brackets .ab-t{animation:none!important}
  .ab-frame img{transform:none}
  .ab-cover, .ab-scan{display:none}
  .ab-brackets path{stroke-dashoffset:0}
  .ab-brackets .ab-t{opacity:1}
  .ab-tilt{transform:none; transition:none}
  .ab-ledger .fact-list li::after{transform:scaleX(1); transition:none}
  .ab-ico .ab-i{stroke-dashoffset:0!important; transition:none!important}
  .ab-rules-band .principle, .ab-svc-grid .svc{transition:none}
  .ab-rules-band .principle:hover, .ab-svc-grid .svc:hover{transform:none}
  .ab-mark{background-size:100% 2px!important; transition:none!important}
  .ab-flow > *, .ab-flow .fl-line{opacity:1!important; transform:none!important; transition:none!important}
  .fl-line em{animation:none!important; opacity:1}
  .fl-line em:nth-child(2){left:calc(50% - 4px)}
  .fl-line em:nth-child(3){left:calc(100% - 8px)}
  .fl-team li{animation:none!important}
}
@media (prefers-reduced-motion: reduce) and (max-width:640px){
  .fl-line em, .fl-line em:nth-child(2), .fl-line em:nth-child(3){left:-3px}
  .fl-line em:nth-child(2){top:calc(50% - 4px)}
  .fl-line em:nth-child(3){top:calc(100% - 8px)}
}