/* ============================================================
   OBELISK GLOBAL — Shared Hero Visuals
   Four on-brand hero treatments, driven by a data attribute:
     <section ... data-ob-hero="globe|radar|ledger|monolith">
   Pair with obelisk-heroes.js. All colours fall back to brand
   tokens but use the page's CSS vars when present.
   ============================================================ */
:root{
  --ob-red:#FF402C; --ob-red-soft:rgba(255,64,44,.22);
  --ob-grey:#929292; --ob-elev:#0E0E0E; --ob-border:rgba(255,255,255,.10);
  --ob-ease:cubic-bezier(.22,1,.36,1);
}

/* host section must clip + stack; .hero/.phero already do, this is a safety net */
[data-ob-hero]{position:relative;overflow:hidden}
[data-ob-hero] .wrap{position:relative;z-index:3}

/* shared canvas layer (globe + radar) */
.ob-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;
  opacity:0;transition:opacity 1.2s var(--ob-ease)}
.ob-canvas.on{opacity:1}

/* shared atmospheric aura */
.ob-aura{position:absolute;z-index:0;right:5%;top:50%;width:min(60vw,760px);height:min(60vw,760px);
  transform:translateY(-50%);pointer-events:none;
  background:radial-gradient(circle at 55% 50%,rgba(255,64,44,.16),rgba(255,64,44,.04) 42%,transparent 70%);
  filter:blur(10px)}

/* ---------- MONOLITH BEAM ---------- */
.ob-mono-stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.ob-mono-grid{position:absolute;inset:0;opacity:.22;
  background-image:linear-gradient(var(--ob-border) 1px,transparent 1px),linear-gradient(90deg,var(--ob-border) 1px,transparent 1px);
  background-size:68px 68px;mask-image:radial-gradient(circle at 74% 50%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 74% 50%,#000,transparent 72%)}
.ob-mono-aura{position:absolute;right:8%;top:50%;width:min(56vw,700px);height:min(56vw,700px);
  transform:translateY(-50%);background:radial-gradient(circle,rgba(255,64,44,.20),transparent 62%);filter:blur(14px)}
.ob-mono-beam{position:absolute;top:0;bottom:0;right:18%;width:2px;
  background:linear-gradient(180deg,transparent,rgba(255,64,44,.5),transparent);
  box-shadow:0 0 60px 8px rgba(255,64,44,.22)}
.ob-mono-mark{position:absolute;right:11%;top:50%;transform:translateY(-50%);width:min(26vw,320px);
  filter:drop-shadow(0 30px 90px rgba(255,64,44,.42));animation:ob-float 7s ease-in-out infinite}
@keyframes ob-float{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 18px))}}
.ob-ember{position:absolute;width:4px;height:4px;background:var(--ob-red);border-radius:50%;opacity:.6;
  animation:ob-ember 7s ease-in-out infinite}
@keyframes ob-ember{0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(-22px);opacity:.9}}

/* ---------- LEDGER GRID ---------- */
.ob-ledger-grid{position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(#1D1D1D 1px,transparent 1px),linear-gradient(90deg,#1D1D1D 1px,transparent 1px);
  background-size:80px 80px;mask-image:radial-gradient(ellipse at 72% 50%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at 72% 50%,#000,transparent 80%)}
.ob-cards{position:absolute;right:5%;top:50%;transform:translateY(-50%);z-index:2;
  width:min(38vw,420px);display:flex;flex-direction:column;gap:18px;pointer-events:none}
.ob-card{background:var(--ob-elev);border:1px solid var(--ob-border);border-radius:8px;
  padding:18px 20px;display:flex;align-items:center;gap:16px;
  opacity:0;transform:translateY(18px);animation:ob-card-in .7s var(--ob-ease) forwards}
.ob-card:nth-child(1){animation-delay:.2s}
.ob-card:nth-child(2){animation-delay:.6s;margin-right:46px}
.ob-card:nth-child(3){animation-delay:1s;margin-right:14px}
@keyframes ob-card-in{to{opacity:1;transform:none}}
.ob-tick{width:34px;height:34px;flex:none;border:1.5px solid var(--ob-red);border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.ob-tick svg{width:16px;height:16px}
.ob-tick path{stroke:var(--ob-red);stroke-width:2.5;fill:none;stroke-dasharray:20;stroke-dashoffset:20;
  animation:ob-draw .5s var(--ob-ease) forwards}
.ob-card:nth-child(1) .ob-tick path{animation-delay:.5s}
.ob-card:nth-child(2) .ob-tick path{animation-delay:.9s}
.ob-card:nth-child(3) .ob-tick path{animation-delay:1.3s}
@keyframes ob-draw{to{stroke-dashoffset:0}}
.ob-card .ob-ct{font-size:.95rem;color:#fff;font-weight:400;line-height:1.3}
.ob-card .ob-cs{font-size:.78rem;color:var(--ob-grey);line-height:1.3}

/* keep headline/lead clear of the solid right-side visuals on desktop */
@media(min-width:901px){
  .phero[data-ob-hero="ledger"] h1{max-width:min(560px,50vw)}
  .phero[data-ob-hero="ledger"] .lead{max-width:min(420px,44vw)}
  .phero[data-ob-hero="monolith"] h1{max-width:min(480px,46vw)}
  .phero[data-ob-hero="monolith"] .lead{max-width:min(380px,40vw)}
}

/* desktop+: anchor the hero copy toward the left edge so it balances the
   right-side visual, instead of floating inside a centred container */
@media(min-width:1024px){
  .hero[data-ob-hero] .wrap,
  .phero[data-ob-hero] .wrap{
    max-width:none;
    margin-left:0;
    margin-right:auto;
    padding-left:clamp(48px,5.5vw,132px);
    padding-right:48px;
  }
}

/* About hero: force a two-line heading with the subtext matched to its width,
   and give the mark a little more room so they sit side-by-side cleanly */
@media(min-width:1024px){
  .phero[data-ob-hero="monolith"].phero-2line h1,
  .phero[data-ob-hero="monolith"].phero-2line .lead{max-width:min(780px,60vw)}
  .phero-2line .ob-mono-mark{width:min(22vw,260px);right:6%}
  .phero-2line .ob-mono-beam{right:11%}
  /* Capital (ledger): two-line heading sized to clear the verification cards */
  .phero[data-ob-hero="ledger"].phero-2line h1{font-size:clamp(2.1rem,3.4vw,3rem);max-width:min(680px,48vw)}
  .phero[data-ob-hero="ledger"].phero-2line .lead{max-width:min(680px,48vw)}
  /* Operations (longer heading): two lines sized to clear the right-side schematic */
  .phero[data-ob-hero="blueprint"].ops-2line h1{font-size:clamp(2.1rem,3.5vw,3rem);max-width:min(820px,60vw)}
  .phero[data-ob-hero="blueprint"].ops-2line .lead{max-width:min(820px,60vw)}
}

/* trade-corridors globe mount */
.globe-mount{width:100%;max-width:440px;aspect-ratio:1/1;position:relative;margin:0 auto}
.globe-cap{display:block;text-align:center;margin-top:14px;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ob-grey)}
@media(min-width:901px){.globe-col{display:flex;flex-direction:column;justify-content:center}}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .ob-aura,.ob-mono-aura{opacity:.55}
  .ob-mono-mark,.ob-mono-beam{opacity:.32}
  .ob-cards{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ob-mono-mark,.ob-ember{animation:none}
  .ob-card{opacity:1;transform:none;animation:none}
  .ob-tick path{stroke-dashoffset:0;animation:none}
}