/* ══════════════════════════════════════════════════════════
   cinematic-claude.css — Premium visual layer for Claude AI fiches
   Techniques from creation-site-3d skill, adapted for light theme
   Loads on top of existing CSS — non-destructive overlays only
   ══════════════════════════════════════════════════════════ */

/* ── 1. CURSOR GLOW (desktop only) ────────────────────── */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 600px; height: 600px;
  background: radial-gradient(circle,
    rgba(139,92,246,0.045) 0%,
    rgba(236,72,153,0.02) 30%,
    transparent 60%
  );
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 0;
  transition: opacity 0.4s ease;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) { .cursor-glow { display: none; } }
@media (hover: none) { .cursor-glow { display: none; } }

/* ── 2. SPOTLIGHT BORDER CARDS ────────────────────────── */
.st-card,
.pastel-card,
.biz-card,
.feature-card,
.traffic-card,
.usecase-card,
.compare-col,
.ba-box,
.schema-card,
.quiz-block {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
.st-card::after,
.pastel-card::after,
.biz-card::after,
.feature-card::after,
.traffic-card::after,
.usecase-card::after,
.compare-col::after,
.ba-box::after,
.schema-card::after,
.quiz-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    350px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(139,92,246,0.06),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 10;
  border-radius: inherit;
}
.st-card:hover::after,
.pastel-card:hover::after,
.biz-card:hover::after,
.feature-card:hover::after,
.traffic-card:hover::after,
.usecase-card:hover::after,
.compare-col:hover::after,
.ba-box:hover::after,
.schema-card:hover::after,
.quiz-block:hover::after {
  opacity: 1;
}

/* ── 3. NAVBAR SCROLL-TO-PILL ─────────────────────────── */
/* Default: full-width sticky bar (already in fiche-chapters.css) */
/* Scrolled state: pill centered with glass-morphism               */
.ch-header {
  transition:
    max-width 0.45s cubic-bezier(0.16,1,0.3,1),
    border-radius 0.45s cubic-bezier(0.16,1,0.3,1),
    margin 0.45s cubic-bezier(0.16,1,0.3,1),
    padding 0.45s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.45s ease,
    border-color 0.45s ease;
  max-width: 100%;
  margin: 0 auto;
  left: 0; right: 0;
  border-radius: 0;
}

.ch-header.pill {
  max-width: 620px;
  margin: 8px auto 0;
  border-radius: 100px;
  padding: 0 24px;
  height: 44px;
  border-bottom: 1px solid rgba(139,92,246,0.12);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.04),
    0 0 0 1px rgba(139,92,246,0.06);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.ch-header.pill .ch-header-brand {
  font-size: 13px;
}

.ch-header.pill .ch-header-back {
  font-size: 12px;
}

@media (max-width: 640px) {
  .ch-header.pill {
    max-width: calc(100% - 24px);
    margin: 6px auto 0;
    padding: 0 16px;
  }
}

/* ── 4. COUNT-UP STAT GLOW ────────────────────────────── */
.stat-number.counting,
.spec-number.counting {
  color: var(--violet);
  text-shadow:
    0 0 16px rgba(139,92,246,0.25),
    0 0 4px rgba(236,72,153,0.15);
  transition: text-shadow 0.3s ease, color 0.3s ease;
}

.stat-number.counted,
.spec-number.counted {
  color: var(--ink);
  text-shadow: none;
  transition: text-shadow 0.6s ease, color 0.6s ease;
}

/* ── 5. CINEMATIC TEXT REVEAL ─────────────────────────── */
/* Only targets elements NOT already animated by claude-ai-animations.js */
.cine-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cine-reveal.cine-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for sequential reveals */
.cine-reveal.cine-d1 { transition-delay: 0.08s; }
.cine-reveal.cine-d2 { transition-delay: 0.16s; }
.cine-reveal.cine-d3 { transition-delay: 0.24s; }
.cine-reveal.cine-d4 { transition-delay: 0.32s; }

/* ── 6. ENHANCED PULL-QUOTE ───────────────────────────── */
.pull-quote {
  position: relative;
}
.pull-quote::before {
  content: '';
  position: absolute;
  left: -2px; top: -4px; bottom: -4px;
  width: 3px;
  background: linear-gradient(180deg, var(--rose), var(--violet));
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.pull-quote:hover::before {
  opacity: 1;
}

/* ── 7. SCROLL INDICATOR PULSE ────────────────────────── */
.scroll-indicator {
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(4px); }
}

/* ── 8. SCENE TRANSITION BORDER ───────────────────────── */
.scene + .scene::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(139,92,246,0.15) 30%,
    rgba(236,72,153,0.15) 70%,
    transparent
  );
  pointer-events: none;
}

/* ── 9. INTERACTIVE HOVER LIFT ────────────────────────── */
.subnav-link,
.hero-cta,
.btn-primary-pastel,
.btn-secondary-pastel {
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
}
.subnav-link:active,
.hero-cta:active,
.btn-primary-pastel:active,
.btn-secondary-pastel:active {
  transform: translateY(0) scale(0.97);
}