/* ============================================================ MYBEYOGA — animaciones de entrada Portadas de la referencia SparkCMS (:8162); valores medidos en navegador real con getComputedStyle (ver commit message / inc/motion.php para el porqué de estos números concretos). Progressive enhancement: todo lo de aquí solo oculta contenido bajo html.mby-motion (clase añadida por un script inline en el , antes de pintar — ver inc/motion.php). Sin esa clase (JS bloqueado o falla) el contenido es visible desde el primer render; el hero ni siquiera necesita la clase, son keyframes CSS puros que siempre acaban visibles solos. Solo transform + opacity (+ filter:blur en el eyebrow) — cero CLS. ============================================================ */ @keyframes mby-hero-fade-up { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes mby-hero-scale { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } } @keyframes mby-hero-blur { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } } @keyframes mby-ken-burns { from { transform: scale(1.12); } to { transform: scale(1); } } /* ---- 1) HERO on-load — se dispara solo, sin depender de scroll ni de JS (animation con fill-mode "both": empieza oculto y termina visible por su propia cuenta aunque motion.js no llegue a correr). ------------------- */ .yg-hero .yg-eyebrow, .yg-phero .yg-eyebrow { animation: mby-hero-blur 1.4s ease-out .1s both; } .yg-hero .yg-hero__title, .yg-phero .yg-phero__title { animation: mby-hero-fade-up 1.2s cubic-bezier(.22,1,.36,1) both; } .yg-hero .yg-hero__quote, .yg-phero .yg-phero__intro { animation: mby-hero-fade-up 1.2s cubic-bezier(.22,1,.36,1) .35s both; } .yg-hero .yg-hero__cta { animation: mby-hero-scale 1.2s cubic-bezier(.22,1,.36,1) .7s both; } .yg-hero .yg-hero__lede p { animation: mby-hero-fade-up 1.2s cubic-bezier(.22,1,.36,1) .5s both; } .yg-hero .yg-hero__media img, .yg-phero .yg-phero__figure img { animation: mby-ken-burns 3.2s cubic-bezier(.22,1,.36,1) both; } /* ---- 2) SCROLL REVEAL para el resto del contenido --------------------- */ /* Marcado por motion.js (mby-reveal) tras localizar h1-h4/p/blockquote/ imágenes/botones/listas dentro de cada sección; las parrillas de horarios y tarifas se marcan como un único bloque (ver motion.js), nunca fila a fila, para que entren de una pieza. */ html.mby-motion .mby-reveal { opacity: 0; transform: translateY(80px); transition: opacity 1.8s cubic-bezier(.22,1,.36,1), transform 1.8s cubic-bezier(.22,1,.36,1); transition-delay: var(--mby-delay, 0ms); will-change: opacity, transform; } /* Especificidad > la regla que oculta (2 clases) para que revelar gane siempre, pase lo que pase con el orden de las hojas de estilo. */ html.mby-motion section.in-view .mby-reveal, html.mby-motion .in-view.mby-reveal { opacity: 1; transform: translateY(0); } /* ---- 3) Accesibilidad --------------------------------------------------- "Pausar animaciones y movimiento" del panel (data-a11y-motion="1") y prefers-reduced-motion: nada se mueve y todo es visible de entrada. */ html[data-a11y-motion="1"] .yg-hero .yg-eyebrow, html[data-a11y-motion="1"] .yg-phero .yg-eyebrow, html[data-a11y-motion="1"] .yg-hero .yg-hero__title, html[data-a11y-motion="1"] .yg-phero .yg-phero__title, html[data-a11y-motion="1"] .yg-hero .yg-hero__quote, html[data-a11y-motion="1"] .yg-phero .yg-phero__intro, html[data-a11y-motion="1"] .yg-hero .yg-hero__cta, html[data-a11y-motion="1"] .yg-hero .yg-hero__lede p, html[data-a11y-motion="1"] .yg-hero .yg-hero__media img, html[data-a11y-motion="1"] .yg-phero .yg-phero__figure img, html[data-a11y-motion="1"] .mby-reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } @media (prefers-reduced-motion: reduce) { .yg-hero .yg-eyebrow, .yg-phero .yg-eyebrow, .yg-hero .yg-hero__title, .yg-phero .yg-phero__title, .yg-hero .yg-hero__quote, .yg-phero .yg-phero__intro, .yg-hero .yg-hero__cta, .yg-hero .yg-hero__lede p, .yg-hero .yg-hero__media img, .yg-phero .yg-phero__figure img, .mby-reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } }