/* ==========================================================================
   BURAKKO — Animaciones de la HOME  (propuesta v2)
   --------------------------------------------------------------------------
   Capa 100% aditiva: no redefine colores, tipografías, tamaños ni layout
   de styles.css. Solo agrega movimiento (opacity / transform / clip-path),
   que el navegador anima en la GPU sin recalcular el layout.

   Reglas del archivo:
   · Todo el movimiento vive dentro de (prefers-reduced-motion: no-preference).
     Quien tenga activado "reducir movimiento" ve la web exactamente como hoy.
   · Los estados "ocultos antes de entrar" dependen de la clase .m-js que
     pone home-motion.js. Si el JS no carga, nada queda oculto.
   · Se usan las propiedades individuales `translate` y `scale` (no
     `transform`) donde el elemento ya tiene un transform propio, para no
     pisarlo (p. ej. el blob del CTA y la foto del fundador).

   Índice:
     01. Intro del hero (solo CSS, no espera al JS)
     02. Revelado al hacer scroll
     03. Títulos palabra por palabra
     04. Imágenes con cortina
     05. Gráficos (línea, donut, barras) y proceso
     06. Blobs: respiración + parallax
     07. Hover: tarjetas con luz, imágenes, flechas
     08. Botones: pulso, magnético, WhatsApp
     09. Header inteligente + barra de progreso
     10. Cursor
     11. Impresión
   ========================================================================== */

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

  :root {
    --m-ease:      cubic-bezier(.22, 1, .36, 1);      /* easeOutQuint */
    --m-ease-back: cubic-bezier(.34, 1.56, .64, 1);   /* leve rebote */
    --m-dur:       .9s;
  }


  /* 01. INTRO DEL HERO ====================================================
     Arranca apenas pinta la página, sin esperar al JS, y dura menos de
     1,5 s en total para no demorar el LCP. fill-mode: backwards → al
     terminar el elemento vuelve exactamente a su estilo original.         */

  .hero .eyebrow        { animation: m-in-left .8s var(--m-ease) .05s backwards; }
  .hero__title          { animation: m-rise-mask 1.1s var(--m-ease) .12s backwards; }
  .hero__title b        { animation: m-wipe 1.1s var(--m-ease) .45s backwards; }
  .hero .bubble         { transform-origin: 100% 100%; }
  .hero .avatar         { animation: m-pop .8s var(--m-ease-back) .42s backwards; }
  .hero .cta-group      { animation: m-rise .9s var(--m-ease) .6s backwards; }
  .hero .flags img      { animation: m-rise .7s var(--m-ease) backwards; }
  .hero .flags img:nth-child(1) { animation-delay: .70s; }
  .hero .flags img:nth-child(2) { animation-delay: .76s; }
  .hero .flags img:nth-child(3) { animation-delay: .82s; }
  .hero .flags img:nth-child(4) { animation-delay: .88s; }
  .hero .flags img:nth-child(5) { animation-delay: .94s; }
  .hero .flags img:nth-child(6) { animation-delay: 1s; }
  .hero .flags img:nth-child(7) { animation-delay: 1.06s; }

  /* El globo de "¡Hola!" flota suave después de aparecer. */
  .hero .bubble { animation: m-pop .8s var(--m-ease-back) .55s backwards,
                             m-bob 5s ease-in-out 1.6s infinite; }

  /* Saludo 👋 (el JS envuelve el emoji en .m-wave). */
  .m-wave {
    display: inline-block;
    transform-origin: 70% 80%;
    animation: m-wave 2.6s ease-in-out 1.3s infinite;
  }

  @keyframes m-rise-mask {
    from { opacity: 0; transform: translateY(.35em); clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; transform: none;               clip-path: inset(0 0 -30% 0); }
  }
  @keyframes m-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 -30% 0); }
  }
  @keyframes m-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes m-in-left {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes m-pop {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes m-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -6px; }
  }
  @keyframes m-wave {
    0%, 60%, 100% { rotate: 0deg; }
    10%, 30%      { rotate: 16deg; }
    20%, 40%      { rotate: -8deg; }
  }


  /* 02. REVELADO AL HACER SCROLL ==========================================
     home-motion.js marca cada elemento con [data-m="tipo"] y le agrega
     .is-in cuando entra en pantalla. --m-d es el retraso escalonado.     */

  .m-js [data-m] {
    transition:
      opacity   var(--m-dur) var(--m-ease) var(--m-d, 0s),
      transform var(--m-dur) var(--m-ease) var(--m-d, 0s),
      clip-path 1.1s        var(--m-ease) var(--m-d, 0s);
  }

  .m-js [data-m="up"]:not(.is-in)    { opacity: 0; transform: translateY(40px); }
  .m-js [data-m="fade"]:not(.is-in)  { opacity: 0; }
  .m-js [data-m="left"]:not(.is-in)  { opacity: 0; transform: translateX(-32px); }
  .m-js [data-m="zoom"]:not(.is-in)  { opacity: 0; transform: scale(.92); }
  .m-js [data-m="pop"]:not(.is-in)   { opacity: 0; transform: scale(.7); }

  /* Una vez terminado el revelado el JS quita [data-m]: el elemento queda
     con sus estilos originales y los hovers recuperan su propia transición. */

  /* ✱ del eyebrow: gira al entrar. */
  .m-js .eyebrow[data-m]::before {
    display: inline-block;
    transition: transform 1.2s var(--m-ease) calc(var(--m-d, 0s) + .1s);
  }
  .m-js .eyebrow[data-m]:not(.is-in)::before { transform: rotate(-180deg) scale(.4); }


  /* 03. TÍTULOS PALABRA POR PALABRA =======================================
     Estilo "text reveal" de Artistics/Ewebot. Cada palabra sube y se
     desenfoca levemente. Los textos con degradé (.grad) no se parten
     (romperían el degradé): se revelan con una cortina de izquierda a
     derecha.                                                              */

  .m-word {
    display: inline-block;
    transition:
      opacity   .8s var(--m-ease) var(--m-wd, 0s),
      transform .9s var(--m-ease) var(--m-wd, 0s),
      filter    .8s var(--m-ease) var(--m-wd, 0s);
  }
  .m-js [data-m="words"]:not(.is-in) .m-word {
    opacity: 0;
    transform: translateY(.55em) rotate(3deg);
    filter: blur(6px);
  }
  .m-js [data-m="words"] .grad {
    transition: clip-path 1.2s var(--m-ease) var(--m-gd, .2s);
    clip-path: inset(-20% -2% -30% 0);
  }
  .m-js [data-m="words"]:not(.is-in) .grad { clip-path: inset(-20% 100% -30% 0); }


  /* 04. IMÁGENES CON CORTINA ==============================================
     Estilo "image reveal" de Artistics: la imagen se descubre de abajo
     hacia arriba mientras se asienta el zoom.                             */

  .m-js [data-m="curtain"]:not(.is-in) {
    clip-path: inset(100% 0 0 0 round 14px);
    transform: scale(1.12);
  }
  .m-js [data-m="curtain"].is-in { clip-path: inset(0 0 0 0 round 14px); }
  .m-js [data-m="curtain"] {
    transition:
      clip-path 1.1s var(--m-ease) var(--m-d, 0s),
      transform 1.4s var(--m-ease) var(--m-d, 0s);
  }

  /* Foto del fundador: cortina lateral sobre su contenedor. */
  .m-js .founder__media[data-m="curtain-x"] {
    transition: clip-path 1.3s var(--m-ease) var(--m-d, 0s);
  }
  .m-js .founder__media[data-m="curtain-x"]:not(.is-in) { clip-path: inset(0 100% 0 0); }
  .m-js .founder__media[data-m="curtain-x"].is-in       { clip-path: inset(0 0 0 0); }
  .founder__media img { translate: 0 var(--m-par, 0px); }


  /* 05. GRÁFICOS Y PROCESO ================================================ */

  /* Línea de "Empresas posicionadas" y conectores del proceso: se dibujan. */
  .m-draw {
    transition: stroke-dashoffset 1.6s var(--m-ease) var(--m-d, 0s);
  }
  /* Donut de campañas: lo anima el JS cuadro a cuadro junto con el número (v2). */
  /* Barras de "Tu propio equipo": crecen desde la base. */
  .m-bar {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform 1s var(--m-ease-back) var(--m-d, 0s);
  }
  .m-bar.m-off { transform: scaleY(0); }
  .m-dot {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .6s var(--m-ease-back) var(--m-d, 0s), opacity .4s ease var(--m-d, 0s);
  }
  .m-dot.m-off { transform: scale(0); opacity: 0; }

  /* Pasos del proceso: aparecen en el orden 01 → 09 siguiendo la serpentina. */
  .m-js .process__turn[data-m] svg path {
    transition: stroke-dashoffset 1s var(--m-ease) var(--m-d, 0s);
  }


  /* 06. BLOBS: RESPIRACIÓN + PARALLAX =====================================
     `scale` y `translate` son independientes de `transform`, así no se
     pisa el translateX(-50%) inline del blob del CTA. Solo se animan los
     blobs de la sección visible (.m-view), el resto queda en pausa.      */

  .blob {
    translate: var(--m-bx, 0px) var(--m-by, 0px);
    animation: m-breathe 14s ease-in-out infinite alternate;
    animation-play-state: paused;
  }
  .blob:nth-of-type(2n) { animation-duration: 18s; animation-direction: alternate-reverse; }
  .m-view > .blob       { animation-play-state: running; }

  @keyframes m-breathe {
    0%   { scale: 1;    opacity: 1; }
    50%  { scale: 1.12; opacity: .85; }
    100% { scale: .94;  opacity: 1; }
  }


  /* 07. HOVER =============================================================
     Solo en dispositivos con mouse. Las tarjetas se elevan apenas y una
     luz de color de marca sigue al cursor por detrás del contenido.       */

  @media (hover: hover) and (pointer: fine) {

    .m-spot {
      position: relative;
      isolation: isolate;
      transition: translate .5s var(--m-ease), border-color .4s ease, box-shadow .5s var(--m-ease);
    }
    .m-spot::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      transition: opacity .4s ease;
      background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
                  rgba(28, 232, 178, .13), transparent 62%);
    }
    .m-spot:hover::before { opacity: 1; }
    .m-spot:hover {
      translate: 0 -6px;
      border-color: rgba(28, 232, 178, .32);
      box-shadow: 0 24px 50px -28px rgba(28, 232, 178, .35);
    }

    /* Ícono de servicio: pequeño giro al pasar. */
    .service__icon { transition: transform .6s var(--m-ease-back); }
    .service:hover .service__icon { transform: rotate(-8deg) scale(1.12); }

    /* Portfolio: la pieza se eleva. */
    .portfolio__grid img { transition: translate .5s var(--m-ease), box-shadow .5s var(--m-ease), filter .5s ease; }
    .portfolio__grid img:hover {
      translate: 0 -8px;
      box-shadow: 0 26px 40px -24px rgba(0, 0, 0, .9);
      filter: brightness(1.06);
    }

    /* Reels: la portada hace un zoom lento dentro de la tarjeta. */
    .reel__poster { transition: transform 1.1s var(--m-ease); }
    .reel__media:hover .reel__poster { transform: scale(1.07); }

    /* Logos de clientes y tags. */
    .logo { transition: translate .45s var(--m-ease), box-shadow .45s var(--m-ease); }
    .logo:hover { translate: 0 -5px; box-shadow: 0 16px 30px -18px rgba(28, 232, 178, .55); }
    .tag  { transition: border-color .3s ease, color .3s ease; }
    .tag:hover { border-color: rgba(28, 232, 178, .6); }

    /* Flechas ↗: se desplazan en diagonal. */
    .icon-btn, .social__arrow, .cta__badge span:first-child {
      transition: translate .45s var(--m-ease), filter .2s ease;
    }
    .cta-group:hover .icon-btn,
    .icon-btn:hover,
    .social__link:hover .social__arrow { translate: 3px -3px; }
    .cta__badge:hover span:first-child { translate: 4px -4px; }

    /* Links del menú: subrayado que se dibuja. */
    .nav__link { background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1.5px no-repeat;
                 transition: background-size .4s var(--m-ease), color .2s ease; }
    .nav__link:hover { background-size: 100% 1.5px; }
  }


  /* 08. BOTONES ===========================================================*/

  /* Badge "Escribinos": anillo que late (estilo gt3pulse de Ewebot). */
  .cta__badge { position: relative; }
  .cta__badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--accent);
    pointer-events: none;
    animation: m-ping 2.6s var(--m-ease) infinite;
  }
  @keyframes m-ping {
    0%   { transform: scale(1);   opacity: .7; }
    80%, 100% { transform: scale(1.45); opacity: 0; }
  }

  /* Botones magnéticos: el JS escribe --m-mx / --m-my. */
  .m-mag { translate: var(--m-mx, 0px) var(--m-my, 0px); transition: translate .5s var(--m-ease); }
  .m-mag.m-mag-on { transition: translate .15s linear; }

  /* WhatsApp: entra tarde para no competir con el hero, luego late suave. */
  .whatsapp-button { animation: m-pop .7s var(--m-ease-back) 1.6s backwards; }
  .whatsapp-button::after {
    content: "";
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    border: 2px solid #1A9739;
    pointer-events: none;
    animation: m-ping 3.2s var(--m-ease) 3s infinite;
    opacity: 0;
  }


  /* 09. HEADER INTELIGENTE + PROGRESO =====================================
     Se oculta al bajar y reaparece al subir (como Ewebot). */

  .header { transition: transform .45s var(--m-ease); }
  .header.m-hide { transform: translateY(-101%); }

  .m-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 60;
    pointer-events: none;
    background: var(--grad-brand);
    transform-origin: 0 50%;
    transform: scaleX(var(--m-p, 0));
  }


  /* 10. CURSOR ============================================================
     Anillo que sigue al mouse con inercia (magic cursor de Artistics).
     El cursor nativo se mantiene: es un acompañante, no un reemplazo. */

  .m-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .45);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 11px/1 Figtree, system-ui, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #050505;
    opacity: 0;
    transition: width .35s var(--m-ease), height .35s var(--m-ease), margin .35s var(--m-ease),
                background-color .3s ease, border-color .3s ease, opacity .3s ease;
    will-change: transform;
  }
  .m-cursor.is-on   { opacity: 1; }
  .m-cursor.is-link { width: 58px; height: 58px; margin: -29px 0 0 -29px;
                      border-color: var(--accent); background-color: rgba(28, 232, 178, .12); }
  .m-cursor.is-play { width: 86px; height: 86px; margin: -43px 0 0 -43px;
                      border-color: var(--accent); background-color: var(--accent); }
  .m-cursor span    { opacity: 0; transition: opacity .2s ease; }
  .m-cursor.is-play span { opacity: 1; }
  .m-cursor.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

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


/* 11. IMPRESIÓN: todo visible y quieto. ================================== */
@media print {
  .m-js [data-m], .m-js [data-m] .m-word, .m-js [data-m] .grad {
    opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important;
  }
  .m-progress, .m-cursor { display: none !important; }
}