/* ==========================================================================
   ASA DEDETIZADORA — MOTION SYSTEM & ENTRANCE ANIMATIONS
   Padrão Cinematográfico R$ 10.000 | Motion Cookbooks & Staggered Reveals
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEYFRAMES
   -------------------------------------------------------------------------- */

/* Pulse animation applied ONLY to the WhatsApp buttons */
@keyframes whatsapp-button-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(8, 125, 179, 0.65), 0 8px 30px rgba(8, 125, 179, 0.4);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(8, 125, 179, 0), 0 8px 30px rgba(8, 125, 179, 0.4);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(8, 125, 179, 0), 0 8px 30px rgba(8, 125, 179, 0.4);
  }
}

/* Subtle badge floating */
@keyframes soft-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Floating Bob Animation (Cookbook 3, Recipe 45) */
@keyframes floating-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Rotating Decorative Ring (Cookbook 3, Recipe 45) */
@keyframes rotating-ring {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Secondary Pulse Ring (Cookbook 3, Recipe 45) */
@keyframes pulse-ring {
  0%, 100% {
    transform: scale(1);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.65;
  }
}

/* --------------------------------------------------------------------------
   2. SECTION ENTRANCE ANIMATION (JAKUB & EMIL MOTION RECIPE)
   Progressive enhancement: visible by default, dynamic when active
   -------------------------------------------------------------------------- */
.section-reveal {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.js-motion-active .section-reveal:not(.in-view) {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
}

.section-reveal.in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0) !important;
}

/* Staggered Children inside Grids and Timelines */
.pests-grid-strip.section-reveal.in-view .pest-item-card:nth-child(1) { transition-delay: 0.05s; }
.pests-grid-strip.section-reveal.in-view .pest-item-card:nth-child(2) { transition-delay: 0.10s; }
.pests-grid-strip.section-reveal.in-view .pest-item-card:nth-child(3) { transition-delay: 0.15s; }
.pests-grid-strip.section-reveal.in-view .pest-item-card:nth-child(4) { transition-delay: 0.20s; }
.pests-grid-strip.section-reveal.in-view .pest-item-card:nth-child(5) { transition-delay: 0.25s; }
.pests-grid-strip.section-reveal.in-view .pest-item-card:nth-child(6) { transition-delay: 0.30s; }
.pests-grid-strip.section-reveal.in-view .pest-item-card:nth-child(7) { transition-delay: 0.35s; }
.pests-grid-strip.section-reveal.in-view .pest-item-card:nth-child(8) { transition-delay: 0.40s; }

.services-grid .service-card:nth-child(1) { transition-delay: 0.05s; }
.services-grid .service-card:nth-child(2) { transition-delay: 0.15s; }
.services-grid .service-card:nth-child(3) { transition-delay: 0.25s; }
.services-grid .service-card:nth-child(4) { transition-delay: 0.35s; }
.services-grid .service-card:nth-child(5) { transition-delay: 0.45s; }

.steps-timeline-grid.section-reveal.in-view .step-card:nth-child(1) { transition-delay: 0.05s; }
.steps-timeline-grid.section-reveal.in-view .step-card:nth-child(2) { transition-delay: 0.20s; }
.steps-timeline-grid.section-reveal.in-view .step-card:nth-child(3) { transition-delay: 0.35s; }

/* --------------------------------------------------------------------------
   3. SVG LINE-DRAW ANIMATION (3px Stroke, Outline Only)
   Stroke-dashoffset transition 1.2s ease-out upon entering viewport
   -------------------------------------------------------------------------- */
.draw-path {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: stroke-dashoffset;
}

.in-view .draw-path,
.draw-path.drawn {
  stroke-dashoffset: 0 !important;
}

/* --------------------------------------------------------------------------
   4. WHATSAPP BUTTON PULSE
   -------------------------------------------------------------------------- */
.pulse-whatsapp {
  animation: whatsapp-button-pulse 2.6s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   5. CINEMATIC BREAK REVEAL
   Calm scale 1.05 -> 1.0 and fade
   -------------------------------------------------------------------------- */
.cinematic-break-section .cinematic-break-media img {
  transform: scale(1.05);
  opacity: 0.85;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cinematic-break-section.in-view .cinematic-break-media img {
  transform: scale(1.0);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   5.1 TYPEWRITER CURSOR BLINK & WORD ACCENT
   Realistic typewriter rhythm with blinking vertical pipe
   -------------------------------------------------------------------------- */
.typewriter-word {
  display: inline-block;
  color: #087db3;
  font-weight: 800;
  border-bottom: 3px solid #38bdf8;
  padding-bottom: 2px;
  min-width: 1.5ch;
  white-space: nowrap;
}

.typewriter-cursor {
  display: inline-block;
  color: #38bdf8;
  font-weight: 300;
  margin-left: 2px;
  animation: typewriter-blink 0.8s infinite;
  user-select: none;
}

@keyframes typewriter-blink {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   6. PREFERS-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;
    scroll-behavior: auto !important;
  }
  
  .section-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  
  .draw-path {
    stroke-dashoffset: 0 !important;
  }
  
  .pulse-whatsapp,
  .floating-whatsapp-btn {
    animation: none !important;
  }
}