/* ===================================================================== landing.css · escenas de la PORTADA (index.html). Pareja de landing.js. Se apoya en la capa común /assets/site-motion.css (tokens --ease-paper y --ease-stamp, @keyframes sm-rise / sm-thump, .sm-thump, foco, presión). PRINCIPIO (el mismo de la capa común) - Todo estado previo (oculto, sin rellenar, sin sellar) vive bajo html.sm-js y dentro de @media screen and (prefers-reduced-motion: no-preference). Sin sm-js (sin JS, JS bloqueado, 'reducir movimiento', imprimir, o si landing.js no arranca en 3 s: ver el ) se ve la portada de siempre. - El estado final de cada escena es el diseño de hoy. Solo se anima opacity y translate/scale/rotate individuales (se SUMAN al transform propio); excepciones pactadas: 4 casillas del hero y el barrido de MegaExpress. - Una sola vez; nada infinito. CLASES QUE PONE landing.js en la raíz de cada escena lm-on estado final (con o sin animación). Quita los estados previos. lm-play la escena se está reproduciendo (activa las animaciones). ===================================================================== */ /* ---------- A2 · El CTA late 3 veces al verse, sin repintar su sombra ---------- */ .btn.primary.pulse{ position: relative; } .btn.primary.pulse::after{ content: ''; position: absolute; inset: -1.5px; border-radius: inherit; box-shadow: 6px 6px 0 var(--ink); opacity: 0; pointer-events: none; } @keyframes lm-pulse{ 50%{ opacity: 1; } } .btn.primary.pulse:is(:hover, :active, :focus-visible)::after{ animation: none; opacity: 0; } html.sm-focus .btn:focus-visible{ outline-offset: 5px; } @media screen and (prefers-reduced-motion: no-preference){ .btn.primary.pulse.pulse-on::after{ animation: lm-pulse 2.6s ease-in-out 3; } .btn.primary.pulse.pulse-on:is(:hover, :active, :focus-visible)::after{ animation: none; } /* ---------- A3 · Hero: el calendario se rellena y sella el sábado 16 ---------- */ html.sm-js .mockup-wrap:not(.lm-on) .cal .day.match:not(.ink), html.sm-js .mockup-wrap:not(.lm-on) .cal .day.best:not(.stamped){ background: var(--card); border-color: var(--ink); color: var(--ink2); box-shadow: none; } html.sm-js .mockup-wrap:not(.lm-on) .cal .day.match:not(.ink)::before, html.sm-js .mockup-wrap:not(.lm-on) .cal .day.best:not(.stamped)::after{ opacity: 0; } html.sm-js .mockup-wrap:not(.lm-on) .mockup-stamp .stamp:not(.sm-thump){ opacity: 0; } html.sm-js .mockup-wrap.lm-play .cal .day.ink{ animation: lm-ink .32s var(--ease-paper) backwards; } html.sm-js .mockup-wrap.lm-play .cal .day.best.stamped{ animation: lm-best .45s var(--ease-stamp) backwards; z-index: 2; } /* ---------- A5 · #problema: el lío de WhatsApp se escribe y se tacha… ---------- */ html.sm-js .chat:not(.lm-on) .msg{ opacity: 0; } html.sm-js .chat.lm-play .msg{ animation: lm-msg .3s var(--ease-paper) calc(var(--i, 0) * 180ms) backwards; } html.sm-js .chat.lm-play .msg.strike{ transition: opacity .25s ease, text-decoration-color .25s ease; } html.sm-js .chat.lm-play .msg.strike:not(.struck){ opacity: 1; text-decoration-color: transparent; } /* …y Cuadrante lo resuelve (esqueleto tenue, nunca un panel vacío) */ html.sm-js .solved:not(.lm-on) .row{ opacity: .15; } html.sm-js .solved:not(.lm-on) .summary{ opacity: 0; } html.sm-js .solved.lm-play .row{ animation: lm-row .28s var(--ease-paper) calc(var(--i, 0) * 110ms) backwards; } html.sm-js .solved.lm-play .summary{ animation: lm-summary .45s var(--ease-stamp) calc(var(--i, 0) * 110ms + 120ms) backwards; } /* ---------- A6 · MegaExpress: barrido menta en 'Sáb 15', sube la barra y cae el sello ---------- */ html.sm-js .mx-phone-wrap:not(.lm-on) .mx-table tr.best{ background: transparent; } html.sm-js .mx-phone-wrap:not(.lm-on) .mx-table tr.best td{ background: linear-gradient(var(--marked), var(--marked)) no-repeat 0 0 / 0% 100%; transition: background-size .3s ease-out calc(var(--i, 0) * 90ms); } html.sm-js .mx-phone-wrap.lm-sweep:not(.lm-on) .mx-table tr.best td{ background-size: 100% 100%; } html.sm-js .mx-phone-wrap:not(.lm-bar):not(.lm-on) .mx-best-row{ translate: 0 100%; } html.sm-js .mx-phone-wrap.lm-bar .mx-best-row{ transition: translate .3s var(--ease-paper); } html.sm-js .mx-phone-wrap:not(.lm-on) .mx-phone-stamp .stamp:not(.sm-thump){ opacity: 0; } /* ---------- A4 + A7 · Precios: tachón dibujado y etiqueta 'Lanzamiento' que golpea ---------- La tarjeta entra repartida como un papel (aparición .reveal de la capa común, con --i/--r de SM.index); mientras anima lleva .sm-play. */ html.sm-js .price-card.sm-play .num.was::after{ animation: lm-strike .3s ease-out calc(.1s + var(--i, 0) * 120ms) backwards; } html.sm-js .price-card.sm-play .price-launch-tag{ animation: sm-thump .45s var(--ease-stamp) calc(.4s + var(--i, 0) * 120ms) backwards; } /* ---------- A+3 · Comparativa: los ✓ de Cuadrante se sellan fila a fila ---------- */ html.sm-js .compare:not(.lm-on) td.us .tick{ opacity: 0; } html.sm-js .compare.lm-play td.us .tick{ animation: lm-tick .35s var(--ease-stamp) calc(.25s + var(--i, 0) * 90ms) backwards; } /* ---------- A8 · FAQ que se despliega como una hoja de papel ---------- */ .faq details{ transition: box-shadow .2s ease, transform .2s ease; } .faq details[open] p{ animation: lm-faq .28s var(--ease-paper); } } /* Reposo de la FAQ abierta: la hoja se levanta un poco (también con 'reducir', sin transición) */ .faq details[open]{ transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); } @supports (interpolate-size: allow-keywords){ @media screen and (prefers-reduced-motion: no-preference){ .faq{ interpolate-size: allow-keywords; } .faq details::details-content{ height: 0; overflow: clip; transition: height .3s var(--ease-paper), content-visibility .3s allow-discrete; } .faq details[open]::details-content{ height: auto; } } } /* La marca del ✓ necesita caja para poder escalar (misma línea, mismo aspecto) */ .compare td.us .tick{ display: inline-block; } /* ---------- Keyframes (sin 'to': terminan en los valores propios del elemento) ---------- */ @keyframes lm-ink{ from{ scale: .86; } } @keyframes lm-best{ 0% { scale: 1.45; rotate: -6deg; box-shadow: 8px 8px 0 var(--gold); } 60% { scale: .94; rotate: 1deg; box-shadow: 0 0 0 var(--gold); } 100%{ scale: 1; rotate: 0deg; box-shadow: 2px 2px 0 var(--gold); } } @keyframes lm-msg{ from{ opacity: 0; translate: 0 10px; scale: .96; } } @keyframes lm-row{ from{ opacity: .15; translate: -10px 0; } } @keyframes lm-summary{ 0% { opacity: 0; scale: 1.25; } 60% { opacity: 1; scale: .97; } 100%{ scale: 1; } } @keyframes lm-strike{ from{ scale: 0 1; } } @keyframes lm-tick{ from{ opacity: 0; scale: 1.6; } } @keyframes lm-faq{ from{ opacity: 0; translate: 0 -6px; } } /* ---------- 'Reducir movimiento' (2.ª red): todo quieto y en su sitio ---------- */ @media (prefers-reduced-motion: reduce){ .btn.primary.pulse::after{ animation: none !important; opacity: 0 !important; } .faq details, .faq details p{ transition: none !important; animation: none !important; } }