/* ============================================================
   GrowDigitly — Creative Animation System (animations.css)
   ============================================================ */

/* ---- Scroll Progress Bar ---- */
#scroll-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #ee4619, #ff8c6b, #ee4619);
  background-size: 200% 100%;
  z-index: 9999;
  transition: width 0.1s linear;
  animation: progressShimmer 2s linear infinite;
}
@keyframes progressShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: 0 0; }
}

/* Custom cursor removed */

/* ============================================================
   HERO PARTICLE CANVAS
   ============================================================ */
#hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   ENHANCED BLOB ANIMATIONS
   ============================================================ */
.hero-blob {
  animation: morphBlob 10s ease-in-out infinite;
}
.hero-blob-1 { animation-duration: 12s; }
.hero-blob-2 { animation-duration: 9s; animation-delay: -3s; }
.hero-blob-3 { animation-duration: 14s; animation-delay: -7s; }

@keyframes morphBlob {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translate(0,0) scale(1); }
  25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: translate(30px,-20px) scale(1.05); }
  50%  { border-radius: 50% 60% 30% 60% / 40% 70% 60% 30%; transform: translate(-20px,30px) scale(0.95); }
  75%  { border-radius: 40% 70% 60% 30% / 70% 40% 50% 60%; transform: translate(15px,10px) scale(1.08); }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translate(0,0) scale(1); }
}

/* ============================================================
   STAGGER REVEAL — upgraded
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(48px) scale(0.97);
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1),
              transform 0.75s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reveal-left  { transform: translateX(-48px) scale(0.97); }
.reveal-right { transform: translateX(48px) scale(0.97); }
.reveal-left.visible,
.reveal-right.visible { transform: translateX(0) scale(1); }

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }

/* ============================================================
   TILT CARDS — 3D perspective hover
   ============================================================ */
.tilt-card {
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  transition: transform 0.1s ease, box-shadow 0.3s ease;
  will-change: transform;
}
.tilt-card:hover {
  box-shadow: 0 30px 60px rgba(238, 70, 25, 0.18), 0 4px 16px rgba(0,0,0,0.08);
}
.tilt-card-inner {
  transform: translateZ(20px);
}

/* ============================================================
   MAGNETIC BUTTON WRAPPER
   ============================================================ */
.btn-magnetic {
  display: inline-block;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ============================================================
   SHIMMER / GLOW EFFECT on buttons & cards
   ============================================================ */
.btn-primary,
.btn-accent {
  overflow: hidden;
}
.btn-primary::after,
.btn-accent::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: rgba(255,255,255,0.22);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.btn-primary:hover::after,
.btn-accent:hover::after {
  left: 120%;
}

/* ============================================================
   GLOW RING on service icons
   ============================================================ */
.service-icon {
  position: relative;
}
.service-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: var(--grad-primary);
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.4s ease;
  z-index: -1;
}
.service-card:hover .service-icon::after {
  opacity: 0.35;
}

/* ============================================================
   FLOATING CARDS — enhanced
   ============================================================ */
@keyframes floatA {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%     { transform: translateY(-12px) rotate(1deg); }
  66%     { transform: translateY(-6px) rotate(-1deg); }
}
@keyframes floatB {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%     { transform: translateY(-8px) rotate(-1.5deg); }
  66%     { transform: translateY(-14px) rotate(1.5deg); }
}
.hero-floating-card.card-1 { animation: floatA 5s ease-in-out infinite; }
.hero-floating-card.card-2 { animation: floatB 4.5s ease-in-out infinite; animation-delay: -2.5s; }

/* ============================================================
   MARQUEE — Trusted Brands
   ============================================================ */
.marquee-wrapper {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #fff 8%, #fff 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #fff 8%, #fff 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: marqueeScroll 22s linear infinite;
}
.marquee-wrapper:hover .marquee-track { animation-play-state: paused; }

@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-item {
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color 0.25s ease;
  padding: 8px 0;
}
.marquee-item:hover { color: var(--primary); }
.marquee-item i { font-size: 1.3rem; color: var(--primary); opacity: 0.7; }

/* ============================================================
   HERO STATS COUNTER — number glow
   ============================================================ */
.hero-stat-number,
.stat-number {
  position: relative;
}
.hero-stat-number.counting::after,
.stat-number.counting::after {
  content: '';
  position: absolute;
  inset: -8px;
  background: radial-gradient(ellipse at center, rgba(238,70,25,0.18) 0%, transparent 70%);
  border-radius: 50%;
  animation: countGlow 0.4s ease-out;
}
@keyframes countGlow {
  from { opacity: 1; transform: scale(0.8); }
  to   { opacity: 0; transform: scale(1.6); }
}

/* ============================================================
   SECTION HEADER — underline draw
   ============================================================ */
.section-header h2 {
  position: relative;
  display: block;
  width: 100%;
}

/* ============================================================
   FEATURE ITEMS — icon spin on hover
   ============================================================ */
.feature-icon {
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
}
.feature-item:hover .feature-icon {
  transform: rotate(15deg) scale(1.15);
  box-shadow: 0 12px 40px rgba(238,70,25,0.4);
}

/* ============================================================
   TESTIMONIAL CARDS — quote mark float
   ============================================================ */
.testimonial-card {
  position: relative;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 12px; right: 20px;
  font-size: 5rem;
  font-family: Georgia, serif;
  color: rgba(238,70,25,0.07);
  line-height: 1;
  transition: color 0.4s ease, transform 0.5s ease;
}
.testimonial-card:hover::before {
  color: rgba(238,70,25,0.16);
  transform: scale(1.2) rotate(-5deg);
}

/* ============================================================
   CTA SECTION — animated gradient background
   ============================================================ */
.cta-section {
  background: linear-gradient(
    135deg,
    #fff8f6 0%,
    #fff 40%,
    #fff5f2 70%,
    #fff8f6 100%
  );
  background-size: 300% 300%;
  animation: ctaGradientShift 8s ease infinite;
}
@keyframes ctaGradientShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ============================================================
   FOOTER SOCIAL — spin on hover
   ============================================================ */
.footer-social a {
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.footer-social a:hover {
  transform: scale(1.25) rotate(8deg);
}

/* ============================================================
   PAGE HEADER — animated wave
   ============================================================ */
.page-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-primary);
  background-size: 200% 100%;
  animation: waveSlide 3s linear infinite;
}
@keyframes waveSlide {
  0%   { background-position: 0 0; }
  100% { background-position: 200% 0; }
}

/* ============================================================
   CHATBOT BUTTON — orbit ring
   ============================================================ */
.chatbot-widget-btn::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(238,70,25,0.35);
  animation: orbitPulse 2.5s ease-in-out infinite;
}
.chatbot-widget-btn::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1.5px solid rgba(238,70,25,0.15);
  animation: orbitPulse 2.5s ease-in-out infinite 0.8s;
}
@keyframes orbitPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.15); opacity: 0.4; }
}

/* ============================================================
   NAVBAR LOGO — gradient shift on scroll
   ============================================================ */
.navbar.scrolled .navbar-logo {
  animation: logoGlow 3s ease-in-out infinite;
}
@keyframes logoGlow {
  0%,100% { filter: drop-shadow(0 0 0px rgba(238,70,25,0)); }
  50%     { filter: drop-shadow(0 0 8px rgba(238,70,25,0.35)); }
}

/* ============================================================
   BLOG CARD — image zoom & overlay
   ============================================================ */
.blog-card-img {
  position: relative;
  overflow: hidden;
}
.blog-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(238,70,25,0.12) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.blog-card:hover .blog-card-img::after { opacity: 1; }
.blog-card-img img {
  transition: transform 0.55s cubic-bezier(0.33,1,0.68,1);
}
.blog-card:hover .blog-card-img img { transform: scale(1.08); }

/* ============================================================
   RIPPLE on click for buttons
   ============================================================ */
.ripple-origin {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  pointer-events: none;
  animation: rippleExpand 0.6s linear;
}
@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* ============================================================
   HERO CHART BARS — stagger animations
   ============================================================ */
.bar {
  animation: growBar 1s cubic-bezier(0.34,1.56,0.64,1) forwards;
  transform-origin: bottom;
  transform: scaleY(0);
  position: relative;
  overflow: hidden;
}
.bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: rgba(255,255,255,0.2);
  border-radius: 6px 6px 0 0;
}
@keyframes growBar {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ============================================================
   GRADIENT TEXT SHIMMER
   ============================================================ */
.text-gradient-shimmer {
  background: linear-gradient(90deg, #ee4619 0%, #ff8c6b 30%, #ee4619 60%, #ff8c6b 90%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3s linear infinite;
}
@keyframes textShimmer {
  to { background-position: 200% center; }
}

/* ============================================================
   LOADING SPINNER (form submit)
   ============================================================ */
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   CONTACT ICON — bounce on hover
   ============================================================ */
.contact-detail-icon {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease;
}
.contact-detail-item:hover .contact-detail-icon {
  transform: scale(1.2) rotate(-8deg);
  background: rgba(238,70,25,0.2);
}

/* ============================================================
   ABOUT TEAM / PROCESS CARDS
   ============================================================ */
.process-step {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.process-step:hover {
  transform: translateY(-8px);
}

/* ============================================================
   WAVE DIVIDER
   ============================================================ */
.wave-divider {
  position: relative;
  height: 60px;
  overflow: hidden;
}
.wave-divider svg {
  position: absolute;
  bottom: 0;
  width: 200%;
  animation: waveSweep 8s linear infinite;
}
@keyframes waveSweep {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   SECTION TAG — pulsing dot
   ============================================================ */
.section-tag::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
  animation: tagDot 1.8s ease-in-out infinite;
}
@keyframes tagDot {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.5; }
}

/* ============================================================
   CARD BORDER TOP SHIMMER
   ============================================================ */
/* Targets only card::before created by animations.js or manually */
.card-shimmer::before {
  background: linear-gradient(90deg, transparent 0%, rgba(238,70,25,0.6) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: borderShimmer 3s linear infinite;
}
@keyframes borderShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   SCROLL DOWN INDICATOR (hero)
   ============================================================ */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  opacity: 0.6;
  animation: fadeInUp 1.2s 1s ease both;
  cursor: pointer;
}
.scroll-indicator__mouse {
  width: 24px; height: 38px;
  border: 2px solid var(--text-muted);
  border-radius: 12px;
  position: relative;
}
.scroll-indicator__mouse::before {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 8px;
  background: var(--primary);
  border-radius: 2px;
  animation: mouseScroll 2s ease-in-out infinite;
}
@keyframes mouseScroll {
  0%   { opacity: 1; top: 6px; }
  60%  { opacity: 0; top: 18px; }
  100% { opacity: 0; top: 6px; }
}
.scroll-indicator__text {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   GRADIENT BORDER CARDS (Premium feel)
   ============================================================ */
.gradient-border-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.gradient-border-card::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--radius-lg) + 1.5px);
  background: linear-gradient(135deg, rgba(238,70,25,0.4), transparent 50%, rgba(238,70,25,0.2));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gradient-border-card:hover::before {
  opacity: 1;
}

/* ============================================================
   WHATSAPP FLOAT — heartbeat
   ============================================================ */
.wa-float {
  animation: waHeartbeat 2.8s ease infinite;
}
@keyframes waHeartbeat {
  0%,100% { transform: scale(1); }
  14%     { transform: scale(1.08); }
  28%     { transform: scale(1); }
  42%     { transform: scale(1.05); }
}

/* ============================================================
   RESPONSIVE  — disable heavy effects on mobile
   ============================================================ */
@media (max-width: 768px) {
  #cursor-follower, #cursor-dot { display: none !important; }
  .tilt-card { transform: none !important; }
  .cta-section { animation: none; }
  .hero-floating-card { display: none !important; }
  .scroll-indicator { bottom: 20px; }
}
@media (max-width: 480px) {
  .marquee-track { gap: 32px; }
  .marquee-item { font-size: 0.85rem; }
}

/* ============================================================
   PREFER REDUCED MOTION — accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .reveal-left, .reveal-right { transform: none; }
}