/* ─── Navixar · Cinematic Kit ───
   Shared showpiece layer: boot overlay, perception reticle, film grain,
   progress road, tilt glare, CTA glow, scan labels, animated checks.
   Used by index.html and teaser.html (quick.html carries its own copy). */

/* ── boot overlay ── */
#cine-boot {
  position: fixed; inset: 0; z-index: 12000; background: #030308;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease; font: 600 13px/2.1 'JetBrains Mono', monospace;
  color: #7fe08f; letter-spacing: .04em;
}
#cine-boot.gone { opacity: 0; pointer-events: none; }
#cine-boot .bline { opacity: 0; white-space: pre; }
#cine-boot .bline.on { opacity: 1; }
#cine-boot .bcaret::after { content: '▌'; animation: cinBlink .7s steps(1) infinite; }
@keyframes cinBlink { 50% { opacity: 0; } }

/* ── progress road (injected when the page has no #pb) ── */
#cine-road {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 11000;
  background: rgba(255,255,255,.05); pointer-events: none;
}
#cine-road .fill {
  height: 100%; width: 0%; position: relative;
  background: linear-gradient(90deg, #ff9933, #ffd700 55%, #ff006e);
  box-shadow: 0 0 12px rgba(255,183,77,.8);
}
#cine-road .car, #pb::after {
  content: ''; position: absolute; right: -3px; top: 50%; width: 10px; height: 10px;
  border-radius: 50%; transform: translateY(-50%); background: #fff;
  box-shadow: 0 0 10px #ffd700, 0 0 22px #ff9933;
}
#pb { overflow: visible; }
#pb::after { display: block; }

/* ── grain + vignette (injected) ── */
#cine-grain {
  position: fixed; inset: 0; z-index: 10000; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
#cine-vig { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%); }
html[data-theme="light"] #cine-grain { opacity: .03; }
html[data-theme="light"] #cine-vig { background: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 70%, rgba(60,30,60,.12) 100%); }

/* ── perception reticle ── */
html.qcur, html.qcur body, html.qcur a, html.qcur button { cursor: none !important; }
html.qcur #cur, html.qcur #cur2 { display: none !important; }
#cine-ret { position: fixed; left: 0; top: 0; z-index: 11500; pointer-events: none; opacity: 0; transition: opacity .3s; }
#cine-ret.on { opacity: 1; }
#cine-ret .box { position: absolute; left: 0; top: 0; }
#cine-ret .c { position: absolute; width: 12px; height: 12px; border: 2px solid var(--marigold, #FFD700); filter: drop-shadow(0 0 4px rgba(255,215,0,.7)); }
#cine-ret .c1 { left: 0; top: 0; border-right: none; border-bottom: none; }
#cine-ret .c2 { right: 0; top: 0; border-left: none; border-bottom: none; }
#cine-ret .c3 { left: 0; bottom: 0; border-right: none; border-top: none; }
#cine-ret .c4 { right: 0; bottom: 0; border-left: none; border-top: none; }
#cine-ret .dotc { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: var(--marigold, #FFD700); }
#cine-ret .rlbl {
  position: absolute; left: 0; top: 100%; margin-top: 8px; padding: 5px 10px; white-space: nowrap;
  border-radius: 6px; background: rgba(5,3,10,.85); border: 1px solid rgba(255,215,0,.4);
  font: 600 9.5px/1 'JetBrains Mono', monospace; letter-spacing: 1.4px; color: var(--marigold, #FFD700);
  opacity: 0; transition: opacity .2s;
}
#cine-ret.lock .rlbl { opacity: 1; }
html[data-theme="light"] #cine-ret .c { border-color: #b8481d; filter: drop-shadow(0 0 3px rgba(184,72,29,.5)); }
html[data-theme="light"] #cine-ret .dotc { background: #b8481d; }
html[data-theme="light"] #cine-ret .rlbl { background: rgba(250,245,235,.92); border-color: rgba(184,72,29,.45); color: #b8481d; }

/* ── tilt glare (span injected by JS) ── */
.cin-tilt { will-change: transform; }
.cin-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .3s; z-index: 3;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.10), transparent 45%);
}
.cin-tilt:hover .cin-glare { opacity: 1; }
html[data-theme="light"] .cin-glare { background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,183,77,.16), transparent 45%); }

/* ── primary CTA glow ── */
.btn.primary { position: relative; will-change: transform; }
.btn.primary::after {
  content: ''; position: absolute; inset: -3px; border-radius: 100px; z-index: -1;
  background: linear-gradient(135deg, #ff9933, #ffd700); filter: blur(14px); opacity: .55;
  animation: cinCtaGlow 2.2s ease-in-out infinite;
}
@keyframes cinCtaGlow { 50% { opacity: .95; } }

/* ── border sweep for hero cards / ask panels ── */
.cin-sweep { position: relative; }
.cin-sweep::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 4;
  background: linear-gradient(120deg, transparent 20%, rgba(255,215,0,.75) 42%, rgba(255,0,110,.6) 52%, transparent 75%) 0 0/250% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: cinSweep 3.4s linear infinite;
}
@keyframes cinSweep { to { background-position: 250% 0; } }

/* ── ghost section numerals ── */
.cin-ghost {
  position: absolute; top: 40px; right: 4vw; z-index: 0; pointer-events: none;
  font: 700 clamp(120px, 22vw, 320px)/1 'Space Grotesk', sans-serif;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.05);
}
html[data-theme="light"] .cin-ghost { -webkit-text-stroke: 1px rgba(60,30,60,.07); }

/* ── live demand pill ── */
.cin-live { display: inline-flex !important; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; }
.cin-ldot {
  width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; flex: none;
  box-shadow: 0 0 9px rgba(255,59,48,.9); animation: cinPulse 1.1s ease-in-out infinite;
}
@keyframes cinPulse { 50% { opacity: .35; } }
.cin-liven { font-weight: 800; color: var(--text-white, #fff); min-width: 3ch; text-align: right; }
html[data-theme="light"] .cin-liven { color: #1d1d1f; }

/* ── animated proof checks ── */
.cin-check { width: 38px; height: 38px; }
.cin-check circle { stroke: rgba(48,209,88,.45); fill: none; stroke-width: 2; stroke-dasharray: 88; stroke-dashoffset: 88; transition: stroke-dashoffset .7s ease .15s; }
.cin-check path { stroke: #30d158; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .45s ease .75s; }
.cin-line { opacity: 0; transform: translateX(-26px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.cin-line.on { opacity: 1; transform: none; }
.cin-line.on .cin-check circle, .cin-line.on .cin-check path { stroke-dashoffset: 0; }

/* ── neon OFF flicker ── */
.cin-flick { animation: cinNeonOff 2.4s steps(1) .3s 1 forwards; }
@keyframes cinNeonOff {
  0% { opacity: 1; } 8% { opacity: .2; } 12% { opacity: 1; } 20% { opacity: .15; }
  26% { opacity: .9; } 34% { opacity: .1; } 42% { opacity: .8; } 55% { opacity: .12; }
  70% { opacity: .55; } 100% { opacity: .28; }
}

/* ── teaser map sweep ── */
.cin-map #dotmap g { opacity: 0; transition: opacity .55s ease; }
.cin-map #indiaDots { opacity: 0; transition: opacity 1s ease .9s; }
.cin-map .cmarker { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.35); transition: opacity .5s cubic-bezier(.34,1.56,.64,1), transform .5s cubic-bezier(.34,1.56,.64,1); }
.cin-map .map-legend { opacity: 0; transition: opacity .8s ease 1.9s; }
.cin-map.map-on #dotmap g, .cin-map.map-on #indiaDots, .cin-map.map-on .cmarker, .cin-map.map-on .map-legend { opacity: 1; }
.cin-map.map-on .cmarker { transform: scale(1); }

@media (max-width: 860px) {
  #cine-ret { display: none; }
  .cin-ghost { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #cine-boot { display: none; }
  .cin-line { transition: none !important; opacity: 1 !important; transform: none !important; }
  .cin-line .cin-check circle, .cin-line .cin-check path { stroke-dashoffset: 0 !important; }
  .btn.primary::after, .cin-sweep::before, .cin-ldot { animation: none; }
  .cin-flick { animation: none; opacity: .3; }
  .cin-map #dotmap g, .cin-map #indiaDots, .cin-map .cmarker, .cin-map .map-legend { transition: none !important; opacity: 1 !important; transform: none !important; }
}