/* ========================================================================
 * Boostly DZ — Motion Graphics (Phase 1.1 — Master Command 2026-05-10)
 *
 * Loaded only on the homepage (FR + AR). Other pages use minimal animation.
 *
 * Implements:
 *   MG-1 Hero entrance (word-by-word + "boost" red→strike→Mint replacement)
 *   MG-2 Trust counter ("+50 PME" 0→50 with bounce on '+')
 *   MG-3 Sector cards stagger + hover lift + click pulse → highlight services
 *   MG-4 Services reveal (slide-up + fade-in + price count-up)
 *   MG-5 Bundle spotlight (Growth scale 1.05 + Mint pulse border + ⭐ rotation)
 *   MG-9 Sticky WhatsApp pulse (ring 56→80px fade every 5s)
 *
 * Triggers (animations.js):
 *   .anim-on-load   → fires immediately on DOMContentLoaded
 *   .anim-on-scroll → fires when element enters viewport (IntersectionObserver)
 *
 * prefers-reduced-motion: all animations become instant/no-op (final state).
 * ======================================================================== */

/* ============================================================
   MG-1 — Hero Entrance
   ============================================================ */
.hero__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
}
.hero.is-anim-active .hero__word {
  animation: hero-word-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--word-i, 0) * 0.08s) forwards;
}
@keyframes hero-word-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* "boost" → red → strikethrough → fade-out */
.boost-morph {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.boost-morph__before,
.boost-morph__after {
  display: inline-block;
}
.boost-morph__after {
  margin-inline-start: 0.4em;
  color: var(--color-gold-500, #FFD700);
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px);
}
.hero.is-anim-active .boost-morph__before {
  animation: boost-strike 1.6s ease-out 1.2s forwards;
}
.hero.is-anim-active .boost-morph__after {
  animation: boost-replace 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 2.4s forwards;
}
@keyframes boost-strike {
  0%   { color: inherit; text-decoration: none; }
  30%  { color: #EF4444; text-decoration: none; }
  60%  { color: #EF4444; text-decoration: line-through; text-decoration-color: #EF4444; }
  100% { color: #EF4444; text-decoration: line-through; text-decoration-color: #EF4444; opacity: 0.55; }
}
@keyframes boost-replace {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Subtitle / trust line / CTAs slide-up stagger */
.hero__subtitle,
.hero__trust,
.hero__cta-group,
.hero__social-proof {
  opacity: 0;
  transform: translateY(10px);
}
.hero.is-anim-active .hero__subtitle    { animation: hero-line-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards; }
.hero.is-anim-active .hero__trust       { animation: hero-line-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards; }
.hero.is-anim-active .hero__cta-group   { animation: hero-line-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.0s forwards; }
.hero.is-anim-active .hero__social-proof{ animation: hero-line-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s forwards; }
@keyframes hero-line-in {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MG-2 — Trust Counter ("+50 PME")
   ============================================================ */
.trust-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.trust-counter__plus {
  display: inline-block;
  transform-origin: center;
}
.trust-counter.is-counted .trust-counter__plus {
  animation: trust-plus-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s 1 forwards;
}
@keyframes trust-plus-bounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.6); }
  100% { transform: scale(1); }
}

/* ============================================================
   MG-3 — Sector Cards Stagger + Hover
   ============================================================ */
.sectors__grid .card--sector {
  opacity: 0;
  transform: translateY(16px);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.sectors.is-revealed .card--sector {
  animation: sector-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--sector-i, 0) * 0.15s) forwards;
}
@keyframes sector-in {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
.card--sector:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10, 24, 40, 0.12);
}
.card--sector:hover .sector-card__icon {
  transform: scale(1.08) rotate(-2deg);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card--sector .sector-card__icon { transition: transform 200ms ease; }

/* Click pulse + 3s service highlight */
.card--sector.is-clicked {
  animation: sector-click 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
@keyframes sector-click {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.96); }
}
.services__grid .card.is-recommended-by-sector {
  animation: service-recommend 3s ease 1 forwards;
  position: relative;
  z-index: 1;
}
@keyframes service-recommend {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
  10%      { box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.85); }
  90%      { box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.85); }
}

/* ============================================================
   MG-4 — Services Reveal
   ============================================================ */
.services__grid > .card {
  opacity: 0;
  transform: translateY(14px);
}
.services.is-revealed > .container > .services__grid > .card {
  animation: service-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--service-i, 0) * 0.1s) forwards;
}
@keyframes service-in {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
.service-card__price {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   MG-5 — Bundle Spotlight (Growth)
   ============================================================ */
.bundle-card {
  opacity: 0;
  transform: translateY(14px);
}
.bundles.is-revealed .bundle-card {
  animation: bundle-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--bundle-i, 0) * 0.18s) forwards;
}
@keyframes bundle-in {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (min-width: 1024px) {
  .bundles.is-revealed .card--featured {
    transform: scale(1.05);
  }
}
.bundles.is-revealed .card--featured {
  animation:
    bundle-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s forwards,
    bundle-featured-pulse 3s ease 1.2s 1;
}
@keyframes bundle-featured-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.55); }
}
.card--featured .card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}
.card--featured .card-badge::before {
  content: '⭐';
  display: inline-block;
  animation: badge-star-rotate 20s linear infinite;
}
.card--featured .card-badge {
  /* Hide the original star emoji (inserted via ::before above) */
}
@keyframes badge-star-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================================
   MG-9 — Sticky WhatsApp Pulse
   ============================================================ */
.sticky-wa {
  position: relative;
}
.sticky-wa::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-gold-500, #FFD700);
  pointer-events: none;
  opacity: 0;
  animation: sticky-wa-pulse 5s ease-out infinite;
}
@keyframes sticky-wa-pulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  60%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}
.sticky-wa:hover {
  transform: scale(1.08);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================================================
   prefers-reduced-motion — kill all animation, snap to final
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero.is-anim-active .hero__word,
  .hero.is-anim-active .hero__subtitle,
  .hero.is-anim-active .hero__trust,
  .hero.is-anim-active .hero__cta-group,
  .hero.is-anim-active .hero__social-proof {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero.is-anim-active .boost-morph__before { animation: none !important; color: #EF4444; text-decoration: line-through; opacity: 0.55; }
  .hero.is-anim-active .boost-morph__after  { animation: none !important; opacity: 1; transform: none; }
  .sectors.is-revealed .card--sector,
  .services.is-revealed > .container > .services__grid > .card,
  .bundles.is-revealed .bundle-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .bundles.is-revealed .card--featured {
    transform: scale(1) !important; /* skip the 1.05 scale under reduced motion */
  }
  .sticky-wa::after { animation: none !important; opacity: 0 !important; }
  .card--featured .card-badge::before { animation: none !important; }
  .trust-counter.is-counted .trust-counter__plus { animation: none !important; }
}