/*!
 * SalesBlast Premium Animations — Companion Stylesheet v1.0
 * Drop-in enhancement for all SalesBlast pages
 */

/* ════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════ */
:root {
  --sb-ease-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --sb-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --sb-ease-smooth:  cubic-bezier(0.16, 1, 0.3, 1);
  --sb-ease-expo:    cubic-bezier(0.19, 1, 0.22, 1);
  --sb-dur-xs:       0.22s;
  --sb-dur-sm:       0.35s;
  --sb-dur-md:       0.55s;
  --sb-dur-lg:       0.82s;
  --sb-dur-xl:       1.1s;

  /* Global Color Palette (Unified) */
  --navy-950: #020814;
  --navy-900: #040d1f;
  --navy-800: #071428;
  --navy-700: #0c1e3c;
  --navy-600: #112650;
  --blue-500: #2563eb;
  --blue-400: #3b82f6;
  --blue-300: #60a5fa;
  --cyan-400: #22d3ee;
  --cyan-300: #67e8f9;
  --violet-500: #7c3aed;
  --violet-400: #8b5cf6;
  --violet-300: #a78bfa;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --white: #ffffff;
  --glow-blue: rgba(37, 99, 235, 0.4);
  --glow-cyan: rgba(34, 211, 238, 0.3);
  --glow-violet: rgba(124, 58, 237, 0.35);
  --glass: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.07);
  --glass-border-strong: rgba(255,255,255,0.12);
}


/* ════════════════════════════════════════
   SCROLL PROGRESS BAR
════════════════════════════════════════ */
.sb-scroll-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
  overflow: visible;
}

.sb-scroll-bar__fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1d4ed8, #3b82f6 30%, #22d3ee 60%, #a78bfa 100%);
  border-radius: 0 2px 2px 0;
  transition: width 0.08s linear;
  will-change: width;
}

.sb-scroll-bar__glow {
  position: absolute;
  top: -3px;
  left: 0%;
  width: 48px; height: 8px;
  border-radius: 4px;
  background: #22d3ee;
  filter: blur(5px);
  opacity: 0.85;
  transform: translateX(-50%);
  transition: left 0.08s linear;
  box-shadow: 0 0 16px 4px rgba(34, 211, 238, 0.5);
}


/* ════════════════════════════════════════
   CURSOR SYSTEMS
════════════════════════════════════════ */
.sb-cursor-glow {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  will-change: transform;
  /* width / height / background set via JS */
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition: background 0.5s ease;
}

.sb-cursor-dot {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.75);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
  will-change: left, top;
  transform: translate(-50%, -50%);
  transition: transform 0.18s var(--sb-ease-spring),
              background 0.25s ease,
              box-shadow  0.25s ease;
}

.sb-cursor-dot--hover {
  transform: translate(-50%, -50%) scale(3.5);
  background: rgba(34, 211, 238, 0.4);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.35);
}

.sb-cursor-dot--click {
  transform: translate(-50%, -50%) scale(0.5);
}


/* ════════════════════════════════════════
   REVEAL SYSTEM
   .sb-reveal = will-animate element
   .sb-in     = revealed state
════════════════════════════════════════ */
.sb-reveal {
  will-change: transform, opacity, filter;
  transition:
    opacity   var(--sb-dur-md) var(--sb-ease-quart),
    transform var(--sb-dur-md) var(--sb-ease-quart),
    filter    var(--sb-dur-md) ease;
}

/* default: fade + rise */
.sb-reveal:not(.sb-in) {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}
.sb-reveal.sb-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* variants */
.sb-reveal--scale:not(.sb-in)      { opacity: 0; transform: scale(0.90); }
.sb-reveal--blur:not(.sb-in)       { opacity: 0; filter: blur(12px); transform: translate3d(0, 16px, 0); }
.sb-reveal--left:not(.sb-in)       { opacity: 0; transform: translate3d(40px, 0, 0); }
.sb-reveal--right:not(.sb-in)      { opacity: 0; transform: translate3d(-40px, 0, 0); }
.sb-reveal--down:not(.sb-in)       { opacity: 0; transform: translate3d(0, -24px, 0); }
.sb-reveal--fast .sb-reveal        { transition-duration: var(--sb-dur-sm); }
.sb-reveal--slow .sb-reveal        { transition-duration: var(--sb-dur-lg); }

  /* ─── Cinematic Module Transitions ─── */
  .cinematic-section {
    position: relative;
    overflow: hidden;
    background: #020611;
  }
  
  /* Shared Cinematic Styles */
  .grad-text {
    background: linear-gradient(115deg, var(--blue-300) 0%, var(--cyan-400) 42%, var(--violet-400) 88%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  }
  
  /* ─── Module: Hero Cinematic (hero.html) ─── */
  .hero-cinematic {
    min-height: 100vh;
    display: grid; grid-template-columns: 1fr 1fr;
    padding-top: 64px;
    background: radial-gradient(ellipse 65% 50% at 15% 25%, rgba(13,40,90,0.35), transparent),
                radial-gradient(ellipse 55% 55% at 85% 65%, rgba(55,15,110,0.2), transparent),
                #020611;
  }
  .hero-left {
    display: flex; flex-direction: column; justify-content: center;
    padding: 80px 64px 80px 96px;
    position: relative; z-index: 20;
  }
  .hero-right { position: relative; overflow: hidden; z-index: 15; }
  
  /* ─── Module: Story Cinematic (story.html) ─── */
  .story-cinematic {
    padding: 160px 0 100px;
    background: radial-gradient(ellipse 60% 60% at 80% 30%, rgba(55,15,110,0.15), transparent),
                radial-gradient(ellipse 50% 50% at 20% 70%, rgba(13,40,90,0.15), transparent),
                #020611;
  }
  .intro-block { max-width: 1160px; margin: 0 auto; padding: 0 64px; display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 80px; }
  .constellation-zone { position: relative; z-index: 10; height: 640px; margin-top: 24px; }
  
  /* ─── Module: Ecosystem Cinematic (ecosystem.html) ─── */
  .eco-cinematic {
    padding: 164px 48px 144px;
    background: radial-gradient(ellipse 60% 50% at 20% 30%, rgba(13,40,90,0.25), transparent),
                radial-gradient(ellipse 50% 55% at 80% 60%, rgba(55,15,100,0.18), transparent),
                #020611;
  }
  .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1280px; margin: 0 auto; }
  
  /* ─── Module: Process Cinematic (process.html) ─── */
  .process-cinematic {
    padding: 168px 48px 120px;
    background: radial-gradient(ellipse 60% 50% at 50% 90%, rgba(4,45,85,0.15), transparent),
                #020611;
  }
  .timeline-wrap { max-width: 1080px; margin: 0 auto; position: relative; z-index: 20; }
  
  /* ─── Module: CTA Cinematic (cta.html) ─── */
  .cta-cinematic {
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #02060f;
  }
  #stars-canvas, #scene-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  #scene-canvas { z-index: 2; }
  .vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 40%, rgba(1,4,11,0.85) 100%); }


/* ════════════════════════════════════════
   STAGGER UTILITIES
════════════════════════════════════════ */
[data-stagger] > * { --_delay: var(--stagger-delay, 0ms); }
[data-stagger] > *:nth-child(1)  { --stagger-delay: 0ms;   }
[data-stagger] > *:nth-child(2)  { --stagger-delay: 75ms;  }
[data-stagger] > *:nth-child(3)  { --stagger-delay: 150ms; }
[data-stagger] > *:nth-child(4)  { --stagger-delay: 225ms; }
[data-stagger] > *:nth-child(5)  { --stagger-delay: 300ms; }
[data-stagger] > *:nth-child(6)  { --stagger-delay: 375ms; }
[data-stagger] > *:nth-child(7)  { --stagger-delay: 450ms; }
[data-stagger] > *:nth-child(8)  { --stagger-delay: 525ms; }
[data-stagger] > *:nth-child(9)  { --stagger-delay: 600ms; }

/* stagger reveal — transition-delay driven by CSS variable */
[data-stagger] > .sb-reveal {
  transition-delay: var(--stagger-delay, 0ms);
}


/* ════════════════════════════════════════
   CARD SPOTLIGHT EFFECT
   (cursor-driven radial highlight)
════════════════════════════════════════ */
.sb-card-spotlight {
  position: relative;
  overflow: hidden;
}
.sb-card-spotlight::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle 180px at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(255,255,255,0.055) 0%,
    rgba(255,255,255,0.02)  40%,
    transparent             70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
.sb-card-spotlight.sb-spot-active::after {
  opacity: 1;
}


/* ════════════════════════════════════════
   MAGNETIC BUTTON BASE
════════════════════════════════════════ */
[data-magnetic],
.btn-hero-primary,
.btn-primary-cta,
.btn-glow,
.btn-glow2,
.btn-book {
  will-change: transform;
  transition:
    transform   0.4s var(--sb-ease-spring),
    box-shadow  0.3s ease;
}
/* override transition to allow JS-driven transform without jank */
[data-magnetic].sb-mag-active,
.sb-mag-active {
  transition: none !important;
}


/* ════════════════════════════════════════
   NAV ACTIVE STATE
════════════════════════════════════════ */
.sb-nav-active {
  color: #ffffff !important;
  position: relative;
}
.sb-nav-active::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  border-radius: 1px;
  animation: sbNavLine 0.4s var(--sb-ease-smooth) forwards;
  box-shadow: 0 0 6px rgba(34,211,238,0.6);
}
@keyframes sbNavLine {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}


/* ════════════════════════════════════════
   SHIMMER (glass panels, cards)
════════════════════════════════════════ */
@keyframes sbShimmer {
  0%   { background-position: -250% 0; }
  100% { background-position:  250% 0; }
}
.sb-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent  30%,
    rgba(255,255,255,0.035) 46%,
    rgba(255,255,255,0.07)  50%,
    rgba(255,255,255,0.035) 54%,
    transparent  70%
  );
  background-size: 250% 100%;
  animation: sbShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}


/* ════════════════════════════════════════
   GLOW BORDER PULSE
════════════════════════════════════════ */
@keyframes sbBorderPulse {
  0%,100% {
    box-shadow:
      0 0 0 1px rgba(59,130,246,0.18),
      0 0 20px rgba(59,130,246,0.06);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(34,211,238,0.3),
      0 0 36px rgba(34,211,238,0.12);
  }
}
.sb-border-pulse {
  animation: sbBorderPulse 4s ease infinite;
}


/* ════════════════════════════════════════
   AMBIENT PULSE FLASH
   (full-page periodic atmosphere)
════════════════════════════════════════ */
.sb-ambient-flash {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 55% at 50% 45%,
    rgba(37,99,235,0.04), transparent 70%
  );
  animation: sbAmbientFlash 1.6s var(--sb-ease-expo) forwards;
}
@keyframes sbAmbientFlash {
  0%   { opacity: 0; transform: scale(0.85); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25); }
}


/* ════════════════════════════════════════
   FLOATING ANIMATION
   (glass panels, floating cards)
════════════════════════════════════════ */
@keyframes sbFloatA { 0%,100%{transform:translateY(0)}   50%{transform:translateY(-8px)}  }
@keyframes sbFloatB { 0%,100%{transform:translateY(-4px)} 50%{transform:translateY(5px)}   }
@keyframes sbFloatC { 0%,100%{transform:translateY(0)}   33%{transform:translateY(-6px)} 66%{transform:translateY(3px)} }

.sb-float-a { animation: sbFloatA 7s   ease-in-out infinite; }
.sb-float-b { animation: sbFloatB 8.5s ease-in-out infinite; }
.sb-float-c { animation: sbFloatC 10s  ease-in-out infinite; }


/* ════════════════════════════════════════
   GRID DRIFT
════════════════════════════════════════ */
@keyframes sbGridDrift {
  0%,100% { transform: translate(0, 0);     }
  25%     { transform: translate(3px, 2px); }
  50%     { transform: translate(0, 4px);   }
  75%     { transform: translate(-3px, 1px);}
}
#grid-canvas {
  animation: sbGridDrift 18s ease-in-out infinite;
}


/* ════════════════════════════════════════
   COUNTER NUMBER POP
════════════════════════════════════════ */
@keyframes sbCounterPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.sb-counter-pop {
  animation: sbCounterPop 0.4s var(--sb-ease-spring);
}


/* ════════════════════════════════════════
   SCAN LINE (section dividers)
════════════════════════════════════════ */
@keyframes sbScan {
  0%   { left: -10%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}
.sb-scan-line {
  position: relative;
  height: 1px;
  background: rgba(255,255,255,0.06);
  overflow: visible;
}
.sb-scan-line::after {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 80px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--scan-color, #22d3ee), transparent);
  filter: blur(1px);
  box-shadow: 0 0 10px var(--scan-color, #22d3ee);
  animation: sbScan 6s ease-in-out infinite;
}


/* ════════════════════════════════════════
   BUTTON RIPPLE
════════════════════════════════════════ */
@keyframes sbRipple {
  from { transform: scale(0); opacity: 0.4; }
  to   { transform: scale(3); opacity: 0; }
}
.sb-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  pointer-events: none;
  animation: sbRipple 0.5s ease-out forwards;
  will-change: transform, opacity;
}


/* ════════════════════════════════════════
   LINK HOVER UNDERLINE
════════════════════════════════════════ */
.sb-link-hover {
  position: relative;
  text-decoration: none !important;
}
.sb-link-hover::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--sb-ease-quart);
  opacity: 0.5;
}
.sb-link-hover:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* ════════════════════════════════════════
   SECTION ATMOSPHERE TRANSITIONS
   (background hue shifts between sections)
════════════════════════════════════════ */
@property --current-hue {
  syntax: '<number>';
  initial-value: 220;
  inherits: true;
}
body {
  transition: --current-hue 1.2s ease;
}


/* ════════════════════════════════════════
   HERO HEADLINE GRADIENT ANIMATION
════════════════════════════════════════ */
@keyframes sbGradShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
.sb-grad-animate {
  background-size: 200% 200%;
  animation: sbGradShift 6s ease infinite;
}


/* ════════════════════════════════════════
   LOADING ENTRANCE (page-level)
════════════════════════════════════════ */
@keyframes sbPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: sbPageIn 0.5s ease both;
}


/* ════════════════════════════════════════
   NETWORK LINE FLOW
   (SVG / canvas companion class)
════════════════════════════════════════ */
@keyframes sbLineDash {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
.sb-flow-line {
  stroke-dasharray: 6 4;
  animation: sbLineDash 12s linear infinite;
}


/* ════════════════════════════════════════
   STAT TICKER (number highlight flash)
════════════════════════════════════════ */
@keyframes sbStatFlash {
  0%,100% { text-shadow: none; }
  50%     { text-shadow: 0 0 24px currentColor; }
}
.sb-stat-flash {
  animation: sbStatFlash 2.5s ease infinite;
}


/* ════════════════════════════════════════
   GLASS CARD HOVER LIFT
════════════════════════════════════════ */
.eco-card,
.feat-card,
.float-card,
.card-shell,
.infra-card,
.feature-card,
.testimonial-card {
  transition:
    transform   0.38s var(--sb-ease-quart),
    box-shadow  0.38s ease,
    border-color 0.3s ease,
    background  0.3s ease !important;
  will-change: transform;
}


/* ════════════════════════════════════════
   REDUCED MOTION OVERRIDES
════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
  .sb-cursor-glow,
  .sb-cursor-dot    { display: none !important; }
  .sb-scroll-bar    { display: none !important; }
  .sb-ambient-flash { display: none !important; }
  #grid-canvas      { animation: none !important; }
}