/* codex.css — PORTABLE "Lictor Codex" uplift, now with the homepage's ANIMATED feel.
   Drops onto ANY page over its own CSS. Additive. Reveals are progressive-enhancement
   (content visible if JS/observer fail); ALL motion gated to prefers-reduced-motion. */

/* ── glass + lift utilities ── */
.codex-glass{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)) !important;
  backdrop-filter:blur(13px) saturate(1.12); -webkit-backdrop-filter:blur(13px) saturate(1.12);
  border:1px solid rgba(255,255,255,.10) !important;
}
@media (prefers-reduced-motion: no-preference){
  .codex-lift{ transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .2s ease !important; }
  .codex-lift:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(232,163,61,.5) !important; }
}

/* ── da-Vinci gold-ink hero accent ── */
.codex-geo{ position:absolute; pointer-events:none; z-index:0; transform-origin:60% 50%; }
.codex-geo .ink{ fill:none; stroke:rgba(232,163,61,.26); stroke-width:1; vector-effect:non-scaling-stroke; }
.codex-geo .spiral{ fill:none; stroke:rgba(232,163,61,.52); stroke-width:1.3; vector-effect:non-scaling-stroke; }
/* Mobile keeps the signature movement (the orbiting amber spotlight) and the
   gold ink, tuned smaller and clipped so they sit behind content and never
   cause horizontal scroll. All of it is still gated to prefers-reduced-motion
   by the animation blocks below. */
@media (max-width:900px){
  .codex-glow{ inset:-2%; filter:blur(24px); opacity:.9; }
  .codex-geo{ transform:scale(.72); transform-origin:72% 42%; opacity:.7; }
}

/* orbiting amber spotlight injected behind each hero accent (the homepage's signature movement) */
.codex-glow{ position:absolute; inset:-6%; z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, rgba(232,163,61,.16), transparent 60%); filter:blur(22px); }

@media (prefers-reduced-motion: no-preference){
  /* the codex drawing breathes + turns slowly (matches the homepage) */
  .codex-js .codex-geo{ animation:codexBreathe 30s ease-in-out infinite alternate; }
  @keyframes codexBreathe{ 0%{ transform:rotate(-2.5deg) scale(1); } 100%{ transform:rotate(2.5deg) scale(1.03); } }
  /* the ink + spiral draw themselves on load */
  .codex-js .codex-geo .ink, .codex-js .codex-geo .spiral{ stroke-dasharray:1; }
  .codex-js .codex-geo .ink{ animation:codexDraw 1.8s cubic-bezier(.45,0,.2,1) both; }
  .codex-js .codex-geo .ink:nth-of-type(2){ animation-delay:.5s; }
  .codex-js .codex-geo .ink:nth-of-type(3){ animation-delay:1s; }
  .codex-js .codex-geo .spiral{ animation:codexDraw 3s cubic-bezier(.45,0,.2,1) 1.2s both; }
  @keyframes codexDraw{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }
  /* the spotlight orbits behind the hero */
  .codex-js .codex-glow{ animation:codexOrbit 20s linear infinite; }
  @keyframes codexOrbit{
    0%{   transform:translate(-10%,-5%) scale(1);    }
    25%{  transform:translate(11%,3%)   scale(1.12); }
    50%{  transform:translate(15%,12%)  scale(.95);  }
    75%{  transform:translate(2%,9%)    scale(1.1);  }
    100%{ transform:translate(-10%,-5%) scale(1);    }
  }
}

/* ── safe scroll-reveals (active once codex.js adds html.codex-js + motion on) ── */
@media (prefers-reduced-motion: no-preference){
  html.codex-js [data-reveal]{ opacity:0; transform:translateY(34px) scale(.99); filter:blur(4px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .7s ease; }
  html.codex-js [data-reveal].codex-in{ opacity:1; transform:none; filter:none; }
}

/* When the a11y motion toggle is on, codex.js skips the scroll-reveal that would
   un-hide sections — so never leave [data-reveal] content hidden. Show it
   immediately. Fixes blank/invisible legal & doc pages for reduced-motion users
   (the CSS hide is gated on the OS setting, but the JS reveal is gated on this
   class, and when they disagree the content stayed hidden forever). Mirrors the
   reduced-motion guard fx.css already has for .fx-reveal. */
html.codex-js.a11y-nomotion [data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; }