/* ═══════════════════════════════════════════════════
   QELNIX — cinematics.css
   vibe-cinematics · vibe-chiaroscuro · vibe-shadows
   NEO_NOIR grade · Caravaggio chiaroscuro · Branded depth
═══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   SHADOW SYSTEM — vibe-shadows
   Primary: QELNIX Cyan (#00d4ff) glow shadows
   Depth:   Deep blue-black ambients
══════════════════════════════════════════════════ */

/* Register CSS custom properties for smooth transitions */
@property --sx {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}
@property --sy {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 45%;
}

:root {
  --shadow-rgb:   0, 4, 20;          /* deep space blue-black */
  --cyan-rgb:     0, 212, 255;       /* QELNIX primary glow */
  --gold-rgb:     240, 200, 64;
  --purple-rgb:   100, 50, 200;

  /* Elevation system (vibe-shadows Phase 1) */
  --elev-0: none;
  --elev-1:
    0 1px 2px  rgba(var(--shadow-rgb), 0.4),
    0 2px 4px  rgba(var(--shadow-rgb), 0.3);
  --elev-2:
    0 2px 4px  rgba(var(--shadow-rgb), 0.5),
    0 4px 12px rgba(var(--shadow-rgb), 0.4),
    0 8px 24px rgba(var(--shadow-rgb), 0.25);
  --elev-3:
    0 4px 8px  rgba(var(--shadow-rgb), 0.6),
    0 8px 24px rgba(var(--shadow-rgb), 0.45),
    0 16px 48px rgba(var(--shadow-rgb), 0.3);
  --elev-4:
    0 8px 16px  rgba(var(--shadow-rgb), 0.6),
    0 16px 40px rgba(var(--shadow-rgb), 0.5),
    0 32px 80px rgba(var(--shadow-rgb), 0.35),
    0 64px 160px rgba(var(--shadow-rgb), 0.15);
  --elev-5:
    0 12px 24px  rgba(var(--shadow-rgb), 0.7),
    0 24px 60px  rgba(var(--shadow-rgb), 0.55),
    0 48px 120px rgba(var(--shadow-rgb), 0.4),
    0 96px 240px rgba(var(--shadow-rgb), 0.2);

  /* Branded glow shadows */
  --shadow-cyan-sm:
    0 0 12px rgba(var(--cyan-rgb), 0.3),
    0 0 24px rgba(var(--cyan-rgb), 0.15);
  --shadow-cyan-md:
    0 0 20px rgba(var(--cyan-rgb), 0.4),
    0 0 60px rgba(var(--cyan-rgb), 0.2),
    0 4px 24px rgba(var(--shadow-rgb), 0.5);
  --shadow-cyan-lg:
    0 0 40px rgba(var(--cyan-rgb), 0.5),
    0 0 100px rgba(var(--cyan-rgb), 0.25),
    0 8px 40px rgba(var(--shadow-rgb), 0.6);
  --shadow-gold-glow:
    0 0 20px rgba(var(--gold-rgb), 0.4),
    0 0 60px rgba(var(--gold-rgb), 0.2);
}

/* ══════════════════════════════════════════════════
   CINEMATICS — vibe-cinematics
   NEO_NOIR grade · Letterbox · Film grain
══════════════════════════════════════════════════ */

/* ── NEO_NOIR color grade overlay ── */
/* Applied subtly: desaturated, high contrast, deep shadows */
#hero {
  filter: contrast(1.08) brightness(0.97);
}

/* ── Letterbox bars (cinematic 2.39:1 frame signal) ── */
.letterbox-bar {
  position: absolute;
  left: 0; right: 0;
  height: clamp(28px, 4.5vw, 64px);
  background: #000000;
  z-index: 20;
  pointer-events: none;
}
.letterbox-bar--top    { top: 0; }
.letterbox-bar--bottom { bottom: 0; }

.letterbox-bar--top    { animation: bar-descend 1.4s cubic-bezier(0.76, 0, 0.24, 1) both; }
.letterbox-bar--bottom { animation: bar-ascend  1.4s cubic-bezier(0.76, 0, 0.24, 1) both; }

@keyframes bar-descend {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@keyframes bar-ascend {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── Film grain overlay (animated, cinematic texture) ── */
.grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
  animation: grain-shift 0.12s steps(1) infinite;
  mix-blend-mode: screen;
}

@keyframes grain-shift {
  0%   { background-position: 0 0; }
  10%  { background-position: -5% -10%; }
  20%  { background-position: -15% 5%; }
  30%  { background-position: 7% -25%; }
  40%  { background-position: 20% 25%; }
  50%  { background-position: -25% 10%; }
  60%  { background-position: 15% 5%; }
  70%  { background-position: 0% 15%; }
  80%  { background-position: 25% 35%; }
  90%  { background-position: -10% 10%; }
  100% { background-position: 0 0; }
}

/* ── Scanlines (subtle CRT/surveillance layer) ── */
.scanlines-overlay {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0)    0px,
    rgba(0,0,0,0)    1px,
    rgba(0,0,0,0.03) 1px,
    rgba(0,0,0,0.03) 2px
  );
}

/* ══════════════════════════════════════════════════
   CHIAROSCURO — vibe-chiaroscuro
   Caravaggio tenebrismo · Spotlight · Contrast map
══════════════════════════════════════════════════ */

/* SVG filter is injected in HTML — referenced here */
.chiaroscuro-filter { filter: url(#chiaroscuro-deep); }

/* ── Hero: primary light zone (Caravaggio) ── */
/* The cone of light emerges from center, everything else is void */
.hero-caravaggio-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 55% 65% at 50% 45%,
      rgba(0,212,255,0.06)   0%,
      rgba(26,107,204,0.04)  35%,
      rgba(10,40,100,0.02)   55%,
      transparent            75%
    ),
    radial-gradient(ellipse 30% 40% at 72% 30%,
      rgba(100,50,200,0.05)  0%,
      transparent            60%
    );
  pointer-events: none;
}

/* ── Spotlight cursor overlay (follows mouse on hero) ── */
.spotlight-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: rgba(0,0,0,0.45);
  -webkit-mask: radial-gradient(
    ellipse 380px 280px at var(--sx, 50%) var(--sy, 45%),
    transparent 0%, rgba(0,0,0,0.5) 50%, black 75%
  );
  mask: radial-gradient(
    ellipse 380px 280px at var(--sx, 50%) var(--sy, 45%),
    transparent 0%, rgba(0,0,0,0.5) 50%, black 75%
  );
  transition: --sx 0.15s ease-out, --sy 0.15s ease-out;
}

/* ── Enhanced vignette (dramatic corners → center) ── */
.vignette-cinematic {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 80% at 50% 50%,
      transparent 35%,
      rgba(0,0,0,0.5) 75%,
      rgba(0,0,0,0.85) 100%
    );
}

/* ── Section chiaroscuro contrast map ── */

/* Stats: midtone transition */
.stats-row {
  position: relative;
}
.stats-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(0,212,255,0.03) 0%,
    transparent 50%,
    rgba(100,50,200,0.02) 100%
  );
  pointer-events: none;
}

/* Act 1 Problem: Red/dark zone (shadowed atmosphere) */
#act-1 {
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,
      rgba(20,5,5,0.4) 0%,
      transparent 70%
    );
}

/* Brand: warm mid-tone zone */
#brand {
  position: relative;
}
#brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 10% 50%,
      rgba(0,212,255,0.025) 0%,
      transparent 60%
    );
  pointer-events: none;
}

/* Products: spotlight selective illumination */
#products {
  position: relative;
}
#products::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%,
      rgba(0,212,255,0.04) 0%,
      transparent 65%
    );
  pointer-events: none;
}

/* Earnings: golden beacon zone */
#earnings::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 80% 50%,
      rgba(240,200,64,0.04) 0%,
      transparent 60%
    );
  pointer-events: none;
}

/* CTA: maximum illumination — beacon light */
#cta {
  position: relative;
  overflow: hidden;
}
#cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      rgba(0,212,255,0.07) 0%,
      rgba(26,107,204,0.04) 40%,
      transparent 70%
    );
  pointer-events: none;
}

/* Footer: shadow zone — recedes to darkness */
footer {
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.6) 100%
  );
  pointer-events: none;
}

/* ── Dark reveal — emerge from shadow on scroll ── */
[data-dark-reveal] {
  opacity: 0;
  filter: brightness(0.15) contrast(0.6);
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-out),
              filter 0.9s var(--ease-out),
              transform 0.9s var(--ease-out);
}
[data-dark-reveal].in-view {
  opacity: 1;
  filter: brightness(1) contrast(1);
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════
   SHADOW APPLICATION — vibe-shadows
   Apply elevation system to QELNIX components
══════════════════════════════════════════════════ */

/* Nav: elevation-2 default, elevation-3 when scrolled with glow */
#nav {
  box-shadow: var(--elev-2), 0 1px 0 rgba(var(--cyan-rgb), 0.06);
}
#nav.scrolled {
  box-shadow: var(--elev-3), 0 1px 0 rgba(var(--cyan-rgb), 0.1),
              0 0 30px rgba(var(--shadow-rgb), 0.8);
}

/* Loader: elevation-4 */
#loader {
  box-shadow: none; /* full screen, no shadow needed */
}

/* Brand cards: elevation-2 → elevation-4 hover */
.brand-card {
  box-shadow: var(--elev-2);
  transition: box-shadow var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out),
              border-color var(--t-mid);
}
.brand-card:hover {
  box-shadow: var(--elev-4), var(--shadow-cyan-sm);
  transform: translateY(-6px);
}

/* Product cards: elevation-2 → elevation-5 + cyan glow hover */
.product-card {
  box-shadow: var(--elev-2);
  transition: box-shadow var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out),
              border-color var(--t-mid);
}
.product-card:hover {
  box-shadow: var(--elev-5), var(--shadow-cyan-md);
}

/* Level rows: subtle shadow */
.level-row {
  box-shadow: var(--elev-1);
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.level-row:hover {
  box-shadow: var(--elev-3), var(--shadow-cyan-sm);
  transform: translateX(4px);
}

/* Problem cards: dark elevation (red-tinted) */
.problem-card {
  box-shadow:
    0 2px 8px rgba(0,0,0,0.5),
    0 8px 32px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  transition: box-shadow var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out),
              border-color var(--t-mid);
}
.problem-card:hover {
  box-shadow:
    0 8px 32px rgba(0,0,0,0.6),
    0 0 40px rgba(255,68,68,0.15),
    0 0 0 1px rgba(255,68,68,0.15) inset;
}

/* Team cards: elevation-2 → gold glow hover */
.team-card {
  box-shadow: var(--elev-2);
  transition: box-shadow var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out);
}
.team-card:hover {
  box-shadow: var(--elev-4), var(--shadow-gold-glow);
}

/* CTA box: elevation-5 + maximum cyan glow (beacon light) */
.cta-box {
  box-shadow: var(--elev-5), var(--shadow-cyan-lg);
}

/* Buttons: glow shadows */
.btn-primary {
  box-shadow:
    0 0 0 1px rgba(var(--cyan-rgb), 0.2),
    0 4px 20px rgba(var(--shadow-rgb), 0.5),
    var(--shadow-cyan-sm);
  transition: box-shadow var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out);
}
.btn-primary:hover {
  box-shadow:
    0 0 0 1px rgba(var(--cyan-rgb), 0.4),
    0 8px 32px rgba(var(--shadow-rgb), 0.6),
    var(--shadow-cyan-md);
  transform: translateY(-2px);
}

/* FAQ items: depth shadow */
.faq-item {
  box-shadow: var(--elev-1);
  transition: box-shadow var(--t-fast);
}
.faq-item:hover,
.faq-item.open {
  box-shadow: var(--elev-3), 0 0 0 1px rgba(var(--cyan-rgb), 0.08);
}

/* ── Hero H1: dramatic text shadow ── */
/* Makes text feel carved by the light source */
.hero-h1 {
  text-shadow:
    0 2px 0 rgba(0,0,0,0.4),
    0 4px 12px rgba(0,0,0,0.3),
    0 0 60px rgba(var(--cyan-rgb), 0.12);
}

/* ── Stat values: glow text shadow ── */
.stat-val {
  text-shadow:
    0 0 20px rgba(var(--cyan-rgb), 0.3),
    0 2px 4px rgba(0,0,0,0.4);
}

/* ── Problem stats: red glow text ── */
.problem-stat {
  filter: drop-shadow(0 0 12px rgba(255,68,68,0.4));
}

/* ── Pulse shadow on urgency pulse dot ── */
/* Already handled by urgency-ping keyframe, augmented here: */
.urgency-pulse {
  box-shadow:
    0 0 8px rgba(0,229,160,0.6),
    0 0 16px rgba(0,229,160,0.3);
}

/* ══════════════════════════════════════════════════
   ANIMATED SHADOWS — vibe-shadows Phase 4
══════════════════════════════════════════════════ */

/* CTA pulsing glow (beacon light) */
.cta-box {
  animation: cta-beacon 4s ease-in-out infinite;
}
@keyframes cta-beacon {
  0%, 100% {
    box-shadow: var(--elev-5),
      0 0 40px rgba(var(--cyan-rgb), 0.3),
      0 0 100px rgba(var(--cyan-rgb), 0.12);
  }
  50% {
    box-shadow: var(--elev-5),
      0 0 60px rgba(var(--cyan-rgb), 0.5),
      0 0 160px rgba(var(--cyan-rgb), 0.2);
  }
}

/* Hero pulse dot: glow radiate */
.hero-pulse {
  box-shadow:
    0 0 0 2px rgba(var(--cyan-rgb), 0.4),
    0 0 12px rgba(var(--cyan-rgb), 0.6);
}

/* Logo glow pulse */
.nav-logo img {
  transition: filter var(--t-mid);
}
.nav-logo:hover img {
  filter: drop-shadow(0 0 16px rgba(var(--cyan-rgb), 0.6));
}

/* ══════════════════════════════════════════════════
   COMPOSITIONAL ELEMENTS — vibe-cinematics Phase 5
   Leading lines, rule of thirds, framing
══════════════════════════════════════════════════ */

/* Section dividers: leading lines that guide the eye */
.section-divider {
  position: relative;
  height: 1px;
  margin: 0;
  overflow: visible;
}
.section-divider::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--cyan-rgb), 0.2), transparent);
}
.section-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--cyan-rgb), 0.3);
  box-shadow: 0 0 12px rgba(var(--cyan-rgb), 0.4);
}

/* ── Stats row: separating divider light ── */
.stats-row {
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  box-shadow:
    0 -1px 0 rgba(var(--cyan-rgb), 0.05),
    0 1px 0 rgba(var(--cyan-rgb), 0.05);
}

/* ── Stat cells: vertical separators ── */
.stat-cell + .stat-cell {
  border-left: 1px solid rgba(255,255,255,0.06);
}

/* ══════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Reduce letterbox on mobile */
  .letterbox-bar {
    height: clamp(16px, 3vw, 32px);
  }

  /* Reduce shadow intensity on mobile (performance) */
  .product-card:hover,
  .brand-card:hover {
    box-shadow: var(--elev-3), var(--shadow-cyan-sm);
  }

  .cta-box {
    box-shadow: var(--elev-4), var(--shadow-cyan-md);
    animation: none; /* disable beacon animation on mobile */
  }

  /* Disable spotlight on touch devices */
  .spotlight-overlay {
    display: none;
  }
}

/* ══════════════════════════════════════════════════
   SCENE ATMOSPHERE — vibe-storyteller
   Body class toggles shift global color temperature
   per narrative act (applied by animations-advanced.js)
══════════════════════════════════════════════════ */

/* Act 1 — Il Problema: warm red tension */
body.scene-problem {
  --scene-accent-rgb: 255, 68, 68;
  --scene-accent-opacity: 0.025;
}
body.scene-problem #hero-layer-1 {
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    rgba(255,68,68,0.025) 0%,
    transparent 70%
  );
}

/* Act 2 — La Soluzione: cool cyan confidence */
body.scene-story,
body.scene-solution {
  --scene-accent-rgb: 0, 212, 255;
  --scene-accent-opacity: 0.02;
}

/* Act 3 — La Possibilità: gold warmth */
body.scene-possibility {
  --scene-accent-rgb: 240, 200, 64;
  --scene-accent-opacity: 0.02;
}

/* Arrival: emerald success */
body.scene-arrival {
  --scene-accent-rgb: 0, 229, 160;
  --scene-accent-opacity: 0.025;
}
body.scene-arrival .btn-primary {
  box-shadow:
    0 0 0 1px rgba(0,229,160,0.3),
    0 8px 32px rgba(0,0,0,0.5),
    0 0 30px rgba(0,229,160,0.2);
}

/* ══════════════════════════════════════════════════
   NEON GLOW — vibe-light
   Materialises on .stat-val when .neon-active is added
══════════════════════════════════════════════════ */

.stat-val.neon-active {
  text-shadow:
    0 0 8px  rgba(var(--cyan-rgb), 0.9),
    0 0 20px rgba(var(--cyan-rgb), 0.6),
    0 0 40px rgba(var(--cyan-rgb), 0.3),
    0 2px 4px rgba(0,0,0,0.4);
  animation: neon-pulse 2.5s ease-in-out infinite;
}

@keyframes neon-pulse {
  0%, 100% {
    text-shadow:
      0 0 8px  rgba(var(--cyan-rgb), 0.9),
      0 0 20px rgba(var(--cyan-rgb), 0.6),
      0 0 40px rgba(var(--cyan-rgb), 0.3),
      0 2px 4px rgba(0,0,0,0.4);
  }
  50% {
    text-shadow:
      0 0 12px rgba(var(--cyan-rgb), 1.0),
      0 0 30px rgba(var(--cyan-rgb), 0.8),
      0 0 60px rgba(var(--cyan-rgb), 0.4),
      0 0 100px rgba(var(--cyan-rgb), 0.15),
      0 2px 4px rgba(0,0,0,0.4);
  }
}

/* Text scrub words — revealed word by word via GSAP scrub */
[data-text-reveal] .word-clip {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
[data-text-reveal] .word-inner {
  display: inline-block;
}

/* ══════════════════════════════════════════════════
   BLOB MORPH — vibe-animations Phase 7
   Continuous organic border-radius animation
   Applied to .team-av (team avatar elements)
══════════════════════════════════════════════════ */

@keyframes blob-morph {
  0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
  25%       { border-radius: 30% 60% 42% 58% / 50% 60% 40% 60%; }
  50%       { border-radius: 50% 50% 30% 70% / 40% 56% 44% 60%; }
  75%       { border-radius: 44% 56% 66% 34% / 60% 40% 60% 40%; }
}

.team-av {
  animation: blob-morph 8s ease-in-out infinite;
}