/* ==========================================================================
   AFRICAN CHEMICALS GROUP (ACG) - ANIMATIONS & KEYFRAMES
   ========================================================================== */

/* Radar / Pulse Ring for Map Hubs */
@keyframes hubPulse {
  0% {
    r: 6;
    opacity: 0.9;
    stroke-width: 1.5;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    r: 22;
    opacity: 0;
    stroke-width: 0.5;
  }
}

.hub-radar-ring {
  animation: hubPulse 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  transform-origin: center;
  pointer-events: none;
}

.hub-radar-ring.delayed {
  animation-delay: 1.2s;
}

/* Shipping Corridor Dash Flow */
@keyframes corridorFlow {
  from {
    stroke-dashoffset: 60;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.logistics-flow-path {
  stroke-dasharray: 6 4;
  animation: corridorFlow 2.8s linear infinite;
}

.logistics-flow-path.reverse {
  animation-direction: reverse;
}

/* Subtle Shimmer for High-Priority CTAs */
@keyframes buttonShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg) translateX(-150%);
  animation: buttonShimmer 4s ease-in-out infinite;
}

/* Float Animation for Floating Badge */
@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.floating-elem {
  animation: floatGentle 5s ease-in-out infinite;
}

/* Glow breathing effect */
@keyframes glowBreathe {
  0%, 100% {
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.45);
  }
}

.glow-breathe {
  animation: glowBreathe 3.5s ease-in-out infinite;
}

/* GSAP Pre-animation initial state classes */
.gsap-reveal {
  opacity: 0;
  transform: translateY(28px);
}

.gsap-reveal-left {
  opacity: 0;
  transform: translateX(-35px);
}

.gsap-reveal-right {
  opacity: 0;
  transform: translateX(35px);
}

.gsap-reveal-scale {
  opacity: 0;
  transform: scale(0.92);
}

/* ==========================================================================
   EDITORIAL CUSTOM MOUSE CURSOR & CONTEXTUAL BADGES
   ========================================================================== */

/* Hide default system cursor ONLY on large desktop screens with fine pointer and active cursor */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html.custom-cursor-active,
  body.custom-cursor-active,
  .custom-cursor-active,
  .custom-cursor-active *,
  .custom-cursor-active *::before,
  .custom-cursor-active *::after {
    cursor: none !important;
  }
}

/* ==========================================================================
   MOBILE & TOUCH OVERRIDES: REMOVE MOUSE CURSOR & REMOVE 3D TILT EFFECT
   ========================================================================== */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  /* 1. Completely remove and destroy custom mouse cursor */
  #editorialCursorContainer,
  .editorial-cursor-container,
  .cursor-ring,
  .cursor-dot,
  .click-ripple-spark {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 2. Restore normal system cursor across entire document */
  html,
  body,
  html.custom-cursor-active,
  body.custom-cursor-active,
  .custom-cursor-active,
  .custom-cursor-active *,
  .custom-cursor-active *::before,
  .custom-cursor-active *::after,
  *,
  *::before,
  *::after {
    cursor: auto !important;
  }

  a,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  .btn,
  .editorial-pill,
  .graph-tab-btn,
  .product-select-item,
  .docked-corner-btn,
  .hero-slide-dot {
    cursor: pointer !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea {
    cursor: text !important;
  }

  /* 3. Completely remove 3D tilt effect and perspective distortion for images and cards */
  .tilt-card-active,
  .editorial-product-card,
  .editorial-metric-card,
  .blog-card,
  .black-barrels-image-frame,
  .black-barrels-image-frame img,
  .pillar-card,
  .org-card,
  .map-details-card,
  .hero-tanker-image-frame,
  .hero-tanker-img,
  #heroActiveSlideImg,
  .mission-visual-card,
  .mission-worker-img,
  .spotlight-barrels-img,
  .hero-glass-card,
  .hero-sphere {
    transform: none !important;
    perspective: none !important;
    transform-style: flat !important;
    will-change: auto !important;
    transition: none !important;
  }

  .card-specular-glare,
  .barrel-scanline-beam {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}


.editorial-cursor-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.editorial-cursor-container.cursor-hidden {
  opacity: 0;
}

/* Center micro dot - Vibrant Glowing Green */
.cursor-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: #10B981;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 
    0 0 10px #10B981, 
    0 0 20px #10B981, 
    0 0 30px rgba(16, 185, 129, 0.7);
  transition: width 0.2s cubic-bezier(0.2, 0, 0.2, 1),
              height 0.2s cubic-bezier(0.2, 0, 0.2, 1),
              opacity 0.2s ease;
}

/* Trailing smooth magnetic glowing green ring */
.cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid #10B981;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 14px rgba(16, 185, 129, 0.75), 
    0 0 28px rgba(16, 185, 129, 0.4), 
    inset 0 0 10px rgba(16, 185, 129, 0.35);
  transition: width 0.25s cubic-bezier(0.2, 0, 0.2, 1),
              height 0.25s cubic-bezier(0.2, 0, 0.2, 1),
              border-color 0.25s ease,
              background-color 0.25s ease,
              box-shadow 0.25s ease;
}

/* Hovering interactive links or standard buttons */
.cursor-ring.cursor-hover {
  width: 50px;
  height: 50px;
  border-color: #34D399;
  background-color: rgba(16, 185, 129, 0.16);
  box-shadow: 
    0 0 22px rgba(16, 185, 129, 0.85), 
    0 0 36px rgba(16, 185, 129, 0.55), 
    inset 0 0 14px rgba(16, 185, 129, 0.45);
}

/* Click state */
.cursor-ring.cursor-clicking {
  border-color: #34D399;
  background-color: rgba(16, 185, 129, 0.22);
  box-shadow: 
    0 0 24px rgba(16, 185, 129, 0.95), 
    0 0 40px rgba(16, 185, 129, 0.65), 
    inset 0 0 14px rgba(16, 185, 129, 0.55);
}

/* ==========================================================================
   3D CARD PERSPECTIVE TILT & SPECULAR DYNAMIC GLARE
   ========================================================================== */

.tilt-card-active {
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
}

.card-specular-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.35s ease;
  mix-blend-mode: overlay;
  overflow: hidden;
}

.tilt-card-active:hover .card-specular-glare {
  opacity: 1;
}

/* Card inner layers pop out in 3D */
.tilt-card-active:hover .product-card-body,
.tilt-card-active:hover .metric-large-number,
.tilt-card-active:hover .blog-card-content {
  transform: translateZ(12px);
  transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1);
}

/* ==========================================================================
   MAGNETIC BUTTON PULL
   ========================================================================== */

.magnetic-btn {
  will-change: transform;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease;
}

.magnetic-btn:hover {
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3);
}

/* ==========================================================================
   BARREL SCANLINE & INTERACTIVE IMAGE ZOOM
   ========================================================================== */

.barrel-scanline-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.85), #FFFFFF, rgba(16, 185, 129, 0.85), transparent);
  box-shadow: 0 0 14px #10B981, 0 0 24px rgba(16, 185, 129, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 15;
  transition: opacity 0.25s ease;
}

.black-barrels-image-frame:hover .barrel-scanline-beam {
  opacity: 1;
  animation: barrelScan 2.4s ease-in-out infinite;
}

@keyframes barrelScan {
  0% {
    top: 0%;
  }
  50% {
    top: 100%;
  }
  100% {
    top: 0%;
  }
}

/* Interactive click micro-spark / ripple */
.click-ripple-spark {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%) scale(0);
  border: 2px solid rgba(16, 185, 129, 0.9);
  background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 70%);
  animation: rippleBurst 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes rippleBurst {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(3.5);
    opacity: 0;
  }
}