/* =====================================================================
   Arcova — "The arc" (vision → reality) + hero arc
   Everything here is built from arc.js. CSS holds the *final* look; JS
   sets the starting states and scrubs them with scroll.
   ===================================================================== */

/* ---------- Section shell ---------- */
.arc{position:relative;background:var(--bg);overflow:hidden;isolation:isolate}
.arc__inner{position:relative;min-height:100svh;display:flex;flex-direction:column;gap:clamp(14px,3vh,36px);padding:96px var(--pad) 28px}
.arc__bg,.arc__grid{position:absolute;inset:0;pointer-events:none;z-index:-1}
.arc__bg{opacity:0;will-change:opacity;
  background:radial-gradient(55% 65% at 84% 66%,rgba(37,99,235,.30),transparent 70%),
             radial-gradient(38% 46% at 66% 30%,rgba(34,211,238,.12),transparent 70%),
             radial-gradient(40% 50% at 90% 20%,rgba(139,61,255,.18),transparent 70%)}
.arc__grid{width:52%;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 85% at 22% 72%,#000 20%,transparent 75%);
          mask-image:radial-gradient(70% 85% at 22% 72%,#000 20%,transparent 75%)}

/* ---------- Head ---------- */
.arc__head{display:grid;grid-template-columns:1.25fr .75fr;gap:24px 40px;align-items:end}
.arc__head .eyebrow{margin-bottom:22px}
.arc__title{font-size:clamp(34px,4.7vw,72px);font-weight:500;line-height:.94;letter-spacing:-.055em}
.arc__title .line{padding-bottom:.08em;margin-bottom:-.08em}
.arc__o{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55)}
.arc__lead{max-width:400px;justify-self:end;color:#bdbdcc;font-weight:300;font-size:clamp(14px,1.1vw,17px);line-height:1.55}
.arc__lead .mono{display:block;margin-top:14px;color:#6f6f82}

/* ---------- Stage ---------- */
.arc__stage{position:relative;flex:1;min-height:340px}
.arc__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.arc__ghost{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1;stroke-dasharray:3 9;stroke-linecap:round}
.arc__glow,.arc__glow2,.arc__line,.arc__tail{fill:none;stroke-linecap:round}
.arc__glow{stroke:url(#arcGrad);stroke-width:18;opacity:.10}
.arc__glow2{stroke:url(#arcGrad);stroke-width:7;opacity:.28}
.arc__line{stroke:url(#arcGrad);stroke-width:2.2}
.arc__tail{stroke:#fff;stroke-width:3;opacity:.75}
.arc__anchor{fill:var(--bg);stroke:rgba(255,255,255,.35);stroke-width:1.2}
.arc__anchor--end{transition:stroke .5s,fill .5s}
.arc.is-done .arc__anchor--end{fill:#fff;stroke:#fff}
.arc__comet{opacity:0}
.arc__node circle{transform-box:fill-box;transform-origin:center}
.arc__node-ring{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;transition:stroke .5s,transform .8s var(--ease)}
.arc__node-core{fill:#14141d;stroke:rgba(255,255,255,.45);stroke-width:1.2;transition:fill .4s,stroke .4s,transform .6s var(--ease)}
.arc__node-pulse{fill:none;stroke:var(--cyan);stroke-width:1.5;opacity:0}
.arc__node.is-on .arc__node-ring{stroke:rgba(34,211,238,.65);transform:scale(1.35)}
.arc__node.is-on .arc__node-core{fill:#fff;stroke:#fff;transform:scale(1.25)}
.arc__node.is-on .arc__node-pulse{animation:arcPulse 1.1s var(--ease) 1}
@keyframes arcPulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}

/* ---------- Sides (vision / reality) ---------- */
.arc__side{position:absolute;bottom:0;width:var(--cw,360px)}
.arc__side--vision{left:0}
.arc__side--reality{right:0}
.arc__label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.arc__label-s{font-size:12px;color:#7a7a8c;font-weight:300;white-space:nowrap}
.arc__stage--narrow .arc__label-s{display:none}
.arc__side--reality .arc__label .mono{color:#cfcfe0}
.arc__card{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;font-size:calc(var(--cw,360px)/40);will-change:transform,opacity}

/* Vision: wireframe */
.arc__card--wire{background:rgba(255,255,255,.015);border:1px dashed rgba(255,255,255,.22)}
.arc__card--wire svg{position:absolute;inset:0;width:100%;height:100%}
.wire--gray{stroke:rgba(255,255,255,.42);stroke-width:1.2;stroke-dasharray:5 4;fill:none}
.wire--gray .wire__x{stroke:rgba(255,255,255,.22);stroke-dasharray:none}
.wire--gray .wire__dot{stroke-dasharray:none;fill:rgba(255,255,255,.08)}
.wire--lit{stroke:url(#wireGradLit);stroke-width:1.4;fill:none;opacity:0}
.wire--lit .wire__fill{fill:url(#wireGradLit);fill-opacity:.14}
.wire--lit .wire__x{stroke-opacity:.35}
.wire__note{position:absolute;font-family:var(--mono);font-size:max(9px,1.05em);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap;line-height:1}
.wire__m{position:absolute;left:5%;right:5%;top:5.2em;height:.9em;border-left:1px solid rgba(255,255,255,.35);border-right:1px solid rgba(255,255,255,.35)}
.wire__m::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid rgba(255,255,255,.22)}
.wire__m span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 .6em;background:var(--bg);font-family:var(--mono);font-size:max(8px,.9em);letter-spacing:.06em;color:rgba(255,255,255,.45)}
.arc__scan{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent 55%,rgba(34,211,238,.10) 92%,rgba(34,211,238,.45) 99.5%,#67e8f9 100%)}

/* Reality: polished */
.arc__side--reality::before{content:"";position:absolute;left:-22%;right:-22%;top:-10%;bottom:-24%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 55% at 50% 60%,rgba(34,211,238,.35),transparent 70%),radial-gradient(40% 45% at 30% 30%,rgba(139,61,255,.35),transparent 70%);opacity:var(--glow,1)}
.arc__card--real{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 80px -40px rgba(34,211,238,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.rc{position:absolute;inset:0;padding:2em;display:flex;flex-direction:column;gap:1.5em;color:#fff}
.rc__nav{display:flex;align-items:center;gap:.9em}
.rc__logo{width:2.4em;height:2.4em;border-radius:.75em;background:var(--grad);box-shadow:0 0 1.6em rgba(139,61,255,.55)}
.rc__nav i{width:2.6em;height:.45em;border-radius:1em;background:rgba(255,255,255,.35)}
.rc__nav i:first-of-type{margin-left:auto}
.rc__pill{width:6em;height:2.2em;border-radius:2em;background:#fff;margin-left:.6em}
.rc__hero{display:grid;grid-template-columns:1.2fr 1fr;gap:1.6em;flex:1;min-height:0}
.rc__copy{display:flex;flex-direction:column;justify-content:center}
.rc__copy h4{font-size:2.3em;font-weight:600;letter-spacing:-.05em;line-height:.98;margin:0 0 .45em}
.rc__copy p{font-size:1em;color:#b8b8cc;font-weight:300;line-height:1.35;margin:0 0 1.1em;max-width:16em}
.rc__btn{align-self:flex-start;display:inline-flex;align-items:center;gap:.5em;padding:.75em 1.3em;border-radius:2em;background:var(--grad);font-weight:600;font-size:1em;letter-spacing:-.01em;box-shadow:0 .8em 2em -.6em rgba(56,189,248,.8)}
.rc__img{position:relative;border-radius:1.2em;overflow:hidden;background:
  radial-gradient(120% 90% at 15% 15%,#a78bfa,transparent 55%),
  radial-gradient(90% 90% at 85% 30%,#2563eb,transparent 60%),
  radial-gradient(90% 80% at 55% 100%,#22d3ee,transparent 60%),#0d0d14}
.rc__img::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 48%)}
.rc__img span{position:absolute;left:1em;bottom:1em;padding:.4em .8em;border-radius:2em;background:rgba(7,7,11,.55);border:1px solid rgba(255,255,255,.2);font-family:var(--mono);font-size:max(8px,.85em);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:.5em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rc__img span::before{content:"";width:.6em;height:.6em;border-radius:50%;background:#34d399;box-shadow:0 0 .8em #34d399}
.rc__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
.rc__cards i{position:relative;height:5.4em;border-radius:1em;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.rc__cards i::before{content:"";position:absolute;left:1em;top:1em;width:1.3em;height:1.3em;border-radius:50%;background:var(--grad)}
.rc__cards i::after{content:"";position:absolute;left:1em;bottom:1.2em;width:55%;height:.45em;border-radius:1em;background:rgba(255,255,255,.35)}
.rc__cards i:nth-child(2)::after{width:40%}
.rc__cards i:nth-child(3)::after{width:65%}

/* ---------- Chips (Think / Create / Build) ---------- */
.arc__chip{position:absolute;display:flex;align-items:center;gap:12px;padding:9px 16px 9px 12px;border-radius:100px;white-space:nowrap;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .5s,border-color .5s,box-shadow .5s}
.arc__chip-n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#6f6f82;transition:color .4s}
.arc__chip-t{display:block;font-weight:600;letter-spacing:-.03em;font-size:clamp(15px,1.25vw,19px);line-height:1;color:rgba(255,255,255,.45);transition:color .4s}
.arc__chip-s{display:block;font-size:11.5px;font-weight:300;color:#6f6f82;margin-top:4px;transition:color .4s}
.arc__chip.is-on{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.34);box-shadow:0 10px 40px -14px rgba(34,211,238,.45)}
.arc__chip.is-on .arc__chip-n{color:var(--cyan)}
.arc__chip.is-on .arc__chip-t{color:#fff}
.arc__chip.is-on .arc__chip-s{color:#b8b8cc}

/* ---------- Meter + CTA ---------- */
.arc__meter{position:absolute;left:50%;bottom:0;transform:translateX(-50%);text-align:center;width:max-content}
.arc__num{font-size:clamp(44px,5vw,80px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.arc__num small{font-size:.42em;font-weight:500;color:var(--muted);margin-left:.05em;letter-spacing:-.02em}
.arc__meter .mono{display:block;margin-top:8px}
.arc__cta{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:12px 20px;border:1px solid rgba(255,255,255,.4);border-radius:100px;font-size:14px;font-weight:500;position:relative;overflow:hidden;isolation:isolate}
.arc__cta::before{content:"";position:absolute;inset:0;background:#fff;border-radius:inherit;transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.arc__cta:hover{color:#000}
.arc__cta:hover::before{transform:none}
.arc__cta i{font-style:normal;transition:transform .5s var(--ease)}
.arc__cta:hover i{transform:translateX(4px) rotate(-45deg)}

/* ---------- Static (reduced motion / no GSAP) ---------- */
.arc--static .arc__bg{opacity:1}
.arc--static .arc__grid{opacity:.4}
.arc--static .wire--gray{opacity:.25}
.arc--static .wire--lit{opacity:1}
.arc--static .arc__comet{opacity:1}

/* ---------- Short viewports ---------- */
@media (max-height:780px) and (min-width:821px){
  .arc__inner{padding-top:84px;gap:14px}
  .arc__title{font-size:clamp(30px,3.9vw,54px)}
  .arc__head .eyebrow{margin-bottom:14px}
  .arc__lead{font-size:14px;max-width:360px}
  .arc__lead .mono{display:none}
  .arc__chip-s{display:none}
  .arc__num{font-size:clamp(36px,4vw,56px)}
}

/* ---------- Mobile ---------- */
@media (max-width:820px){
  .arc__inner{min-height:0;padding:72px var(--pad) 56px;gap:32px}
  .arc__grid{width:100%;-webkit-mask-image:radial-gradient(70% 45% at 30% 22%,#000 10%,transparent 75%);mask-image:radial-gradient(70% 45% at 30% 22%,#000 10%,transparent 75%)}
  .arc__bg{background:radial-gradient(70% 40% at 70% 80%,rgba(37,99,235,.30),transparent 70%),radial-gradient(50% 30% at 90% 60%,rgba(34,211,238,.14),transparent 70%)}
  .arc__head{grid-template-columns:1fr;gap:20px}
  .arc__title{font-size:clamp(38px,11vw,56px)}
  .arc__lead{justify-self:start;max-width:none}
  .arc__stage{display:flex;flex-direction:column;min-height:0}
  .arc__side{position:relative;bottom:auto;width:min(80%,360px)}
  .arc__side--reality{align-self:flex-end;margin-top:230px}
  .arc__side--vision{align-self:flex-start}
  .arc__label{flex-direction:column;gap:2px;align-items:flex-start}
  .arc__meter{position:relative;left:auto;transform:none;margin:44px auto 0}
  .arc__chip{padding:8px 14px 8px 10px;gap:10px}
  .arc__chip-t{font-size:15px}
  .arc__chip-s{font-size:11px}
}
@media (max-width:420px){
  .arc__side{width:82%}
  .arc__side--reality{margin-top:210px}
  .arc__chip-s{display:none}
}

/* =====================================================================
   Hero arc (thin gradient arc behind the title)
   ===================================================================== */
.hero .hero-arc{position:absolute!important;inset:0;z-index:0!important;width:100%;height:100%;pointer-events:none;overflow:visible;will-change:transform}
.hero-arc__ghost{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1;stroke-dasharray:2 10;stroke-linecap:round}
.hero-arc__soft{fill:none;stroke:url(#heroArcGrad);stroke-width:8;opacity:.16;stroke-linecap:round}
.hero-arc__line{fill:none;stroke:url(#heroArcGrad);stroke-width:1.5;stroke-linecap:round;opacity:.9}
.hero-arc__dot{opacity:0}
.reduced .hero-arc__dot{opacity:1}
@media (max-width:820px){.hero .hero-arc{opacity:.7}}