/* ============================================================
   GAMERO GIL · MOTION — "El Obrador en movimiento"
   ------------------------------------------------------------
   Animaciones de revelado al hacer scroll + secuencia de entrada
   del hero. Pensado para bloques nativos de Gutenberg: el motor
   (gg-motion.js) engancha por clases semánticas Y por block
   styles registrados (.is-style-gg-*). 100% progresivo:

   · Sin JS  → todo visible (no se aplican estados ocultos).
   · prefers-reduced-motion → JS no activa <html class="gg-motion">,
     así que jamás se oculta nada y no hay transform.

   Autor: Antonio Díaz · antoniodiaz.pro · nexopress.com
   ============================================================ */

:root{
  --gg-ease:      cubic-bezier(0.23, 1, 0.32, 1);   /* ease-out fuerte (asiento) */
  --gg-ease-trazo:cubic-bezier(0.23, 1, 0.32, 1);   /* ease-out fuerte (reveal) */
  --gg-ease-io:   cubic-bezier(0.77, 0, 0.175, 1);  /* ease-in-out (movimiento en pantalla) */
  --gg-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);/* easeOutBack: pop in de la nota */
  /* Scroll reveal de portfolio: tier "raro / marketing" → puede superar 300 ms */
  --gg-dur-reveal: .8s;
  --gg-dur-settle: .6s;
  --gg-dur-rule:   .7s;
}

/* Mientras el motor mide posiciones, evitamos un parpadeo:
   ocultamos lo animable sólo cuando <html class="gg-motion gg-armed"> */

/* ------------------------------------------------------------
   1 · TRAZO — titulares serif, línea a línea desde máscara
   ------------------------------------------------------------ */
html.gg-motion .gg-trazo{ }
html.gg-motion .gg-trazo .gg-line-mask{
  display:block; overflow:hidden;
  padding-bottom:.26em; margin-bottom:-.26em;  /* descendentes (g, p) sin recortar */
}
html.gg-motion.gg-armed .gg-trazo .gg-line-inner{
  display:block;
  transform:translateY(112%) rotate(2.5deg);
  transform-origin:left bottom;
  opacity:0;
}
html.gg-motion .gg-trazo .gg-line-inner{
  display:block;
  transition:transform var(--gg-dur-reveal) var(--gg-ease-trazo),
             opacity calc(var(--gg-dur-reveal) * .6) var(--gg-ease);
  transition-delay:var(--gg-delay, 0ms);
  will-change:transform;
}
html.gg-motion .gg-trazo.in .gg-line-inner{
  transform:translateY(0) rotate(0deg);
  opacity:1;
}

/* ------------------------------------------------------------
   2 · ASIENTO — sube y se posa (con cascada por hijos)
   ------------------------------------------------------------ */
html.gg-motion.gg-armed .gg-rise{
  opacity:0; transform:translateY(26px);
}
html.gg-motion .gg-rise{
  transition:opacity var(--gg-dur-settle) var(--gg-ease),
             transform var(--gg-dur-settle) var(--gg-ease);
  transition-delay:var(--gg-delay, 0ms);
  will-change:transform, opacity;
}
html.gg-motion .gg-rise.in{ opacity:1; transform:none; }

/* variante lateral (entra desde la izquierda) */
html.gg-motion.gg-armed .gg-rise-x{ opacity:0; transform:translateX(-22px); }
html.gg-motion .gg-rise-x{
  transition:opacity var(--gg-dur-settle) var(--gg-ease),
             transform var(--gg-dur-settle) var(--gg-ease);
  transition-delay:var(--gg-delay, 0ms);
}
html.gg-motion .gg-rise-x.in{ opacity:1; transform:none; }

/* ------------------------------------------------------------
   3 · VELADURA — se retira un panel de tinta sobre la obra
   ------------------------------------------------------------ */
html.gg-motion .gg-unveil{ position:relative; }
html.gg-motion .gg-unveil::after{
  content:""; position:absolute; inset:0; z-index:4;
  background:var(--fg, #0E0C0B);
  transform-origin:bottom center;
  transform:scaleY(0);
  transition:transform var(--gg-dur-reveal) var(--gg-ease-trazo);
  transition-delay:var(--gg-delay, 0ms);
  pointer-events:none;
}
/* la cortina sólo se cierra cuando el motor está armado (nunca bloquea sin JS activo) */
html.gg-motion.gg-armed .gg-unveil:not(.in)::after{ transform:scaleY(1); }
html.gg-motion .gg-unveil.in::after{ transform:scaleY(0); }

/* la imagen interior respira al descubrirse (Ken Burns sutil) */
html.gg-motion.gg-armed .gg-unveil :is(img, .placeholder, .ph-img){
  transform:scale(1.06);
}
html.gg-motion .gg-unveil :is(img, .placeholder, .ph-img){
  transition:transform calc(var(--gg-dur-reveal) + .3s) var(--gg-ease);
  transition-delay:var(--gg-delay, 0ms);
}
html.gg-motion .gg-unveil.in :is(img, .placeholder, .ph-img){ transform:scale(1); }

/* las etiquetas mono del placeholder por encima del panel */
html.gg-motion .gg-unveil .ph-tag,
html.gg-motion .gg-unveil .ph-corner,
html.gg-motion .gg-unveil .lbl,
html.gg-motion .gg-unveil .badge-eye{ z-index:5; }

/* variante horizontal: el panel se retira hacia la derecha */
html.gg-motion .gg-unveil.x::after{ transform-origin:left center; transform:scaleX(0); }
html.gg-motion.gg-armed .gg-unveil.x:not(.in)::after{ transform:scaleX(1); }
html.gg-motion .gg-unveil.x.in::after{ transform:scaleX(0); }

/* ------------------------------------------------------------
   4 · REGLA — la línea se dibuja de 0 → 100 %
   ------------------------------------------------------------ */
html.gg-motion .gg-rule{ position:relative; }
html.gg-motion .gg-rule::before{
  content:""; position:absolute; left:0; top:0; height:1px; width:100%;
  background:var(--rule-strong, var(--fg));
  transform:scaleX(1); transform-origin:left center;
  transition:transform var(--gg-dur-rule) var(--gg-ease);
  transition-delay:var(--gg-delay, 0ms);
}
html.gg-motion.gg-armed .gg-rule:not(.in)::before{ transform:scaleX(0); }
html.gg-motion .gg-rule.in::before{ transform:scaleX(1); }

/* ------------------------------------------------------------
   5 · SECUENCIA DEL HERO (en carga, orquestada por JS)
   ------------------------------------------------------------ */
html.gg-motion.gg-armed .hero .scale-rail .tick{ opacity:0; transform:translateX(-8px); }
html.gg-motion .hero .scale-rail .tick{
  transition:opacity .5s var(--gg-ease), transform .5s var(--gg-ease);
  transition-delay:var(--gg-delay, 0ms);
}
html.gg-motion .hero.gg-hero-in .scale-rail .tick{ opacity:1; transform:none; }

/* sticky-note: aparece con overshoot y se asienta torcida */
html.gg-motion.gg-armed .hero .stamp{ opacity:0; transform:rotate(-3deg) scale(.94) translateY(8px); }
html.gg-motion .hero .stamp{
  transition:opacity .3s var(--gg-ease), transform .6s var(--gg-ease-back);
  transition-delay:var(--gg-delay, 900ms);
}
html.gg-motion .hero.gg-hero-in .stamp{ opacity:.98; transform:rotate(-3deg) scale(1) translateY(0); }

/* flecha de scroll — tres latidos y quieta (nada de bucles lentos infinitos) */
html.gg-motion .hero.gg-hero-in .scroll .arrow{ animation:gg-bob 1.6s var(--gg-ease-io) 1.4s 3; }
@keyframes gg-bob{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(4px) }
}

/* ------------------------------------------------------------
   6 · TICKER — pausa al pasar el ratón
   ------------------------------------------------------------ */
@media (hover:hover) and (pointer:fine){ .ticker:hover .ticker-track{ animation-play-state:paused; } }
html.gg-motion .ticker-track{ will-change:transform; }

/* ------------------------------------------------------------
   7 · PARALLAX — desplazamiento sutil (lo escribe JS en --gg-py)
   ------------------------------------------------------------ */
html.gg-motion .gg-parallax{ will-change:transform; }
html.gg-motion .gg-parallax > :is(img, .ph, .placeholder, .ph-img){
  transform:translate3d(0, var(--gg-py, 0), 0) scale(1.08);
}

/* ------------------------------------------------------------
   8 · COUNT-UP — cifras del archivo (JS escribe el valor)
   ------------------------------------------------------------ */
html.gg-motion .gg-count{ font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------
   9 · CASCADA POR HIJOS — el motor reparte --gg-delay
   (rejillas, listas, specs). Sólo define el estado oculto base.
   ------------------------------------------------------------ */
html.gg-motion.gg-armed .gg-stagger > *{ opacity:0; transform:translateY(22px); }
html.gg-motion .gg-stagger > *{
  transition:opacity var(--gg-dur-settle) var(--gg-ease),
             transform var(--gg-dur-settle) var(--gg-ease);
}
html.gg-motion .gg-stagger.in > *{ opacity:1; transform:none; }

/* ------------------------------------------------------------
   10 · REDUCED MOTION — menos y más suave, no cero:
   sin desplazamientos ni escalas; se conservan fundidos de 200 ms.
   Sólo toca las piezas animadas (no los transforms de maquetación:
   nota girada, miniaturas centradas, firma…).
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html.gg-motion .gg-trazo .gg-line-inner,
  html.gg-motion .gg-rise,
  html.gg-motion .gg-rise-x,
  html.gg-motion .gg-stagger > *,
  html.gg-motion .gg-unveil::after,
  html.gg-motion .gg-rule::before,
  html.gg-motion .gg-unveil :is(img, .placeholder, .ph-img),
  html.gg-motion .hero .scale-rail .tick,
  html.gg-motion .gg-parallax > :is(img, .ph, .placeholder, .ph-img){
    transform:none !important;
    transition:opacity .2s ease !important;
  }
  html.gg-motion .hero .stamp{ transform:rotate(-3deg) !important; transition:opacity .2s ease !important; }
  html.gg-motion .gg-unveil.in::after{ opacity:0; }
  html.gg-motion .gg-unveil::after{ opacity:0; }
  html.gg-motion.gg-armed .gg-unveil:not(.in)::after{ opacity:1; }
  html.gg-motion.gg-armed .gg-rule::before{ opacity:0; }
  html.gg-motion .gg-rule.in::before{ opacity:1; }
  html.gg-motion .ticker-track,
  html.gg-motion .hero .scroll .arrow{ animation:none !important; }
}