/* ============================================================ 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 , así que jamás se oculta nada y no hay transform. Autor: Antonio Díaz · antoniodiaz.pro · nexopress.com ============================================================ */ :root{ --gg-ease: cubic-bezier(.16, 1, .3, 1); /* asiento suave */ --gg-ease-trazo:cubic-bezier(.22, 1, .36, 1); /* pincelada */ --gg-ease-back: cubic-bezier(.34, 1.56, .64, 1);/* overshoot sticky-note */ --gg-dur-reveal: .9s; --gg-dur-settle: .72s; --gg-dur-rule: .8s; } /* Mientras el motor mide posiciones, evitamos un parpadeo: ocultamos lo animable sólo cuando */ /* ------------------------------------------------------------ 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:.04em; /* deja respirar descendentes */ } 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) 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) 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) 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(1); transition:transform var(--gg-dur-reveal) var(--gg-ease-trazo); transition-delay:var(--gg-delay, 0ms); pointer-events:none; } 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(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(0); transform-origin:left center; transition:transform var(--gg-dur-rule) var(--gg-ease); transition-delay:var(--gg-delay, 0ms); } 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 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(.82) translateY(10px); } html.gg-motion .hero .stamp{ transition:opacity .5s ease, transform .7s 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 — latido continuo una vez entrado el hero */ html.gg-motion .hero.gg-hero-in .scroll .arrow{ animation:gg-bob 1.8s var(--gg-ease) infinite; } @keyframes gg-bob{ 0%,100%{ transform:translateY(0) } 50% { transform:translateY(4px) } } /* ------------------------------------------------------------ 6 · TICKER — pausa al pasar el ratón ------------------------------------------------------------ */ .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) ease, transform var(--gg-dur-settle) var(--gg-ease); } html.gg-motion .gg-stagger.in > *{ opacity:1; transform:none; } /* ------------------------------------------------------------ 10 · SEGURIDAD: prefers-reduced-motion → nada se mueve (doble candado además del guard de JS) ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ html.gg-motion *, html.gg-motion *::before, html.gg-motion *::after{ animation:none !important; transition:none !important; transform:none !important; opacity:1 !important; } }