/* F:\WHALE WEP AI INFO\assets\css\animations.css */

/* 1. Page Transition Loader */
.page-loader {
  position: fixed;
  inset: 0;
  background-color: var(--whale-navy, #062f5f);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.page-loader.loaded {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.loader-logo {
  width: 80px;
  height: 80px;
  animation: pulse 1.5s infinite ease-in-out alternate;
}
@keyframes pulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.1); opacity: 1; }
}

/* 2. Cursor Effect (desktop) */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out;
}
.cursor-dot {
  width: 8px;
  height: 8px;
  background-color: var(--whale-cyan, #37c9ed);
}
.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1px solid var(--whale-cyan, #37c9ed);
  transition: transform 0.2s ease-out, width 0.2s, height 0.2s;
}
body.cursor-hover-active .cursor-ring {
  width: 56px;
  height: 56px;
  background-color: rgba(55, 201, 237, 0.1);
}

/* 3. Magnetic Buttons */
.btn {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.btn.is-magnetic {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 4. Hero Orbit Animation */
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: orbitSpin linear infinite;
  will-change: transform;
}
.orbit-ring--1 { width: 300px; height: 300px; animation-duration: 18s; }
.orbit-ring--2 { width: 450px; height: 450px; animation-duration: 28s; animation-direction: reverse; }
.orbit-ring--3 { width: 600px; height: 600px; animation-duration: 40s; }
@keyframes orbitSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.svc-node {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--whale-cyan, #37c9ed);
  animation: nodeOrbit linear infinite;
  will-change: transform;
  top: -12px;
  left: 50%;
  margin-left: -12px;
  transform-origin: 50% 162px; /* depending on ring radius */
}
.svc-node--1 { animation-duration: 18s; animation-delay: 0s; }
.svc-node--2 { animation-duration: 18s; animation-delay: -3.6s; }
.svc-node--3 { animation-duration: 18s; animation-delay: -7.2s; }
.svc-node--4 { animation-duration: 18s; animation-delay: -10.8s; }
.svc-node--5 { animation-duration: 18s; animation-delay: -14.4s; }
@keyframes nodeOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 5. Float Cards Levitation */
.float-card--ai { animation: float1 4s ease-in-out infinite; }
.float-card--stat { animation: float2 4.5s ease-in-out infinite 0.8s; }
.float-card--score { animation: float3 5s ease-in-out infinite 1.5s; }
@keyframes float1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes float2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes float3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* 6. Tech Panel Bars Animation */
.tech-chart-bar {
  background: linear-gradient(180deg, var(--whale-cyan, #37c9ed) 0%, var(--whale-blue, #1687ed) 100%);
  animation: barGrow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 0.08s);
}
@keyframes barGrow {
  from { transform: scaleY(0); transform-origin: bottom; }
  to { transform: scaleY(1); }
}

/* 7. Typing Effect */
.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--whale-blue, #1687ed);
  vertical-align: middle;
  margin-inline-start: 4px;
  animation: blink 0.9s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* 8. Number Counter Pulse */
.impact-num { transition: transform 0.1s; display: inline-block; }
.impact-num.counting { transform: scale(1.05); }
.impact-num.sparkle { animation: sparkle 0.5s ease-out; }
@keyframes sparkle { 0% { transform: scale(1); } 50% { transform: scale(1.2); text-shadow: 0 0 10px var(--whale-cyan, #37c9ed); } 100% { transform: scale(1); } }

/* 9. Card Hover 3D Tilt */
.svc-card { transform-style: preserve-3d; perspective: 1000px; }

.heading-hero em, h1 em, h2 em {
  font-style: normal;
}
.heading-hero em .word-animated, h1 em .word-animated, h2 em .word-animated {
  background: linear-gradient(90deg, var(--whale-blue, #1687ed) 0%, var(--whale-cyan, #37c9ed) 50%, var(--whale-blue, #1687ed) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
  display: inline-block;
}
.heading-hero em:not(:has(.word-animated)), h1 em:not(:has(.word-animated)), h2 em:not(:has(.word-animated)) {
  background: linear-gradient(90deg, var(--whale-blue, #1687ed) 0%, var(--whale-cyan, #37c9ed) 50%, var(--whale-blue, #1687ed) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

/* 11. Scroll Progress Bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--whale-blue, #1687ed), var(--whale-cyan, #37c9ed));
  transform-origin: left;
  transform: scaleX(0);
  z-index: calc(var(--z-header, 1000) + 1);
  transition: transform 0.1s linear;
}

/* 12. Particle Dots Background */
.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--whale-cyan, #37c9ed);
  opacity: 0;
  animation: particleFloat linear infinite;
}
.particle:nth-child(1)  { left: 10%; top: 20%; animation-duration: 8s; animation-delay: 0s; }
.particle:nth-child(2)  { left: 25%; top: 60%; animation-duration: 10s; animation-delay: -2s; }
.particle:nth-child(3)  { left: 40%; top: 15%; animation-duration: 7s; animation-delay: -4s; }
.particle:nth-child(4)  { left: 55%; top: 75%; animation-duration: 9s; animation-delay: -1s; }
.particle:nth-child(5)  { left: 70%; top: 30%; animation-duration: 11s; animation-delay: -3s; }
.particle:nth-child(6)  { left: 85%; top: 50%; animation-duration: 8.5s; animation-delay: -5s; }
.particle:nth-child(7)  { left: 15%; top: 80%; animation-duration: 7.5s; animation-delay: -6s; }
.particle:nth-child(8)  { left: 50%; top: 40%; animation-duration: 12s; animation-delay: -1.5s; }
.particle:nth-child(9)  { left: 30%; top: 90%; animation-duration: 9.5s; animation-delay: -2.5s; }
.particle:nth-child(10) { left: 65%; top: 10%; animation-duration: 10.5s; animation-delay: -4.5s; }
.particle:nth-child(11) { left: 80%; top: 65%; animation-duration: 8s; animation-delay: -7s; }
.particle:nth-child(12) { left: 90%; top: 25%; animation-duration: 11.5s; animation-delay: -3.5s; }
@keyframes particleFloat {
  0% { opacity: 0; transform: translateY(0) scale(0); }
  10% { opacity: 0.4; }
  90% { opacity: 0.2; }
  100% { opacity: 0; transform: translateY(-60px) scale(1.5); }
}

/* 13. Page Hero Parallax */
.page-hero { overflow: hidden; position: relative; }
.page-hero-inner { transition: transform 0.1s linear; will-change: transform; }

/* 14. Footer Social Icons Hover */
.social-link {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s;
  display: inline-block;
}
.social-link:hover { transform: translateY(-4px) scale(1.15); }

/* 15. WhatsApp Button Pulse */
.wa-float {
  position: relative;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-float::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #25d366;
  opacity: 0.4;
  animation: waPulse 2s ease-out infinite;
  z-index: -1;
}
@keyframes waPulse {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Staggered entrance */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  animation: staggerIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes staggerIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Word animation for split text */
.word-animated {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: wordFadeIn 0.5s forwards;
}
@keyframes wordFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Simple fade-in for gradient text to prevent Chrome GPU text-clip rendering bugs */
.heading-hero em .word-animated, h1 em .word-animated, h2 em .word-animated {
  transform: none !important;
  animation: wordFadeInSimple 0.5s forwards !important;
}
@keyframes wordFadeInSimple {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ══════════════════════════════════════════════════════
   PREMIUM MICRO-INTERACTIONS — UI/UX Audit v2
   ══════════════════════════════════════════════════════ */

/* Smooth fade-up on scroll (enhanced) */
[data-animate] {
  transition: opacity 0.55s cubic-bezier(.4,0,.2,1),
              transform 0.55s cubic-bezier(.4,0,.2,1);
}

/* Stagger delays for grid children */
.grid-3 [data-animate]:nth-child(1),
.grid-4 [data-animate]:nth-child(1) { transition-delay: 0ms; }
.grid-3 [data-animate]:nth-child(2),
.grid-4 [data-animate]:nth-child(2) { transition-delay: 80ms; }
.grid-3 [data-animate]:nth-child(3),
.grid-4 [data-animate]:nth-child(3) { transition-delay: 160ms; }
.grid-4 [data-animate]:nth-child(4) { transition-delay: 240ms; }

/* Link hover — subtle underline slide */
.drop-link, .footer-link {
  position: relative;
}
.drop-link::after, .footer-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: var(--whale-blue);
  transition: width 200ms ease;
}
.drop-link:hover::after, .footer-link:hover::after { width: 100%; }

/* Button press effect */
.btn:active {
  transform: scale(.97) !important;
  transition: transform 80ms ease !important;
}

/* Card hover lift — consistent across all cards */
.svc-card, .program-card, .feature-card, .eco-product {
  transition: transform 250ms cubic-bezier(.4,0,.2,1),
              box-shadow 250ms cubic-bezier(.4,0,.2,1) !important;
}
.svc-card:hover, .program-card:hover, .feature-card:hover, .eco-product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 36px rgba(6,47,95,.12) !important;
}

/* Smooth number counter animation */
[data-count] {
  display: inline-block;
  animation: countUp .8s cubic-bezier(.4,0,.2,1) both;
}

/* Trust strip scroll animation */
.trust-logos-row {
  animation: none;
}
@media (prefers-reduced-motion: no-preference) {
  .trust-logos-row {
    display: flex;
    gap: var(--sp-3);
  }
}

/* Announce chip pulse */
.announce-chip {
  animation: announcePulse 3s ease-in-out infinite;
}
@keyframes announcePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,135,237,.0); }
  50% { box-shadow: 0 0 0 4px rgba(22,135,237,.12); }
}

/* Page transition — smooth fade in */
body {
  animation: pageFadeIn .4s ease both;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Glowing CTA on dark sections */
.cta-section .btn-white:hover,
.section--dark .btn-primary:hover {
  box-shadow: 0 0 32px rgba(255,255,255,.25), 0 8px 24px rgba(0,0,0,.3);
}