/* ==========================================================================
   BURAKKO — Animaciones de la página "Campañas en ChatGPT Ads"
   --------------------------------------------------------------------------
   Se carga DESPUÉS de home-motion.css, del que reutiliza los efectos comunes
   (revelado al scroll, títulos palabra por palabra, luz en tarjetas, cursor,
   header inteligente y barra de progreso). Acá va solo lo propio: intro del
   hero, brillos del fondo, badges, números de los pasos y hovers.

   Mismas reglas que el resto del sitio: solo opacity / transform / clip-path,
   todo dentro de (prefers-reduced-motion: no-preference) y sin ocultar nada
   si el JS no carga.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* 01. INTRO DEL HERO (solo CSS, no espera al JS) ====================== */

  .bkcg-hero__copy .bkcg-eyebrow { animation: m-in-left .8s var(--m-ease) .05s backwards; }
  .bkcg-title                    { animation: m-rise-mask 1.1s var(--m-ease) .12s backwards; }
  .bkcg-title__accent            { animation: m-wipe 1.1s var(--m-ease) .5s backwards; }
  .bkcg-lead                     { animation: m-rise .9s var(--m-ease) .35s backwards; }
  .bkcg-hero .bkcg-actions       { animation: m-rise .9s var(--m-ease) .5s backwards; }

  /* Card "¿Cómo funciona?": entra desde la derecha. */
  .bkcg-how                      { animation: cg-in-right 1.1s var(--m-ease) .3s backwards; }
  .bkcg-how .bkcg-eyebrow        { animation: m-in-left .8s var(--m-ease) .65s backwards; }
  .bkcg-how__text                { animation: m-rise .9s var(--m-ease) .75s backwards; }
  /* "patrocinados" y "no modifican las respuestas" se encienden en verde. */
  .bkcg-how__text strong         { animation: cg-highlight 1s ease 1.25s backwards; }
  .bkcg-how__text strong + strong { animation-delay: 1.55s; }
  .bkcg-how__countries           { animation: m-rise .8s var(--m-ease) .95s backwards; }
  .bkcg-chips li                 { animation: m-pop .6s var(--m-ease-back) backwards; }
  .bkcg-chips li:nth-child(1)    { animation-delay: 1.05s; }
  .bkcg-chips li:nth-child(2)    { animation-delay: 1.13s; }
  .bkcg-chips li:nth-child(3)    { animation-delay: 1.21s; }
  .bkcg-chips li:nth-child(4)    { animation-delay: 1.29s; }

  @keyframes cg-in-right  { from { opacity: 0; transform: translateX(48px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes cg-highlight { from { color: #fff; } to { color: var(--bkcg-accent); } }


  /* 02. BRILLOS DEL FONDO: respiran y se desplazan con el scroll ========= */

  .bkcg-bg__glow {
    translate: 0 var(--cg-py, 0px);
    transform-origin: 92% 14%;
    animation: cg-breathe 12s ease-in-out infinite alternate;
  }
  .bkcg-bg__glow--b { transform-origin: 0 100%; animation-duration: 16s; animation-direction: alternate-reverse; }
  @keyframes cg-breathe { 0% { scale: 1; opacity: 1; } 50% { scale: 1.08; opacity: .8; } 100% { scale: .96; opacity: 1; } }


  /* 03. TARJETAS Y PASOS ===================================================
     Las tarjetas suben escalonadas (data-m="up", de home-motion.css). Su
     badge y el número del paso aparecen apenas después, con rebote. */

  .bkcg-badge, .bkcg-step__n, .bkcg-card__icon {
    transition: transform .6s var(--m-ease-back), opacity .4s ease;
  }
  /* Mientras la tarjeta se revela, entran 0,3 s después que ella. */
  .m-js [data-m] .bkcg-badge, .m-js [data-m] .bkcg-step__n, .m-js [data-m] .bkcg-card__icon {
    transition-delay: calc(var(--m-d, 0s) + .3s);
  }
  .m-js [data-m]:not(.is-in) .bkcg-badge,
  .m-js [data-m]:not(.is-in) .bkcg-step__n { opacity: 0; transform: scale(.4); }
  .m-js [data-m]:not(.is-in) .bkcg-card__icon { opacity: 0; transform: rotate(-20deg) scale(.6); }


  /* 04. HOVER (solo con mouse) =========================================== */

  @media (hover: hover) and (pointer: fine) {
    .bkcg-cta__arrow { transition: filter .2s ease; }
    .bkcg-cta__arrow svg { transition: translate .45s var(--m-ease); }
    .bkcg-cta:hover .bkcg-cta__arrow svg { translate: 3px -3px; }

    .bkcg-card:hover .bkcg-card__icon { transform: rotate(-8deg) scale(1.1); }
    .bkcg-card:hover .bkcg-badge      { transform: scale(1.08); }
    .bkcg-step:hover .bkcg-step__n    { transform: scale(1.12); }

    .bkcg-chips li { transition: background-color .25s ease, translate .4s var(--m-ease); }
    .bkcg-chips li:hover { background: #26302c; translate: 0 -3px; }
  }

} /* fin prefers-reduced-motion: no-preference */


@media print {
  .m-js [data-m] .bkcg-badge, .m-js [data-m] .bkcg-step__n, .m-js [data-m] .bkcg-card__icon {
    opacity: 1 !important; transform: none !important;
  }
}