/* ============================================================
   AFG · CINEMATIC LAYER  (cinematic.css)
   Code-driven "b-roll" — Ken Burns, particle field, terminal,
   device mockups, film grain, video-hero scaffold.
   Additive, dependency-free. Pairs with cinematic.js.
   Royal #1E3A8A structure · Gold premium pop.
   All motion respects prefers-reduced-motion.
   ============================================================ */

/* ---- shared tokens fallback (in case loaded standalone) ---- */
:root {
  --cine-ink:   #0b1020;
  --cine-ink-2: #111935;
  --cine-grid:  rgba(110, 168, 255, 0.10);
}

/* ============================================================
   1 · PARTICLE / CONSTELLATION CANVAS
   Driven by cinematic.js. Target: [data-particles] or the
   existing .ic2-particles-canvas.
============================================================ */
[data-particles] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   2 · KEN BURNS  (slow cinematic pan/zoom on photos)
   Add data-kenburns to an <img> or a background element.
   JS adds .cine-kb-on once it's safe (motion allowed + in view).
============================================================ */
[data-kenburns] {
  will-change: transform;
  transform: scale(1.04);
  transition: transform 0.6s ease;
}
@keyframes cineKenBurns {
  0%   { transform: scale(1.05) translate3d(0, 0, 0); }
  100% { transform: scale(1.16) translate3d(-2.2%, -2.4%, 0); }
}
.cine-kb-on[data-kenburns] {
  animation: cineKenBurns 26s ease-in-out infinite alternate;
}
/* alt direction variant */
.cine-kb-on[data-kenburns="2"] { animation-name: cineKenBurns2; animation-duration: 32s; }
@keyframes cineKenBurns2 {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  100% { transform: scale(1.18) translate3d(2.4%, -1.8%, 0); }
}

/* ============================================================
   3 · FILM GRAIN + VIGNETTE  (opt-in via class on a section)
============================================================ */
.cine-grain { position: relative; }
.cine-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.05;
  mix-blend-mode: overlay;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: cineGrainShift 0.6s steps(2) infinite;
}
@keyframes cineGrainShift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-4px, 3px); }
  100% { transform: translate(3px, -2px); }
}
.cine-vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.28) 100%);
}

/* ============================================================
   4 · SCANLINE SWEEP (generic, reusable)
============================================================ */
.cine-scan { position: relative; overflow: hidden; }
.cine-scan::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 28%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(110,168,255,0) 0%, rgba(110,168,255,0.10) 50%, rgba(110,168,255,0) 100%);
  animation: cineScan 7s linear infinite;
}
@keyframes cineScan {
  0%   { transform: translateY(-120%); }
  100% { transform: translateY(460%); }
}

/* ============================================================
   5 · CINEMATIC TECH SHOWCASE SECTION
============================================================ */
.cine-showcase {
  position: relative;
  background: linear-gradient(180deg, #0b1020 0%, #0e1733 60%, #0b1020 100%);
  color: #e8ecfb;
  padding: 110px 24px;
  overflow: hidden;
}
.cine-showcase::before {  /* animated tech grid */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--cine-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--cine-grid) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
  animation: cineGridDrift 30s linear infinite;
  opacity: 0.8;
  z-index: 0;
}
@keyframes cineGridDrift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 46px 46px, 46px 46px; }
}
.cine-showcase-glow {
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  filter: blur(130px);
  opacity: 0.30;
  z-index: 0;
  pointer-events: none;
}
.cine-showcase-glow.g1 { background: radial-gradient(circle, #1E3A8A, transparent 70%); top: -160px; left: -120px; }
.cine-showcase-glow.g2 { background: radial-gradient(circle, #d4af37, transparent 70%); bottom: -200px; right: -120px; opacity: 0.18; }

.cine-showcase-inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) { .cine-showcase-inner { grid-template-columns: 1fr; gap: 36px; } }

.cine-showcase-copy .ic2-eyebrow,
.cine-showcase-copy .cine-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: #d4af37; margin-bottom: 18px;
}
.cine-showcase-copy .cine-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #d4af37; }
.cine-showcase h2 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.02em;
  margin: 0 0 18px; color: #fff;
}
.cine-showcase h2 .grad {
  background: var(--gold-grad, linear-gradient(135deg,#e7c75a,#d4af37,#b8901f));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cine-showcase p.lead { font-size: 16px; line-height: 1.7; color: rgba(232,236,251,0.72); margin: 0 0 24px; max-width: 46ch; }
.cine-showcase-feats { list-style: none; margin: 0 0 28px; padding: 0; }
.cine-showcase-feats li {
  position: relative; padding: 8px 0 8px 28px; font-size: 14.5px; color: rgba(232,236,251,0.9);
}
.cine-showcase-feats li::before {
  content: "▸"; position: absolute; left: 4px; top: 8px; color: #d4af37; font-weight: 700;
}

/* ============================================================
   6 · TERMINAL WINDOW  (live typing via cinematic.js)
============================================================ */
.cine-terminal {
  position: relative;
  background: rgba(8, 12, 28, 0.92);
  border: 1px solid rgba(120, 150, 230, 0.18);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,175,55,0.06);
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cine-terminal-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cine-terminal-bar .dot { width: 12px; height: 12px; border-radius: 50%; }
.cine-terminal-bar .r { background: #ff5f57; }
.cine-terminal-bar .y { background: #febc2e; }
.cine-terminal-bar .g { background: #28c840; }
.cine-terminal-bar .title {
  margin-left: 10px; font-size: 12px; color: rgba(232,236,251,0.5);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em;
}
.cine-terminal-body {
  padding: 22px 22px 26px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.75; color: #cdd6f4;
  min-height: 280px;
  white-space: pre-wrap;
}
.cine-terminal-body .prompt { color: #d4af37; }
.cine-terminal-body .ok     { color: #5eff8a; }
.cine-terminal-body .accent { color: #6ea8ff; }
.cine-terminal-body .muted  { color: #7f8db0; }
.cine-terminal-body .warn   { color: #febc2e; }
.cine-caret {
  display: inline-block; width: 9px; height: 16px;
  background: #d4af37; vertical-align: text-bottom; margin-left: 2px;
  animation: cineBlink 1s steps(1) infinite;
}
@keyframes cineBlink { 50% { opacity: 0; } }

/* ============================================================
   7 · BROWSER / DEVICE MOCKUP
============================================================ */
.cine-device {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(120,150,230,0.18);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  background: #0b1020;
}
.cine-device-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cine-device-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.cine-device-bar .url {
  margin-left: 10px; flex: 1; font-size: 11.5px; color: rgba(232,236,251,0.45);
  font-family: ui-monospace, monospace; background: rgba(255,255,255,0.04);
  padding: 4px 12px; border-radius: 100px;
}
.cine-device img { display: block; width: 100%; height: auto; }

/* ============================================================
   8 · VIDEO B-ROLL SCAFFOLD
   <video class="cine-broll" data-broll poster="...">.
   Shows poster by default; cinematic.js fades it in & plays
   ONLY when a <source> exists and motion/data conditions allow.
============================================================ */
.cine-broll {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.cine-broll.cine-broll-ready { opacity: 1; }
/* darkening scrim so foreground text stays readable over footage */
.cine-broll-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,12,28,0.55) 0%, rgba(8,12,28,0.35) 50%, rgba(8,12,28,0.7) 100%);
  opacity: 0; transition: opacity 1.2s ease;
}
.cine-broll-scrim.cine-broll-ready { opacity: 1; }

/* ============================================================
   9 · GLITCH / DECODE TEXT (subtle, opt-in via [data-glitch])
============================================================ */
[data-glitch] { position: relative; display: inline-block; }
[data-glitch].cine-glitching::before,
[data-glitch].cine-glitching::after {
  content: attr(data-glitch-text);
  position: absolute; left: 0; top: 0; width: 100%;
  clip-path: inset(0 0 0 0);
}
[data-glitch].cine-glitching::before { color: #6ea8ff; transform: translate(-2px, 0); opacity: 0.7; }
[data-glitch].cine-glitching::after  { color: #d4af37; transform: translate(2px, 0);  opacity: 0.7; }

/* ============================================================
   REDUCED MOTION — kill all looping motion, keep static frames
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cine-kb-on[data-kenburns],
  .cine-grain::after,
  .cine-scan::before,
  .cine-showcase::before,
  .cine-caret { animation: none !important; }
  [data-kenburns] { transform: none; }
  .cine-broll { display: none; }
}