/* ABOUT V2 — air made visible.
   A01 Scattered particles gather into one circle divided by an S-curve (knowledge / practice),
       then unwind into an orbit around the headline and keep circulating like air.
   A02 Three words of knowledge travel across the photograph and arrive as three words of practice.
   A03 The emblem assembles from the same particles; VITALIS carries a slow pulse.
   A04 An illustrative scene shows the translation happening over three weeks.
   Copy is unchanged except the A04 scene and the two circle labels. Everything is SVG. */

/* ---------- A01 hero ---------- */
body[data-page="about"] #about.about-air{padding-bottom:clamp(110px,11vw,170px);min-height:780px}
body[data-page="about"] #about .ab-air{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body[data-page="about"] #about .ab-air::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(226,233,222,.55),transparent 60%),radial-gradient(ellipse at 18% 70%,rgba(223,211,184,.22),transparent 55%)}
body[data-page="about"] #about .ab-air-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
body[data-page="about"] #about .ab-air-svg .p{transition:none}
body[data-page="about"] #about .ab-air-svg .lab{font:600 12.5px/1 var(--sans);letter-spacing:.24em;text-anchor:middle;opacity:0}
body[data-page="about"] #about .ab-air-svg .orbit{fill:none;stroke:rgba(172,150,95,.28);stroke-width:1;stroke-dasharray:2 7;opacity:0}
body[data-page="about"] #about>.shell{position:relative;z-index:1}
/* Entrance is pure CSS, timed to the particles: it runs even if the script never loads. */
body[data-page="about"] #about .h1{animation:ab-title 1.4s cubic-bezier(.2,.8,.2,1) 3.2s both}
body[data-page="about"] #about .topic,body[data-page="about"] #about .note{animation:ab-copy 1s ease 3.7s both}
@keyframes ab-title{from{opacity:0;filter:blur(10px);letter-spacing:.02em}to{opacity:1;filter:none;letter-spacing:normal}}
@keyframes ab-copy{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body[data-page="about"] #about .about-air-toggle{z-index:3}

/* ---------- A02 translation bridge ---------- */
body[data-page="about"] #what-it-is .translate{position:relative}
body[data-page="about"] #what-it-is .ab-bridge{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
body[data-page="about"] #what-it-is .ab-bridge path{fill:none;stroke:#FFF6E0;stroke-width:1.6;stroke-dasharray:2 6;filter:drop-shadow(0 0 1.5px rgba(20,35,28,.55))}
body[data-page="about"] #what-it-is .ab-bridge .w{font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
body[data-page="about"] #what-it-is .ab-bridge .w-in{fill:#35594a}
body[data-page="about"] #what-it-is .ab-bridge .w-out{fill:#8A6D32}
body[data-page="about"] #what-it-is .ab-bridge .dot{fill:#FFF6E0;stroke:#B8985A;stroke-width:2;filter:drop-shadow(0 0 6px rgba(212,188,132,.9))}
@media(max-width:760px){body[data-page="about"] #what-it-is .ab-bridge{display:none}}

/* ---------- A03 emblem and pulse ---------- */
body[data-page="about"] #names .about-names-brand{position:relative;gap:clamp(18px,2vw,28px)}
body[data-page="about"] #names .ab-mark{display:block;width:clamp(96px,10vw,140px);height:auto;overflow:visible}
body[data-page="about"] #names.ab-mark-live .about-names-brand img.about-names-symbol{display:none}
body[data-page="about"] #names:not(.ab-mark-live) .ab-mark{display:none}
body[data-page="about"] #names .ab-pulse{display:block;width:min(100%,360px);height:40px;margin:14px 0 4px;overflow:visible}
body[data-page="about"] #names .ab-pulse .base{fill:none;stroke:rgba(212,188,132,.28);stroke-width:1.2}
body[data-page="about"] #names .ab-pulse .beat{fill:none;stroke:#D4BC84;stroke-width:2;stroke-linecap:round;stroke-dasharray:.16 .84;animation:ab-beat 3.2s cubic-bezier(.45,0,.3,1) infinite}
@keyframes ab-beat{from{stroke-dashoffset:.16}to{stroke-dashoffset:-.84}}
body[data-page="about"] #names.ab-paused .ab-pulse .beat{animation-play-state:paused}
body[data-page="about"] #names .ab-names-pause{position:absolute;right:var(--gutter);bottom:22px;background:rgba(255,255,255,.08);color:#F0EBDD;border-color:rgba(212,188,132,.35)}
body[data-page="about"] #names .ab-names-pause:hover{background:rgba(255,255,255,.14)}
body[data-page="about"] #names{position:relative}

/* ---------- A04 an illustrative scene ---------- */
body[data-page="about"] .ab-scene{margin-top:clamp(40px,5vw,72px)}
body[data-page="about"] .ab-scene-label{margin:0 0 22px;color:var(--gold-access);font:600 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase}
body[data-page="about"] .ab-scene-track{position:relative}
body[data-page="about"] .ab-scene-svg{position:absolute;left:0;right:0;top:3px;width:100%;height:14px;overflow:visible}
body[data-page="about"] .ab-scene-svg .rail{stroke:var(--line-strong);stroke-width:1}
body[data-page="about"] .ab-scene-svg .fill{stroke:var(--gold);stroke-width:2}
body[data-page="about"] .ab-scene-svg .head{fill:var(--gold)}
body[data-page="about"] .ab-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px);margin:0;padding:0;list-style:none}
body[data-page="about"] .ab-steps li{position:relative;padding-top:34px;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
body[data-page="about"] .ab-steps li::before{content:"";position:absolute;top:4px;left:0;width:12px;height:12px;border:1.5px solid var(--gold);border-radius:50%;background:var(--canvas,#fff)}
body[data-page="about"] .ab-steps li.is-on::before{background:var(--gold)}
body[data-page="about"] .ab-when{display:block;color:var(--forest);font:500 var(--fs-h4)/1.2 var(--display);letter-spacing:-.02em}
body[data-page="about"] .ab-steps p{max-width:34ch;margin:10px 0 0;color:var(--fine);font-size:var(--fs-label);line-height:1.6}
body[data-page="about"] .ab-scene.is-live .ab-steps li:not(.is-on){opacity:.35;transform:translateY(8px)}
body[data-page="about"] .ab-scene-note{margin:18px 0 0;color:var(--fine);font-size:12px}
@media(max-width:760px){
 body[data-page="about"] .ab-steps{grid-template-columns:1fr}
 body[data-page="about"] .ab-scene-svg{display:none}
 body[data-page="about"] .ab-steps li{padding:0 0 0 26px}
 body[data-page="about"] .ab-steps li::before{left:0;top:6px}
}

@media(prefers-reduced-motion:reduce){
 body[data-page="about"] #about .h1,body[data-page="about"] #about .topic,body[data-page="about"] #about .note{animation:none}
 body[data-page="about"] #names .ab-pulse .beat{animation:none;stroke-dasharray:none}
 body[data-page="about"] .ab-scene.is-live .ab-steps li:not(.is-on){opacity:1;transform:none}
}
@media print{body[data-page="about"] .ab-air,body[data-page="about"] .ab-bridge,.about-air-toggle{display:none!important}}