/* 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; }
@media (max-width:900px){ .codex-geo, .codex-glow{ display:none; } }

/* 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 22s ease-in-out infinite alternate; }
  @keyframes codexBreathe{ 0%{ transform:rotate(-6deg) scale(1); } 100%{ transform:rotate(6deg) scale(1.06); } }
  /* 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; }
}