/* ============================================================
   GROWTH PIXEL MEDIA — Animations Stylesheet
   Version: 1.0 | growthpixelmedia.com
   ============================================================ */

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */

/* ── Float Up / Down ── */
@keyframes float-up {
  0%   { transform: translateY(0px);    }
  50%  { transform: translateY(-16px);  }
  100% { transform: translateY(0px);    }
}

@keyframes float-horizontal {
  0%   { transform: translateX(0px);   }
  50%  { transform: translateX(12px);  }
  100% { transform: translateX(0px);   }
}

/* ── Blob / Organic Shape Morph ── */
@keyframes blob-move {
  0%   { transform: translate(0, 0)    scale(1);    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
  25%  { transform: translate(20px, -15px) scale(1.05); border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%; }
  50%  { transform: translate(-10px, 20px) scale(0.98); border-radius: 60% 40% 50% 50% / 50% 60% 40% 60%; }
  75%  { transform: translate(-20px, -10px) scale(1.02); border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; }
  100% { transform: translate(0, 0)    scale(1);    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
}

/* ── Pulse ── */
@keyframes pulse-dot {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(249,115,22,0.6); }
  70%  { transform: scale(1.1);  box-shadow: 0 0 0 8px rgba(249,115,22,0);  }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(249,115,22,0);   }
}

@keyframes pulse-scale {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1);    }
}

@keyframes pulse-ring {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(27,63,160,0.45); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 14px rgba(27,63,160,0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(27,63,160,0);   }
}

/* ── Gradient Shift ── */
@keyframes gradient-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ── Shimmer (skeleton loading) ── */
@keyframes shimmer {
  0%   { background-position: -468px 0;    }
  100% { background-position:  468px 0;    }
}

/* ── Marquee Scroll ── */
@keyframes marquee-scroll {
  0%   { transform: translateX(0);         }
  100% { transform: translateX(-50%);      }
}

/* ── Ripple ── */
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* ── Loader Progress ── */
@keyframes loader-progress {
  0%   { width: 0%;    }
  30%  { width: 35%;   }
  60%  { width: 65%;   }
  80%  { width: 85%;   }
  100% { width: 100%;  }
}

/* ── Fade In Up ── */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Fade In Down ── */
@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Fade In Left ── */
@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Fade In Right ── */
@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Scale In ── */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Pop In ── */
@keyframes pop-in {
  0%   { transform: scale(0);    opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* ── Spin ── */
@keyframes spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* ── Bounce ── */
@keyframes bounce-y {
  0%, 100% { transform: translateY(0);   animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50%       { transform: translateY(-12px); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

/* ── Draw Line (SVG path) ── */
@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

/* ── Typewriter Cursor ── */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Number Slide ── */
@keyframes number-slide {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Ping ── */
@keyframes ping {
  75%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* ── Background Orb ── */
@keyframes orb-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -20px) scale(1.05);
  }
  66% {
    transform: translate(-20px, 15px) scale(0.97);
  }
}

/* ── Wave (underline) ── */
@keyframes wave-underline {
  0%   { background-position: 0 bottom;   }
  100% { background-position: 200% bottom; }
}

/* ============================================================
   ANIMATION UTILITY CLASSES
   ============================================================ */
.animate-float    { animation: float-up         6s ease-in-out infinite; }
.animate-float-h  { animation: float-horizontal 5s ease-in-out infinite; }
.animate-pulse    { animation: pulse-scale       2s ease-in-out infinite; }
.animate-pulse-dot{ animation: pulse-dot         2s ease-in-out infinite; }
.animate-spin     { animation: spin              1.2s linear infinite; }
.animate-bounce   { animation: bounce-y          1.5s ease infinite; }
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 5s ease infinite;
}

/* Delays */
.delay-100 { animation-delay: 0.1s;  }
.delay-200 { animation-delay: 0.2s;  }
.delay-300 { animation-delay: 0.3s;  }
.delay-400 { animation-delay: 0.4s;  }
.delay-500 { animation-delay: 0.5s;  }
.delay-600 { animation-delay: 0.6s;  }
.delay-700 { animation-delay: 0.7s;  }
.delay-800 { animation-delay: 0.8s;  }
.delay-1000{ animation-delay: 1s;    }
.delay-1200{ animation-delay: 1.2s;  }
.delay-1500{ animation-delay: 1.5s;  }
.delay-2000{ animation-delay: 2s;    }

/* Durations */
.duration-fast   { animation-duration: 0.3s; }
.duration-normal { animation-duration: 0.5s; }
.duration-slow   { animation-duration: 0.8s; }
.duration-slower { animation-duration: 1.2s; }
.duration-slowest{ animation-duration: 2s;   }

/* ============================================================
   REVEAL ON SCROLL (AOS CUSTOM OVERRIDES)
   ============================================================ */

/* Increase default AOS duration and easing */
[data-aos] {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-aos="fade-up"] {
  transform: translate3d(0, 32px, 0);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="fade-up"].aos-animate {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

[data-aos="zoom-in"] {
  transform: scale(0.9);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="zoom-in"].aos-animate {
  transform: scale(1);
  opacity: 1;
}

/* ============================================================
   HOVER EFFECTS
   ============================================================ */

/* Card lift on hover */
.hover-lift {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* Glow on hover */
.hover-glow:hover {
  box-shadow: 0 0 30px rgba(27, 63, 160, 0.3);
}

.hover-glow-accent:hover {
  box-shadow: 0 0 30px rgba(249, 115, 22, 0.35);
}

/* Icon bounce on hover */
.hover-bounce-icon:hover i {
  animation: bounce-y 0.6s ease;
}

/* ============================================================
   STAGGER ANIMATION HELPERS
   ============================================================ */
.stagger-children > *:nth-child(1) { animation-delay: 0s;    }
.stagger-children > *:nth-child(2) { animation-delay: 0.08s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.16s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.24s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.32s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.40s; }

/* ============================================================
   GRADIENT ANIMATED BORDER
   ============================================================ */
.gradient-border {
  position: relative;
  border-radius: var(--radius-xl);
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--gradient-blue-orange);
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gradient-border:hover::before {
  opacity: 1;
}

/* ============================================================
   BACKGROUND DECORATIONS
   ============================================================ */

/* Floating pixels (pixel art dots) */
.pixel-cluster {
  position: absolute;
  pointer-events: none;
}

.pixel-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.5;
  position: absolute;
  animation: float-up 4s ease-in-out infinite;
}

/* Orb (soft glowing circle) */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  animation: orb-float 12s ease-in-out infinite;
}

.orb-primary {
  background: rgba(27, 63, 160, 0.18);
}

.orb-accent {
  background: rgba(249, 115, 22, 0.18);
}

.orb-lg { width: 500px; height: 500px; }
.orb-md { width: 300px; height: 300px; }
.orb-sm { width: 180px; height: 180px; }

/* ── Animated Underline ── */
.fancy-underline {
  position: relative;
  display: inline-block;
}

.fancy-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.fancy-underline:hover::after,
.fancy-underline.active::after {
  transform: scaleX(1);
}

/* ============================================================
   HERO PIXEL ANIMATION
   ============================================================ */
.hero-pixels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.pixel-square {
  position: absolute;
  border-radius: 3px;
  opacity: 0.6;
}

.pixel-square-1  { width: 14px; height: 14px; background: var(--accent);   top: 15%; right: 20%; animation: float-up 5s 0.0s ease-in-out infinite; }
.pixel-square-2  { width: 10px; height: 10px; background: var(--accent);   top: 25%; right: 35%; animation: float-up 6s 0.5s ease-in-out infinite; }
.pixel-square-3  { width: 18px; height: 18px; background: #fff;            top: 70%; left: 15%;  animation: float-up 7s 1.0s ease-in-out infinite; opacity: 0.15; }
.pixel-square-4  { width: 8px;  height: 8px;  background: var(--accent);   top: 40%; left: 40%;  animation: float-up 4s 1.5s ease-in-out infinite; }
.pixel-square-5  { width: 12px; height: 12px; background: var(--primary-light); top: 60%; right: 10%; animation: float-up 5s 2.0s ease-in-out infinite; opacity: 0.4; }
.pixel-square-6  { width: 6px;  height: 6px;  background: var(--accent);   top: 80%; right: 30%; animation: float-up 6s 0.3s ease-in-out infinite; }
.pixel-square-7  { width: 10px; height: 10px; background: #fff;            top: 30%; left: 10%;  animation: float-up 8s 1.8s ease-in-out infinite; opacity: 0.1; }
.pixel-square-8  { width: 16px; height: 16px; background: var(--accent);   top: 55%; left: 55%;  animation: float-up 6s 2.5s ease-in-out infinite; opacity: 0.3; }

/* ============================================================
   COUNTER ANIMATION TRIGGER
   ============================================================ */
.counter-num {
  display: inline-block;
  transition: transform 0.1s ease;
}

.counter-num.counting {
  animation: number-slide 0.15s ease forwards;
}

/* ============================================================
   LOADING SKELETON
   ============================================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--border)    50%,
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ============================================================
   TYPED.JS CURSOR
   ============================================================ */
.typed-cursor {
  font-weight: 300;
  color: var(--accent);
  animation: blink-cursor 0.8s infinite;
}

/* ============================================================
   PING INDICATOR
   ============================================================ */
.ping-wrapper {
  position: relative;
  display: inline-flex;
}

.ping-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
}

.ping-indicator span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
}

.ping-indicator span:first-child {
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  opacity: 0.6;
}

/* ============================================================
   SCROLL INDICATOR
   ============================================================ */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  animation: fade-in-up 1s 1.5s ease both;
}

.scroll-mouse {
  width: 24px;
  height: 36px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-full);
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.scroll-wheel {
  width: 4px;
  height: 8px;
  background: rgba(255,255,255,0.5);
  border-radius: var(--radius-full);
  animation: float-up 1.8s ease-in-out infinite;
}

/* ============================================================
   RESPONSIVE ANIMATION REDUCTIONS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}