/* ==========================================================================
   effects.css — sitewide polish layer: scroll-reveal, shadows/elevation,
   hover micro-interactions, ambient motion. Loaded on every page (after
   components.css) so it enhances existing classes without needing to
   touch every page's markup. Respects prefers-reduced-motion via the
   global rule already in base.css (animation/transition durations are
   forced to ~0 for users who need that).
   ========================================================================== */

/* ---------- Page load ---------- */
/* Keep body free of transforms so fixed overlays stay anchored after scroll. */
body {
  animation: pageFadeIn 0.5s var(--ease) both;
}
@keyframes pageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- Scroll-reveal (class added by assets/effects.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Sticky header: shadow on scroll ---------- */
.site-header {
  transition:
    box-shadow var(--transition-base),
    background var(--transition-base);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

/* ---------- Ambient motion behind hero / dark page banners ---------- */
.hero::before,
.page-banner::before {
  animation: driftGlow 14s ease-in-out infinite alternate;
}
@keyframes driftGlow {
  from {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
  to {
    background-position:
      12px -10px,
      -10px 12px,
      10px 10px,
      -8px -8px,
      6px -6px;
  }
}

/* ---------- Buttons: shine sweep + lift (extends existing .btn:hover) --- */
.btn {
  position: relative;
  overflow: hidden;
}
.btn--primary::after,
.btn--whatsapp::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn--primary:hover::after,
.btn--whatsapp:hover::after {
  left: 130%;
}
.btn:active {
  transform: translateY(0) scale(0.98);
}

/* Pulsing ring behind the header WhatsApp icon button, to draw the eye to
   the highest-intent conversion action without being an alarm siren. */
.icon-btn {
  position: relative;
}
.icon-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--color-whatsapp);
  opacity: 0;
  animation: pulseRing 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes pulseRing {
  0% {
    transform: scale(0.82);
    opacity: 0.55;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* ---------- Card elevation, unified across the site ---------- */
/* Gives every card a soft resting shadow (not just on hover) so the whole
   site reads with a bit more depth, plus a consistent lift on hover. */
.service-card,
.testi-card,
.contact-card,
.value-card,
.included-item,
.gallery-tile,
.svc-about__panel {
  box-shadow: var(--shadow-sm);
}
.service-card,
.testi-card,
.contact-card,
.value-card,
.included-item,
.gallery-tile {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-fast);
}
.testi-card:hover,
.gallery-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.gallery-tile:hover {
  transform: scale(1.03) translateY(-2px);
}

/* ---------- Icon badges: playful tilt + color invert on hover ---------- */
.service-card__icon,
.why-item__icon,
.included-item__icon,
.value-card__icon,
.contact-card__icon {
  transition:
    transform 0.35s var(--ease),
    background 0.35s ease,
    color 0.35s ease;
}
.service-card:hover .service-card__icon,
.why-item:hover .why-item__icon,
.included-item:hover .included-item__icon,
.value-card:hover .value-card__icon {
  transform: scale(1.08) rotate(-4deg);
  background: var(--color-primary);
  color: var(--color-white);
}

/* ---------- Process step numbers: lift on hover ---------- */
.process-item__num {
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s ease;
}
.process-item:hover .process-item__num {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

/* ---------- Service / related-service link arrow nudge ---------- */
.service-card__link svg {
  transition: transform 0.3s var(--ease);
}

/* ---------- Nav dropdown: gentle scale-in ---------- */
.dropdown {
  transform: translateX(-50%) translateY(6px) scale(0.97);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ---------- Tag chips: hover affordance when used as links ---------- */
a.tag-chip {
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}
a.tag-chip:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* ---------- FAQ accordion: subtle color feedback ---------- */
.faq-item__q {
  transition: color var(--transition-fast);
}
.faq-item__q:hover {
  color: var(--color-primary);
}
.faq-item[data-open="true"] .faq-item__q {
  color: var(--color-primary-dark);
}

/* ---------- CTA banner: soft top-light sheen ---------- */
.cta-banner {
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    480px circle at 15% -10%,
    rgba(255, 255, 255, 0.16),
    transparent 60%
  );
  pointer-events: none;
}
.cta-banner > * {
  position: relative;
  z-index: 1;
}

/* ---------- Trust / included checkmark chips: subtle entrance pop ---------- */
.trust-chip,
.tag-chip {
  transition: transform var(--transition-fast);
}

/* ---------- Reduced motion: extra safety net ---------- */
/* base.css already forces near-zero animation/transition durations
   globally for prefers-reduced-motion; this just ensures reveal content
   is fully visible rather than stuck at a mid-transition state. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
  body {
    animation: none;
  }
  .icon-btn::before,
  .hero::before,
  .page-banner::before {
    animation: none;
  }
}