/* ============================================================
   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}

/* --- newsletter block fix, 31 Aug 2026 ---------------------------------
   A consent paragraph (.cq-consent) and a Cloudflare Turnstile widget were
   injected INSIDE .cqft-card form. That form is a nowrap flex row styled as
   the white pill, so both became flex items on the same row as the input:
   the email field collapsed to about 100px (only "Enter y" was visible) and
   the pale consent text rendered over the pill edge, unreadable.

   The pill is rebuilt on the input and button themselves, the form is allowed
   to wrap, and the injected elements drop to their own full width row below.

   Where the card already carries its own .cqft-consent line the injected one
   is a duplicate, so it is hidden. That also covers the three sites with a
   white card, where white consent text would be invisible. No site that
   relies on the injected consent has a white card, so the white is safe. */
.cqft-card form{flex-wrap:wrap; background:transparent; padding:0; border-radius:0; gap:10px 0}
.cqft-card form > input[type=email]{flex:1 1 auto; min-width:0; background:#fff;
  border-radius:999px 0 0 999px; padding:16px 24px}
.cqft-card form > button{border-radius:0 999px 999px 0}
.cqft-card form > .cq-consent{flex:0 0 100%; order:9; margin:2px 0 0; opacity:1;
  text-align:left; color:rgba(255,255,255,.92)}
.cqft-card form > .cq-consent a{color:#fff; text-decoration:underline}
.cqft-card form > .cf-turnstile{flex:0 0 100%; order:10; margin:0}
.cqft-card:has(> .cqft-consent) form > .cq-consent{display:none}
/* --- end newsletter block fix --- */