/* ==========================================================================
   Purisep Chromatography — Animations & Micro-interactions
   ========================================================================== */

/* ==========================================================================
   1. PAGE ENTRANCE
   ========================================================================== */
body {
  animation: pageEnter 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   2. SCROLL REVEAL — Fade Up (existing, preserved)
   ========================================================================== */
.animate-fade-up {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.75s cubic-bezier(0.25, 0.8, 0.25, 1),
              transform 0.75s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.animate-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }
.delay-700 { transition-delay: 700ms; }

/* ==========================================================================
   3. FLOATING ANIMATION (3D stage columns)
   ========================================================================== */
@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-16px); }
  100% { transform: translateY(0px); }
}

.floating {
  animation: float 4.5s ease-in-out infinite;
}

@keyframes float3D {
  0%   { transform: translateY(0px) rotate(-1.5deg); }
  50%  { transform: translateY(-18px) rotate(1.5deg); }
  100% { transform: translateY(0px) rotate(-1.5deg); }
}

/* ==========================================================================
   4. BLOB ANIMATION (Hero background)
   ========================================================================== */
@keyframes blob {
  0%   { border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%; }
  34%  { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
  67%  { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
  100% { border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%; }
}

.blob-bg {
  position: absolute;
  width: 520px;
  height: 520px;
  background: linear-gradient(135deg,
    rgba(59, 201, 255, 0.18) 0%,
    rgba(15, 98, 254, 0.15) 100%
  );
  animation: blob 18s infinite alternate;
  z-index: 0;
  top: 50%;
  right: -120px;
  transform: translateY(-50%);
  filter: blur(50px);
  pointer-events: none;
}

/* ==========================================================================
   5. RIPPLE EFFECT (Buttons)
   ========================================================================== */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.4) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.6s, opacity 1.2s;
}

.ripple:active::after {
  transform: scale(0, 0);
  opacity: 0.35;
  transition: 0s;
}

/* ==========================================================================
   6. LOADING SPINNER (products skeleton)
   ========================================================================== */
.loader {
  border: 3px solid rgba(10, 35, 66, 0.08);
  border-left-color: var(--secondary-color, #0F62FE);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.9s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==========================================================================
   7. ANIMATED FLOATING PARTICLES (3D Card Stage & Hero)
   ========================================================================== */
.particles-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(59, 201, 255, 0.7);
  box-shadow: 0 0 10px rgba(59, 201, 255, 0.9),
              0 0 24px rgba(59, 201, 255, 0.5);
  animation: floatUpParticle 4s infinite ease-in-out;
}

.particle.p1 { width: 6px; height: 6px; left: 18%; bottom: 8%; animation-duration: 3.6s; animation-delay: 0s; }
.particle.p2 { width: 4px; height: 4px; left: 42%; bottom: 12%; animation-duration: 4.8s; animation-delay: 0.7s; }
.particle.p3 { width: 8px; height: 8px; left: 68%; bottom: 4%; animation-duration: 3.4s; animation-delay: 1.4s; }
.particle.p4 { width: 5px; height: 5px; left: 86%; bottom: 18%; animation-duration: 4.3s; animation-delay: 0.3s; }
.particle.p5 { width: 7px; height: 7px; left: 28%; bottom: 22%; animation-duration: 3.9s; animation-delay: 1.1s; }

@keyframes floatUpParticle {
  0%   { transform: translateY(0) scale(0.7); opacity: 0.1; }
  50%  { transform: translateY(-85px) scale(1.35); opacity: 0.95; }
  100% { transform: translateY(-170px) scale(0.5); opacity: 0; }
}

.product-card-3d:hover .particle {
  animation-duration: 2s !important;
  background: rgba(59, 201, 255, 1);
  box-shadow: 0 0 16px rgba(59, 201, 255, 1);
}

/* ==========================================================================
   8. PEDESTAL GLOW PULSE
   ========================================================================== */
@keyframes pedestalPulse {
  0%   { opacity: 0.55; transform: rotateX(65deg) scale(0.93); }
  100% { opacity: 1;    transform: rotateX(65deg) scale(1.06); }
}

/* ==========================================================================
   9. GLOW SWEEP (Light sweep on card hover)
   ========================================================================== */
@keyframes glowSweep {
  0%   { left: -80%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

.glow-sweep-host {
  position: relative;
  overflow: hidden;
}

.glow-sweep-host::before {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    transparent
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

.glow-sweep-host:hover::before {
  animation: glowSweep 0.8s ease forwards;
}

/* ==========================================================================
   10. COUNTER ANIMATION (app.js uses, CSS provides easing)
   ========================================================================== */
.counter-value {
  display: inline-block;
  animation: counterPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes counterPop {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   11. HEART POP (Favourite/wishlist button)
   ========================================================================== */
@keyframes heartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4) rotate(-8deg); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.card-fav-btn.active i,
.btn-icon-action.bookmark-btn.active i {
  animation: heartPop 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==========================================================================
   12. WISHLIST ITEM ENTRY
   ========================================================================== */
@keyframes slideInWishlistItem {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   13. SHIMMER (Skeleton loading)
   ========================================================================== */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ==========================================================================
   14. REVEAL VARIANTS (for premium.css scroll classes)
   ========================================================================== */
.reveal-fade-left,
.reveal-fade-right,
.reveal-zoom {
  transition: opacity 0.75s cubic-bezier(0.25, 0.8, 0.25, 1),
              transform 0.75s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   15. ICON ROTATE on hover
   ========================================================================== */
.icon-rotate-hover {
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.icon-rotate-hover:hover {
  transform: rotate(15deg) scale(1.1);
}

/* ==========================================================================
   16. SOFT PULSE (accent glow rings)
   ========================================================================== */
@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 201, 255, 0.35); }
  50%       { box-shadow: 0 0 0 12px rgba(59, 201, 255, 0); }
}

.pulse-ring {
  animation: softPulse 2.5s ease-in-out infinite;
}

/* ==========================================================================
   17. PEAK MARKER DOT (Applications page chromatogram)
   ========================================================================== */
.peak-marker-dot {
  animation: pulseGlow 2s infinite ease-in-out;
  cursor: pointer;
}

@keyframes pulseGlow {
  0%   { r: 4; opacity: 0.7; }
  50%  { r: 6.5; opacity: 1; filter: drop-shadow(0 0 8px #3BC9FF); }
  100% { r: 4; opacity: 0.7; }
}

/* ==========================================================================
   18. TILT CARD (via JS-driven CSS custom properties)
   ========================================================================== */
.tilt-card {
  transform: perspective(900px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             translateZ(0);
  transition: transform 0.15s linear;
  will-change: transform;
}

/* ==========================================================================
   19. MAP PIN BOUNCE
   ========================================================================== */
@keyframes mapPinBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}