/* ==========================================================================
   SMARTGen — Holocene / Afternow Inspired Scrollable Animations
   Fluid, 60fps GPU-Accelerated Scroll-Driven Reveals, 3D Perspective,
   Telemetry Flows, and Interactive Micro-Interactions
   ========================================================================== */

/* 1. Global Scroll Progress Bar at the top of the viewport */
.scroll-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 99999;
  pointer-events: none;
  background: transparent;
}

.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0097a7, #06b6d4, #2563eb, #8b5cf6);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.7);
  transition: width 0.1s cubic-bezier(0.1, 0.5, 0.1, 1);
}

/* 2. Scroll-Triggered Reveal Animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Delay Utilities */
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }
.stagger-5 { transition-delay: 0.40s; }

/* Scale & Slide Variations */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92) translateY(24px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.is-revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* 3. 3D Perspective Card Tilt (Signature Holocene by Afternow effect) */
.perspective-container {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.perspective-tilt-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

.perspective-tilt-card:hover {
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15), 
              0 0 25px rgba(0, 151, 167, 0.2);
}

/* 4. Telemetry Pulse Stream (Holocene Pipeline Flow Inspiration) */
.telemetry-flow-stream {
  position: relative;
  overflow: hidden;
}

.telemetry-flow-stream::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  animation: telemetry-pulse-sweep 3.5s infinite ease-in-out;
  pointer-events: none;
}

@keyframes telemetry-pulse-sweep {
  0% { left: -100%; }
  50%, 100% { left: 200%; }
}

/* 5. Holocene Live Status Indicator Pills */
.holocene-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}

.holocene-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: holocene-pulse 2s infinite ease-in-out;
}

.holocene-pulse-dot.orange {
  background: #F59E0B;
  box-shadow: 0 0 8px #F59E0B;
}

@keyframes holocene-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}

/* 6. Parallax Floating Offset Elements */
.scroll-parallax-slow {
  will-change: transform;
  transform: translateY(var(--parallax-slow, 0px));
}

.scroll-parallax-fast {
  will-change: transform;
  transform: translateY(var(--parallax-fast, 0px));
}

/* 7. Hover Card Glowing Borders */
.card-glow-interactive {
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-glow-interactive::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(0, 151, 167, 0.6), transparent 50%, rgba(99, 102, 241, 0.6));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.card-glow-interactive:hover::before {
  opacity: 1;
}

.card-glow-interactive:hover {
  transform: translateY(-4px);
}

/* 8. Holocene Pipeline Flow Animation */
.pipeline-connector {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #10b981 0%, #0d9488 20%, #0284c7 40%, #2563eb 60%, #7c3aed 80%, #ea580c 100%) !important;
  background-size: 200% 100% !important;
  animation: pipeline-flow-gradient 4s linear infinite;
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.4);
}

.pipeline-connector::after {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -20px;
  width: 24px;
  background: radial-gradient(circle, #ffffff 40%, rgba(255, 255, 255, 0.8) 70%, transparent 100%);
  filter: blur(1px);
  animation: pipeline-pulse-travel 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pipeline-flow-gradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes pipeline-pulse-travel {
  0% { left: -20px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.pipeline-node.is-revealed .pipeline-circle {
  animation: node-pulse-ring 2.5s infinite ease-out;
}

@keyframes node-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(0, 151, 167, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(0, 151, 167, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 151, 167, 0); }
}

/* 9. Holocene Count-Up Number Glow on Scroll */
.stat-number {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.4s ease;
  will-change: transform;
}

.stat-item:hover .stat-number {
  transform: scale(1.05);
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* 10. Smooth Scroll Tilt Entrance */
.scroll-tilt-in {
  transform: perspective(1000px) rotateX(12deg) translateY(40px) scale(0.96);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.scroll-tilt-in.is-revealed {
  transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1);
  opacity: 1;
}

/* 11. Subtle Ambient Parallax Background Orbs */
.holocene-bg-glow-orb {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  will-change: transform;
}

.orb-teal {
  background: radial-gradient(circle, #0097a7, transparent 70%);
}

.orb-blue {
  background: radial-gradient(circle, #2563eb, transparent 70%);
}

.orb-purple {
  background: radial-gradient(circle, #8b5cf6, transparent 70%);
}