/* StreamBlur Premium Chromatic Effects
   Liquid Metal / Apple Pro Aesthetic */

/* ================================
   1. CHROMATIC VARIABLES
   ================================ */
:root {
  --chrome-gradient: linear-gradient(
    135deg,
    #1a1a2e 0%,
    #16213e 20%,
    #0f3460 40%,
    #533483 60%,
    #e94560 80%,
    #1a1a2e 100%
  );
  
  --liquid-metal: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.15) 25%,
    rgba(200,200,255,0.2) 40%,
    rgba(255,180,255,0.15) 60%,
    rgba(255,255,255,0.1) 75%,
    rgba(255,255,255,0.05) 100%
  );
  
  --refraction-glow: 
    0 0 20px rgba(99, 102, 241, 0.3),
    0 0 40px rgba(168, 85, 247, 0.2),
    0 0 60px rgba(236, 72, 153, 0.1);
  
  --chromatic-border: linear-gradient(
    90deg,
    #6366f1 0%,
    #8b5cf6 25%,
    #ec4899 50%,
    #f43f5e 75%,
    #6366f1 100%
  );
}

/* ================================
   2. HERO CHROMATIC BACKGROUND
   ================================ */
.hero-chromatic {
  position: relative;
  background: #0a0f1a;
  overflow: hidden;
}

.hero-chromatic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 70% 80%, rgba(168, 85, 247, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 20% 60%, rgba(236, 72, 153, 0.15) 0%, transparent 50%);
  z-index: 0;
}

/* Animated flowing chrome lines */
.chrome-flow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.chrome-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.1) 10%,
    rgba(99, 102, 241, 0.6) 30%,
    rgba(168, 85, 247, 0.8) 50%,
    rgba(236, 72, 153, 0.6) 70%,
    rgba(255,255,255,0.1) 90%,
    transparent 100%
  );
  border-radius: 2px;
  filter: blur(0.5px);
  opacity: 0;
  animation: flowLine var(--flow-duration, 8s) ease-in-out infinite;
  animation-delay: var(--flow-delay, 0s);
  animation-fill-mode: both;
}

/* Sparse flowing lines - subtle treat, not distraction */
/* Start with delay so page loads clean, then lines appear randomly */
.chrome-line:nth-child(1) { top: 35%; width: 55%; left: -35%; --flow-duration: 18s; --flow-delay: 3s; }
.chrome-line:nth-child(2) { top: 65%; width: 50%; left: -30%; --flow-duration: 22s; --flow-delay: 12s; }
.chrome-line:nth-child(3) { display: none; } /* Hidden - only 2 lines */

@keyframes flowLine {
  0% {
    transform: translateX(-100px) scaleX(0.6);
    opacity: 0;
  }
  5% {
    opacity: 0;
  }
  15% {
    opacity: 0.7;
  }
  50% {
    transform: translateX(100vw) scaleX(1.1);
    opacity: 0.9;
  }
  85% {
    opacity: 0.7;
  }
  95% {
    opacity: 0;
  }
  100% {
    transform: translateX(200vw) scaleX(0.6);
    opacity: 0;
  }
}

/* Iridescent orbs floating */
.chrome-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,0.15) 0%,
    rgba(168, 85, 247, 0.1) 30%,
    rgba(236, 72, 153, 0.05) 60%,
    transparent 70%
  );
  filter: blur(40px);
  animation: floatOrb var(--orb-duration, 20s) ease-in-out infinite;
  animation-delay: var(--orb-delay, 0s);
}

.chrome-orb:nth-child(1) { 
  width: 400px; height: 400px; 
  top: -100px; right: -50px; 
  --orb-duration: 25s; --orb-delay: 0s;
}
.chrome-orb:nth-child(2) { 
  width: 300px; height: 300px; 
  bottom: -50px; left: -100px; 
  --orb-duration: 20s; --orb-delay: 5s;
}
.chrome-orb:nth-child(3) { 
  width: 200px; height: 200px; 
  top: 40%; left: 30%; 
  --orb-duration: 18s; --orb-delay: 3s;
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -40px) scale(1.1); }
  50% { transform: translate(-20px, 30px) scale(0.9); }
  75% { transform: translate(40px, 20px) scale(1.05); }
}

/* ================================
   3. SECTION DIVIDERS
   ================================ */
.chrome-divider {
  position: relative;
  height: 60px;
  background: linear-gradient(180deg, transparent 0%, #0a0f1a 50%, transparent 100%);
  overflow: hidden;
}

.chrome-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(99, 102, 241, 0.3) 15%,
    rgba(99, 102, 241, 0.8) 30%,
    rgba(168, 85, 247, 1) 50%,
    rgba(236, 72, 153, 0.8) 70%,
    rgba(236, 72, 153, 0.3) 85%,
    transparent 100%
  );
  animation: shimmerDivider 3s ease-in-out infinite;
}

.chrome-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 30px;
  background: radial-gradient(
    ellipse at center,
    rgba(168, 85, 247, 0.4) 0%,
    transparent 70%
  );
  filter: blur(10px);
  animation: pulseDivider 2s ease-in-out infinite;
}

@keyframes shimmerDivider {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes pulseDivider {
  0%, 100% { transform: translate(-50%, -50%) scaleX(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scaleX(1.5); opacity: 0.8; }
}

/* Alternative wave divider */
.chrome-divider-wave {
  position: relative;
  height: 80px;
  background: linear-gradient(180deg, var(--white) 0%, #0a0f1a 100%);
  overflow: hidden;
}

.chrome-divider-wave svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
}

.chrome-divider-wave path {
  fill: none;
  stroke: url(#chromeGradient);
  stroke-width: 2;
  animation: wavePath 4s ease-in-out infinite;
}

@keyframes wavePath {
  0%, 100% { d: path('M0,40 Q250,20 500,40 T1000,40'); }
  50% { d: path('M0,40 Q250,60 500,40 T1000,40'); }
}

/* ================================
   4. CARD CHROMATIC BORDERS
   ================================ */
.card-chrome {
  position: relative;
  background: rgba(255,255,255,0.95);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-chrome::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.2) 0%,
    rgba(168, 85, 247, 0.2) 50%,
    rgba(236, 72, 153, 0.2) 100%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.card-chrome::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 23px;
  background: var(--chromatic-border);
  background-size: 300% 100%;
  z-index: -2;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.4s ease;
  animation: chromaticFlow 4s linear infinite;
}

.card-chrome:hover::before {
  opacity: 1;
}

.card-chrome:hover::after {
  opacity: 0.7;
}

.card-chrome:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 20px 40px rgba(0,0,0,0.1),
    0 0 30px rgba(99, 102, 241, 0.1),
    0 0 60px rgba(168, 85, 247, 0.05);
}

@keyframes chromaticFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Dark variant for dark sections */
.card-chrome-dark {
  background: rgba(10, 15, 26, 0.95);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--white);
}

.card-chrome-dark::before {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.3) 0%,
    rgba(168, 85, 247, 0.3) 50%,
    rgba(236, 72, 153, 0.3) 100%
  );
}

.card-chrome-dark:hover {
  background: rgba(15, 20, 35, 0.98);
  border-color: rgba(168, 85, 247, 0.3);
}

/* ================================
   5. CTA CHROMATIC SECTION
   ================================ */
.cta-chromatic {
  position: relative;
  padding: 10rem 2rem;
  background: #0a0f1a;
  overflow: hidden;
}

/* Liquid metal background */
.cta-chromatic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 100% 80% at 50% 120%, rgba(99, 102, 241, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 80% 20%, rgba(168, 85, 247, 0.3) 0%, transparent 40%),
    radial-gradient(ellipse 60% 50% at 10% 50%, rgba(236, 72, 153, 0.25) 0%, transparent 40%);
  animation: ctaShift 15s ease-in-out infinite;
}

@keyframes ctaShift {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Animated chrome bands */
.cta-chrome-band {
  position: absolute;
  height: 150%;
  width: 120px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255,255,255,0.02) 20%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.02) 80%,
    transparent 100%
  );
  transform: rotate(15deg);
  animation: bandSweep 8s ease-in-out infinite;
}

.cta-chrome-band:nth-child(1) { left: 10%; animation-delay: 0s; }
.cta-chrome-band:nth-child(2) { left: 30%; animation-delay: 2s; width: 80px; }
.cta-chrome-band:nth-child(3) { left: 60%; animation-delay: 4s; width: 100px; }
.cta-chrome-band:nth-child(4) { left: 85%; animation-delay: 6s; width: 60px; }

@keyframes bandSweep {
  0%, 100% { transform: rotate(15deg) translateY(-20%); opacity: 0.3; }
  50% { transform: rotate(15deg) translateY(20%); opacity: 0.7; }
}

/* Refraction particles */
.cta-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
  opacity: 0;
  animation: particleFloat 6s ease-in-out infinite;
}

.cta-particle:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.cta-particle:nth-child(2) { top: 60%; left: 25%; animation-delay: 1s; }
.cta-particle:nth-child(3) { top: 30%; left: 70%; animation-delay: 2s; }
.cta-particle:nth-child(4) { top: 70%; left: 80%; animation-delay: 3s; }
.cta-particle:nth-child(5) { top: 50%; left: 50%; animation-delay: 4s; }

@keyframes particleFloat {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0); }
  50% { opacity: 0.8; transform: translateY(-30px) scale(1); }
}

.cta-chromatic .cta-content {
  position: relative;
  z-index: 10;
}

.cta-chromatic h2 {
  background: linear-gradient(135deg, #fff 0%, #c4b5fd 50%, #f9a8d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-chromatic .btn-chrome {
  background: linear-gradient(135deg, #fff 0%, #f3f4f6 100%);
  color: #0a0f1a;
  padding: 1.25rem 2.5rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.cta-chromatic .btn-chrome::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 103px;
  background: var(--chromatic-border);
  background-size: 200% 100%;
  z-index: -1;
  animation: chromaticFlow 3s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cta-chromatic .btn-chrome:hover::before {
  opacity: 1;
}

.cta-chromatic .btn-chrome:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--refraction-glow);
}

/* ================================
   6. LOADING / TRANSITION STATES
   ================================ */
.chrome-loader {
  width: 60px;
  height: 60px;
  position: relative;
}

.chrome-loader::before,
.chrome-loader::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.chrome-loader::before {
  border-top-color: #6366f1;
  border-right-color: #8b5cf6;
  animation: spinChrome 1.2s linear infinite;
}

.chrome-loader::after {
  border-bottom-color: #ec4899;
  border-left-color: #f43f5e;
  animation: spinChrome 1.2s linear infinite reverse;
  animation-delay: 0.3s;
}

@keyframes spinChrome {
  to { transform: rotate(360deg); }
}

/* Page transition overlay */
.page-transition {
  position: fixed;
  inset: 0;
  background: #0a0f1a;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.page-transition.active {
  opacity: 1;
  pointer-events: all;
}

.page-transition .chrome-loader {
  width: 80px;
  height: 80px;
}

/* Blur toggle transition */
.blur-transition {
  position: relative;
  overflow: hidden;
}

.blur-transition::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    rgba(99, 102, 241, 0.2) 0%,
    rgba(168, 85, 247, 0.2) 50%,
    rgba(236, 72, 153, 0.2) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.blur-transition.transitioning::after {
  opacity: 1;
  animation: blurFlash 0.6s ease-out;
}

@keyframes blurFlash {
  0% { opacity: 0; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1); }
}

/* ================================
   7. UTILITY ANIMATIONS
   ================================ */
/* Chromatic text */
.text-chrome {
  background: linear-gradient(
    135deg,
    #6366f1 0%,
    #8b5cf6 25%,
    #ec4899 50%,
    #f43f5e 75%,
    #6366f1 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShine 4s linear infinite;
}

@keyframes textShine {
  to { background-position: 200% center; }
}

/* Shimmer effect for loading states */
.shimmer-chrome {
  position: relative;
  overflow: hidden;
}

.shimmer-chrome::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.1) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  100% { left: 100%; }
}

/* Glow pulse for buttons/icons */
.glow-pulse {
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.8))
           drop-shadow(0 0 40px rgba(236, 72, 153, 0.4));
  }
}

/* ================================
   8. SVG GRADIENT DEFINITIONS
   ================================ */
/* Include this SVG somewhere in your HTML (hidden) */
/*
<svg width="0" height="0" style="position:absolute">
  <defs>
    <linearGradient id="chromeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#6366f1">
        <animate attributeName="stop-color" values="#6366f1;#8b5cf6;#ec4899;#6366f1" dur="4s" repeatCount="indefinite"/>
      </stop>
      <stop offset="50%" stop-color="#8b5cf6">
        <animate attributeName="stop-color" values="#8b5cf6;#ec4899;#6366f1;#8b5cf6" dur="4s" repeatCount="indefinite"/>
      </stop>
      <stop offset="100%" stop-color="#ec4899">
        <animate attributeName="stop-color" values="#ec4899;#6366f1;#8b5cf6;#ec4899" dur="4s" repeatCount="indefinite"/>
      </stop>
    </linearGradient>
  </defs>
</svg>
*/