/* ============================================================
   CRUSADER — universal cinematic layer
   Loaded on every page. Adds motion, depth and ambient light to
   the 7 pages that previously had no animation at all.

   SAFETY: every hiding rule is scoped to html.cinema-on, which is
   added by cinema.js. If the JS fails to load, nothing is hidden
   and the site renders exactly as before.
   ============================================================ */

/* ---------- ambient canvas (sits behind everything) ---------- */
#cinema-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;
  opacity:0;transition:opacity 2s cubic-bezier(.22,1,.36,1)}
#cinema-bg.on{opacity:1}

/* ---------- pointer aura ---------- */
#cinema-aura{position:fixed;top:0;left:0;width:620px;height:620px;margin:-310px 0 0 -310px;
  z-index:-1;pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(circle,rgba(201,169,97,.075) 0%,rgba(201,169,97,.028) 38%,transparent 68%);
  will-change:transform}
#cinema-aura.on{opacity:1}
@media (hover:none){#cinema-aura{display:none}}

/* ---------- scroll progress ---------- */
#cinema-prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,rgba(201,169,97,0),#C9A961 40%,#E4CC8F);
  box-shadow:0 0 14px rgba(201,169,97,.65);transition:width .12s linear}

/* ---------- auto reveal ----------
   ⚠ .cx MUST NEVER SET opacity:0.
   It did, and two <h2>s on /systems stayed invisible through four rounds of
   fixes — a stylesheet override, an !important override, and inline styles —
   because a cached asset kept winning. Content that can be hidden by CSS can
   be left hidden by a cache. So the entrance is TRANSFORM ONLY: the element
   slides up into place and is fully legible at every moment, including before
   any JavaScript runs and on any stale cache. */
html.cinema-on .cx{transform:translate3d(0,22px,0);
  transition:transform .95s cubic-bezier(.22,1,.36,1)}
/* !important is deliberate. Without it, two <h2>s on /systems kept a computed
   opacity of 0 despite carrying .cx-in — the same class of stalled-transition
   failure that hid 34 elements on the homepage. A revealed element must be
   visible unconditionally; the animation is an enhancement, never a gate. */
html.cinema-on .cx.cx-in{transform:none}
/* directional variants */
html.cinema-on .cx-l{transform:translate3d(-34px,0,0)}
html.cinema-on .cx-r{transform:translate3d(34px,0,0)}
html.cinema-on .cx-s{transform:scale(.955) translate3d(0,18px,0)}
html.cinema-on .cx-s.cx-in{transform:none}

/* ---------- headline sweep ---------- */
html.cinema-on .cx-head{position:relative;overflow:hidden}
html.cinema-on .cx-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(201,169,97,.16) 50%,transparent 62%);
  transform:translateX(-120%)}
html.cinema-on .cx-head.cx-in::after{animation:cxSweep 1.5s cubic-bezier(.22,1,.36,1) .25s 1}
@keyframes cxSweep{to{transform:translateX(120%)}}

/* ---------- section top hairline that draws itself ---------- */
html.cinema-on .cx-rule{position:relative}
html.cinema-on .cx-rule::before{content:"";position:absolute;top:0;left:0;height:1px;width:0;
  background:linear-gradient(90deg,rgba(201,169,97,.75),rgba(201,169,97,0));
  transition:width 1.6s cubic-bezier(.22,1,.36,1)}
html.cinema-on .cx-rule.cx-in::before{width:min(340px,42%)}

/* ---------- lift on cards / rows ---------- */
html.cinema-on .cx-lift{transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease,border-color .55s ease}
html.cinema-on .cx-lift:hover{transform:translateY(-6px);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.75),0 0 0 1px rgba(201,169,97,.22)}

/* ---------- number counters ---------- */
html.cinema-on .cx-num{font-variant-numeric:tabular-nums}

/* ---------- respect user preference ---------- */
@media (prefers-reduced-motion:reduce){
  html.cinema-on .cx{transform:none!important;transition:none!important}
  html.cinema-on .cx-head::after{display:none}
  #cinema-bg,#cinema-aura{display:none}
}