/* ============================================================
   CINEMA v3 — quiet craft layer + per-site signature scenes.
   The fleet-uniform orbit/showcase/glide features are gone;
   each site ships its own sig-<name>.js scene on a hero canvas.
   All classes namespaced `cine-`.
   ============================================================ */

/* Fleet sites set body{overflow-x:hidden}, which turns body into a scroll
   container and breaks position:sticky in host layouts. overflow-x:clip
   clips identically WITHOUT creating a scroll container. */
body{overflow-x:clip}

:root{
  --cine-deep:#0B1020;
  --cine-accent:#7C5CFF;
  --cine-accent-2:#A78BFA;
  --cine-glow:#22D3EE;
  --cine-accent-rgb:124,92,255;
  --cine-glow-rgb:34,211,238;
  --cine-deep-rgb:11,16,32;
  --cine-display-font:inherit;
}

/* ---------- scroll progress hairline ---------- */
.cine-progress{
  position:fixed;top:0;left:0;right:0;height:2.5px;z-index:2000;
  pointer-events:none;
  background:linear-gradient(90deg,var(--cine-accent),var(--cine-glow));
  transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 12px rgba(var(--cine-accent-rgb),.55);
}

/* ---------- 3D perspective entrances ---------- */
.cine-in{
  opacity:0;
  transform:perspective(1100px) translate3d(0,38px,-90px) rotateX(7deg);
  transition:none;
}
.cine-in.cine-go{
  opacity:1;
  transform:perspective(1100px) translate3d(0,0,0) rotateX(0deg);
  transition:
    opacity .9s cubic-bezier(.16,.68,.22,1) var(--cine-d,0s),
    transform 1.05s cubic-bezier(.16,.68,.22,1) var(--cine-d,0s);
}

/* ---------- hero recede (scroll-linked, JS-driven) ---------- */
.cine-recede{will-change:transform,opacity}

/* ---------- signature scene canvas ---------- */
.cine-sig-anchor{position:relative}
.cine-above{position:relative;z-index:1}
.cine-sig{
  position:absolute;inset:0;overflow:hidden;
  pointer-events:none;z-index:0;
  opacity:0;animation:cineSigIn 1.4s ease .15s forwards;
}
.cine-sig canvas{position:absolute;inset:0;width:100%;height:100%}
@keyframes cineSigIn{to{opacity:1}}

/* ---------- drawn accent underline on section headings ---------- */
.cine-h::after{
  content:"";display:block;width:58px;height:3px;border-radius:3px;margin-top:12px;
  background:linear-gradient(90deg,var(--cine-accent),var(--cine-glow));
  box-shadow:0 0 14px rgba(var(--cine-accent-rgb),.45);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s cubic-bezier(.16,.68,.22,1) .18s;
}
.cine-h[data-cine-c]::after{margin-left:auto;margin-right:auto;transform-origin:50% 50%}
.cine-h-go::after{transform:scaleX(1)}

/* ---------- specular sheen on cards ---------- */
.cine-shine-rel{position:relative}
.cine-sheen{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  pointer-events:none;display:block;
}
.cine-sheen::after{
  content:"";position:absolute;top:-45%;bottom:-45%;left:0;width:46%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.13) 30%,rgba(255,255,255,.32) 50%,rgba(255,255,255,.13) 70%,transparent);
  transform:translateX(-160%) rotate(9deg);opacity:0;
}
.cine-shine:hover .cine-sheen::after{
  transform:translateX(340%) rotate(9deg);opacity:1;
  transition:transform 1.05s cubic-bezier(.25,.6,.2,1),opacity .25s ease;
}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .cine-sig{opacity:0}
  .cine-sig{animation-name:cineSigInMob}
}
@keyframes cineSigInMob{to{opacity:.75}}

/* ---------- reduced motion : static elegance ---------- */
@media (prefers-reduced-motion:reduce){
  .cine-progress{display:none}
  .cine-in{opacity:1;transform:none;transition:none}
  .cine-recede{transform:none!important;opacity:1!important}
  .cine-h::after{transition:none;transform:scaleX(1)}
  .cine-sheen{display:none}
  .cine-sig{animation:none;opacity:.6}
}

@media print{
  .cine-progress,.cine-sig,.cine-sheen{display:none!important}
  .cine-in{opacity:1!important;transform:none!important}
  .cine-recede{transform:none!important;opacity:1!important}
  .cine-h::after{transform:scaleX(1)}
}

/* you-are-here marker in the CAQA Groups launcher (set by cinema.js markHere) */
.cqsvc-card.cq3-cur{outline:2px solid rgba(255,255,255,.75);outline-offset:-2px;position:relative}
.cqsvc-card.cq3-cur::before{content:"YOU ARE HERE";position:absolute;top:8px;right:10px;font-size:8.5px;font-weight:800;letter-spacing:.18em;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.92);color:#0a1128}