/* ============================================================
   NOVIRA — «نبض نوویرا» / Command Center cinematic page.
   Loads after styles.css. Namespaced .cc-*.
   Uses real product screenshots (assets/shots/command-center/*).
   • Convergence «از هفت، یک»: 7 module nodes converge into the
     cockpit frame — a one-shot CSS animation triggered on reveal
     (.cc-ready added by js/cmd-cine.js on capable screens; .in
     added by app.js IntersectionObserver). No scroll-scrub, so
     no overlap and graceful fallback to the final static frame.
   • Guided tour: a pinned lapseq monitor (driven by cinemashots.js)
     that swaps screenshots with side captions.
   ============================================================ */

:root{ --cc:var(--m-cmd); --cc-cyan:var(--sage); --cc-grad:linear-gradient(120deg,var(--sage),var(--m-cmd),var(--amber)); }

/* a quiet "sample data" tag so we never imply real customer numbers */
.cc-sample{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  color:var(--muted);background:rgb(var(--ink-rgb) / .04);border:1px solid var(--border);border-radius:100px;padding:5px 12px}
.cc-sample::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cc);box-shadow:0 0 10px var(--cc)}

/* hero pulse mark inside .ico-lg */
.cc-pulse{width:34px;height:34px}
.cc-pulse svg{width:100%;height:100%;stroke:var(--cc);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* the reframe banner under the hero lead */
.cc-claim{display:inline-flex;align-items:center;gap:11px;margin-top:22px;padding:10px 18px;border-radius:100px;
  font-size:13.5px;font-weight:600;color:var(--ink);
  background:linear-gradient(120deg,rgb(var(--m-cmd-rgb) / .16),rgb(var(--sage-rgb) / .12));
  border:1px solid rgb(var(--m-cmd-rgb) / .4);box-shadow:0 10px 30px rgb(var(--m-cmd-rgb) / .2)}
.cc-claim b{color:var(--ink)}

/* ============================================================
   CONVERGENCE — «از هفت، یک» (scroll-scrubbed, pinned)
   The section pins; scrolling drives the 7 nodes into the centre
   and assembles the cockpit frame. Driven by js/cmd-cine.js.
   ============================================================ */
.cc-cine{position:relative;height:240vh}
.cc-cine-sticky{position:sticky;top:0;height:100vh;overflow:hidden;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.6vh,26px);
  padding:84px 20px 28px;
  background:radial-gradient(ellipse 70% 64% at 50% 48%,rgb(var(--m-cmd-rgb) / .13),transparent 66%)}
.cc-cine .ey{color:var(--champ-light);font-weight:700;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:10px}
.cc-cine h2{font-size:clamp(22px,3.2vw,34px);font-weight:800;letter-spacing:-.5px;line-height:1.3;margin:0;max-width:780px}

.cc-framewrap{position:relative;width:min(560px,88vw);margin:0 auto}
.cc-frame{position:relative;width:100%;aspect-ratio:1600/765;border-radius:14px;overflow:hidden;background:var(--bg-deep);
  border:1px solid rgb(var(--m-cmd-rgb) / .3);
  box-shadow:0 44px 100px -50px rgb(var(--shadow-rgb) / .95),0 0 0 1px rgb(var(--ink-rgb) / .03) inset}
.cc-framewrap::before{content:"";position:absolute;inset:-12% 6% 4% 6%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgb(var(--m-cmd-rgb) / .5),rgb(var(--sage-rgb) / .18) 52%,transparent 72%);filter:blur(70px)}
.cc-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.cc-frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px;box-shadow:inset 0 1px 0 rgb(var(--ink-rgb) / .06)}

/* the 7 module nodes (around the frame centre) */
.cc-node{position:absolute;left:50%;top:50%;z-index:3;width:50px;height:50px;border-radius:14px;
  display:grid;place-items:center;font-size:23px;opacity:0;will-change:transform,opacity;
  transform:translate(-50%,-50%) translate(var(--sx,0),var(--sy,0));
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,transparent),color-mix(in srgb,var(--c) 9%,transparent));
  border:1px solid color-mix(in srgb,var(--c) 48%,transparent);
  box-shadow:0 12px 32px -10px color-mix(in srgb,var(--c) 65%,transparent)}

.cc-cap-line{margin:0}
.cc-cap-line p{color:var(--muted);font-size:13.5px;line-height:1.7;margin:10px auto 0;max-width:600px}

/* JS scrub mode: nodes start scattered (visible), frame hidden — JS drives both */
.cc-cine.cc-anim .cc-node{opacity:1}
.cc-cine.cc-anim .cc-frame{opacity:0}

/* static fallback (mobile / reduced-motion / no-JS): plain final frame, no pin */
.cc-cine.cc-static{height:auto}
.cc-cine.cc-static .cc-cine-sticky{position:static;height:auto;display:block;padding:clamp(40px,7vh,90px) 20px}
.cc-cine.cc-static .cc-cine-head{margin-bottom:clamp(26px,4vh,44px)}
.cc-cine.cc-static .cc-framewrap{margin-bottom:clamp(20px,3vh,30px)}
.cc-cine.cc-static .cc-node{display:none}
.cc-cine.cc-static .cc-frame{opacity:1!important;transform:none!important;filter:none!important}

/* ============================================================
   GUIDED TOUR — lapseq overrides (real 2.09:1 screenshots)
   ============================================================ */
.cc-seq .seqmon{max-width:700px}
.cc-seq .seqmon .scr-inner{aspect-ratio:1600/765}
.cc-seq .seqmon .scr-inner img{object-fit:cover;object-position:top center}

/* ============================================================
   Mobile: convergence collapses to a plain frame, nodes hidden
   ============================================================ */
@media(max-width:767px){
  .cc-cine{height:auto}
  .cc-cine-sticky{position:static;height:auto;display:block;padding:clamp(36px,6vh,70px) 16px}
  .cc-cine-head{margin-bottom:clamp(24px,4vh,40px)}
  .cc-framewrap{margin-bottom:clamp(18px,3vh,28px)}
  .cc-node{display:none}
  .cc-cine .cc-frame{opacity:1!important;transform:none!important;filter:none!important}
}