/* ===================================================================== Grupo Perera · movimiento Reglas de la casa (skill artemovil-movimiento): - Nada queda oculto sin JavaScript: todo estado inicial oculto va detrás de la clase .js, que pone el y retira efectos.js si no llega a arrancar (red de seguridad a los 3 s). - Solo transform, opacity, clip-path y stroke-dashoffset. - Con prefers-reduced-motion: reduce, todo se ve en su estado final. ===================================================================== */ /* ---------- 1. Revelado al entrar en pantalla (revelado-scroll + stagger) ---------- */ @media (prefers-reduced-motion:no-preference){ .js .reveal:not(.is-in){opacity:0;transform:translateY(18px)} .js .reveal{transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)} } /* ---------- 2. Recorte progresivo de imagen (catálogo: recorte-imagen) ---------- Origen: Etiquetas Extremadura, css/main.css, .sector__media img. Solo en imágenes editoriales de páginas interiores, nunca en la cabecera de inicio ni en la imagen de la cabecera de página. */ @media (prefers-reduced-motion:no-preference){ .js .recorte img{clip-path:inset(0 100% 0 0);transform:scale(1.04);transition:clip-path .8s var(--ease-out),transform .8s var(--ease-out)} .js .reveal.is-in .recorte img,.js .recorte.is-in img{clip-path:inset(0 0 0 0);transform:scale(1)} } /* ---------- 3. Cabecera de inicio: circunferencias y líneas ---------- Nada del contenido se oculta ni se desplaza: el

, el lema, los botones y la foto se pintan en el primer fotograma (LCP intacto). Se mueve solo: a) pase de 4 fotografías (7 s, fundido 1,4 s) con Ken Burns en la activa; las pares hacen el recorrido inverso (catálogo: ken-burns); b) la capa .portada__hud: circunferencias que se trazan y se borran (14 s), anillos punteados que giran (40 s y 56 s), nodos que laten y el sello «Desde 1972» con anillo punteado que gira (30 s) y brillo sobre el año; c) el lema, con una pasada de destello claro (catálogo: titulo-destello). Solo transform, opacity y stroke-dashoffset. Con movimiento reducido todo queda dibujado y quieto. */ @media (prefers-reduced-motion:no-preference){ /* mv-ok: A8 — transform sobre la imagen ya pintada: no retrasa el LCP (ficha ken-burns, veredicto Conservar) */ .portada__foto.is-on picture{animation:kb-portada 12s ease-out both} .portada__foto:nth-child(even).is-on picture{animation-name:kb-portada-alt} .js .pase__nums button[aria-selected="true"] .pase__barra{animation:pase-avance var(--d-slide,7s) linear both} .js .pase__nums button[aria-selected="true"] span{animation:pase-relleno var(--d-slide,7s) linear both} .pase--pausa .pase__nums button[aria-selected="true"] .pase__barra,.pase--pausa .pase__nums button[aria-selected="true"] span, .pase--detenido .pase__nums button[aria-selected="true"] .pase__barra,.pase--detenido .pase__nums button[aria-selected="true"] span, .pase--detenido .portada__foto.is-on picture{animation-play-state:paused} .pase--manual .pase__nums button[aria-selected="true"] .pase__barra,.pase--manual .pase__nums button[aria-selected="true"] span{animation:none} .hud__traza{stroke-dasharray:100;animation:hud-traza 14s cubic-bezier(.5,0,.5,1) infinite} .hud__traza--b{animation-delay:-5s} .hud__punt{animation:hud-giro 40s linear infinite} .hud__punt--b{animation-duration:56s;animation-direction:reverse} .hud__circ .hud__nodo{animation:hud-nodo 4.6s ease-in-out infinite} .hud__circ .hud__nodo--b{animation-delay:-1.5s}.hud__circ .hud__nodo--c{animation-delay:-3s} .hud__desde-anillo{animation:hud-giro 30s linear infinite} .hud__desde-txt strong{animation:desde-brillo 7s ease-in-out 1.5s infinite} .hud__esq{animation:hud-esq 6s ease-in-out infinite} .hud__esq--2,.hud__esq--3{animation-delay:-3s} } @keyframes kb-portada{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.10) translate3d(-1%,-.8%,0)}} @keyframes kb-portada-alt{from{transform:scale(1.10) translate3d(.9%,-.7%,0)}to{transform:scale(1.03) translate3d(0,0,0)}} @keyframes pase-avance{from{transform:scaleY(0)}to{transform:scaleY(1)}} /* mv-ok: A3 — background-position en el texto de un número de 3 cifras: pintado mínimo, sincronizado con la barra */ @keyframes pase-relleno{from{background-position:0 100%}to{background-position:0 0}} @media (max-width:767px){@keyframes pase-avance{from{transform:scaleX(0)}to{transform:scaleX(1)}}} @keyframes hud-traza{0%{stroke-dashoffset:100}42%,58%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}} @keyframes hud-giro{to{transform:rotate(360deg)}} /* mv-ok: A3 — background-position en el texto de un año (4 cifras): pintado mínimo */ @keyframes desde-brillo{0%,65%{background-position:100% 0}100%{background-position:0 0}} @keyframes hud-nodo{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.3)}} @keyframes hud-esq{0%,100%{opacity:.45}50%{opacity:1}} /* Destello claro para el lema sobre la foto (efectos.js pone y retira .is-destello, ≥ 900 px) */ .destello--claro.is-destello{background-image:linear-gradient(105deg,var(--lavanda) 0%,var(--lavanda) 40%,#fff 46%,hsl(200 100% 82%) 50%,#fff 54%,var(--lavanda) 60%,var(--lavanda) 100%);animation-delay:1.2s;animation-duration:2.2s} /* ---------- 4. Línea de cota del proceso (catálogo: linea-cota-proceso) ---------- Origen: Carpintería Valor, assets/css/styles.css, .proceso__flujo. Sin JS la línea se ve dibujada entera. */ @media (prefers-reduced-motion:no-preference){ .js .proceso .pr-trazo{stroke-dashoffset:100} .proceso.is-on .pr-trazo{transition:stroke-dashoffset 2.4s linear .3s;stroke-dashoffset:0} .proceso.is-on .proceso__cursor i{animation:pr-cursor 2.4s linear .3s both} } @keyframes pr-cursor{ 0%{opacity:0;transform:translateX(0)} 6%{opacity:1} 94%{opacity:1;transform:translateX(100%)} 100%{opacity:0;transform:translateX(100%)} } /* ---------- 4b. Marco de plano que se dibuja (bloque de presentación) ---------- Estados ocultos solo con .js y sin movimiento reducido: sin JS se ve completo. */ @media (prefers-reduced-motion:no-preference){ .js .presenta__marco:not(.is-in) .presenta__trazo--izq, .js .presenta__marco:not(.is-in) .presenta__trazo--der{clip-path:inset(0 0 100% 0)} .js .presenta__marco:not(.is-in) .presenta__trazo--inf{clip-path:inset(0 100% 0 0)} .js .presenta__marco:not(.is-in) .presenta__trazo--sup{clip-path:inset(0 0 0 100%)} .js .presenta__marco:not(.is-in) .presenta__nodo{opacity:0;scale:.2} .js .presenta__trazo{transition:clip-path .7s var(--ease-out)} .js .presenta__trazo--izq,.js .presenta__trazo--sup{transition-delay:.25s} .js .presenta__trazo--inf,.js .presenta__trazo--der{transition-delay:.95s} .js .presenta__nodo{transition:opacity .3s ease .9s,scale .5s cubic-bezier(.34,1.5,.64,1) .9s} .presenta__marco.is-in .presenta__nodo{animation:latido 1.6s ease-out 1.5s 2} } @keyframes latido{0%{box-shadow:0 0 0 0 hsl(229 59% 41% / .45)}100%{box-shadow:0 0 0 16px hsl(229 59% 41% / 0)}} /* ---------- 4c. Destello del titular (catálogo: titulo-destello, Artemovil 2026) ---------- Una sola pasada. La clase la pone y la retira efectos.js (≥ 900 px). */ .is-destello{-webkit-text-fill-color:transparent;color:transparent;-webkit-background-clip:text;background-clip:text; background-image:linear-gradient(105deg,var(--azul-900) 0%,var(--azul-900) 41%,hsl(200 90% 60%) 47%,hsl(219 90% 70%) 50%,var(--azul-700) 53%,var(--azul-900) 59%,var(--azul-900) 100%); background-repeat:no-repeat;background-size:300% 100%;background-position:100% 0;animation:destello 2.6s linear .6s both} @keyframes destello{from{background-position:100% 0}to{background-position:0% 0}} /* ---------- 4d. Rombos del proceso: se encienden al paso del cursor de la cota ---------- Retardos (--rp-t) sincronizados con el recorrido del cursor (2,4 s desde 0,3 s). En móvil (sin línea) entran en cascada corta. */ @media (prefers-reduced-motion:no-preference){ .js .proceso .paso__nodo::before{transition:opacity .45s ease var(--rp-d),transform .8s cubic-bezier(.2,.9,.25,1.15) var(--rp-d),box-shadow var(--t) var(--ease)} .js .proceso .paso__nodo::after{transition:opacity .6s ease calc(var(--rp-d) + .25s),translate .6s var(--ease-out) calc(var(--rp-d) + .25s)} .js .proceso .paso__icono{transition:opacity .4s ease calc(var(--rp-d) + .2s),transform .5s var(--ease-out) calc(var(--rp-d) + .2s)} .js .proceso .paso__num{transition:opacity .3s ease calc(var(--rp-d) + .3s),transform .5s cubic-bezier(.34,1.6,.64,1) calc(var(--rp-d) + .3s)} .js .proceso .paso__flecha{transition:opacity .4s ease calc(var(--rp-d) + .45s),transform .5s var(--ease-out) calc(var(--rp-d) + .45s)} .js .proceso .paso h3,.js .proceso .paso p{transition:opacity .5s ease calc(var(--rp-d) + .35s),transform .5s var(--ease-out) calc(var(--rp-d) + .35s)} .js .proceso:not(.is-on) .paso__nodo::before{opacity:0;transform:rotate(-45deg) scale(.4)} .js .proceso:not(.is-on) .paso__nodo::after{opacity:0;translate:-9px -9px} .js .proceso:not(.is-on) .paso__icono{opacity:0;transform:scale(.5)} .js .proceso:not(.is-on) .paso__num{opacity:0;transform:translate(-50%,-50%) scale(.3)} .js .proceso:not(.is-on) .paso__flecha{opacity:0;transform:translate(-14px,-50%)} .js .proceso:not(.is-on) .paso h3,.js .proceso:not(.is-on) .paso p{opacity:0;transform:translateY(10px)} .proceso.is-on .paso__nodo{animation:rombo-halo 1s ease-out calc(var(--rp-d) + .5s) 1} .pasos--rombos .paso{--rp-d:calc(var(--i-paso,0) * .15s)} .pasos--rombos .paso:nth-child(2){--i-paso:1}.pasos--rombos .paso:nth-child(3){--i-paso:2}.pasos--rombos .paso:nth-child(4){--i-paso:3} } @media (min-width:992px) and (prefers-reduced-motion:no-preference){ .pasos--rombos .paso{--rp-d:var(--rp-t)} } @keyframes rombo-halo{0%{filter:drop-shadow(0 0 0 hsl(200 90% 55% / 0))}40%{filter:drop-shadow(0 0 18px hsl(200 90% 55% / .75))}100%{filter:drop-shadow(0 0 0 hsl(200 90% 55% / 0))}} /* ---------- 4e. Eslóganes unidos por un hilo ---------- El hilo se dibuja de arriba abajo, una chispa lo recorre y cada eslogan se enciende al paso (0,5 s + n × 0,55 s). Sin JS o con movimiento reducido: todo encendido. */ @media (prefers-reduced-motion:no-preference){ .js .lemas:not(.is-in) .lemas__trazo{stroke-dashoffset:100} .lemas.is-in .lemas__trazo{transition:stroke-dashoffset 2s linear .4s} .lemas.is-in .lemas__chispa{animation:chispa 2s linear .4s both} .js .lemas:not(.is-in) .lema strong,.js .lemas:not(.is-in) .lema__txt{opacity:.25;transform:translateX(-8px)} .js .lemas:not(.is-in) .lema__nodo{transform:scale(.35);background:hsl(229 40% 30%);border-color:hsl(0 0% 100% / .25)} .js .lema strong,.js .lema__txt{transition:opacity .5s ease calc(.45s + var(--n) * .55s),transform .6s var(--ease-out) calc(.45s + var(--n) * .55s)} .js .lema__nodo{transition:transform .55s cubic-bezier(.34,1.7,.64,1) calc(.4s + var(--n) * .55s),background-color .3s ease calc(.4s + var(--n) * .55s),border-color .3s ease calc(.4s + var(--n) * .55s)} .lemas.is-in .lema__nodo{animation:latido-claro 1.1s ease-out calc(.45s + var(--n) * .55s) 1} } @keyframes chispa{0%{opacity:0;top:14px}8%{opacity:1}92%{opacity:1;top:calc(100% - 14px)}100%{opacity:0;top:calc(100% - 14px)}} @keyframes latido-claro{0%{box-shadow:0 0 0 0 hsl(200 90% 60% / .7)}100%{box-shadow:0 0 0 14px hsl(200 90% 60% / 0)}} /* ---------- 4f. Oficios en rombos ---------- Al entrar en pantalla (efectos.js pone .is-in): el rombo central se abre desde su centro, los ocho rombos salen de él hasta su sitio (60 ms entre uno y otro), aparecen los rótulos y una chispa recorre el borde interior del rombo central cada 7 s. Sin JS o con movimiento reducido: todo en su sitio. */ @media (prefers-reduced-motion:no-preference){ .js .rombos__centro{transition:clip-path .8s var(--ease-out)} .js .rombos__centro-in{transition:opacity .5s ease .45s,transform .6s var(--ease-out) .45s} .js .rombos__centro h3::before,.js .rombos__centro h3::after{transition:transform .6s var(--ease-out) .75s} .js .rombo{transition:transform .8s cubic-bezier(.2,.9,.25,1.12) calc(.3s + var(--k) * 60ms),opacity .35s ease calc(.3s + var(--k) * 60ms)} .js .rombo span{transition:opacity .4s ease calc(.85s + var(--k) * 60ms),transform .5s var(--ease-out) calc(.85s + var(--k) * 60ms)} .js .rombos__deco,.js .rombos__linea{transition:opacity .6s ease 1.1s} .js .rombos:not(.is-in) .rombos__centro{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)} .js .rombos:not(.is-in) .rombos__centro-in{opacity:0;transform:scale(.9)} .js .rombos:not(.is-in) .rombos__centro h3::before,.js .rombos:not(.is-in) .rombos__centro h3::after{transform:scaleX(0)} .js .rombos:not(.is-in) .rombo{opacity:0;transform:translate(calc((var(--cx0) - var(--x)) * var(--D)),calc((var(--cy0) - var(--y)) * var(--D))) scale(.35)} .js .rombos:not(.is-in) .rombo span{opacity:0;transform:translateY(8px)} .js .rombos:not(.is-in) .rombos__deco,.js .rombos:not(.is-in) .rombos__linea{opacity:0} .rombos.is-in .rombos__chispa{animation:rombo-chispa 7s linear 1.6s infinite} } @keyframes rombo-chispa{0%{opacity:1;stroke-dasharray:14 86;stroke-dashoffset:0}40%{opacity:1;stroke-dasharray:14 86;stroke-dashoffset:-100}41%,100%{opacity:0;stroke-dasharray:14 86;stroke-dashoffset:-100}} /* ---------- 4g. Presentación: entrada escalonada, marcador y botón ---------- Al entrar (.is-in): título, texto y botón suben en cascada tras el marco; el marcador celeste se pinta palabra a palabra; el botón entra con rebote. En reposo: aro que gira (5 s), brillo que cruza cada 6 s y halo que late. */ @media (prefers-reduced-motion:no-preference){ .js .presenta__marco:not(.is-in) h2,.js .presenta__marco:not(.is-in) p{opacity:0;transform:translateY(14px)} .js .presenta__marco h2,.js .presenta__marco p{transition:opacity .6s ease,transform .7s var(--ease-out)} .js .presenta__marco h2{transition-delay:.35s}.js .presenta__marco .lead{transition-delay:.55s}.js .presenta__marco .presenta__quien{transition-delay:.75s} /* mv-ok: A3 — background-size en un subrayado decorativo de una sola pasada, sin reflujo */ .js .presenta__marco:not(.is-in) .subraya{background-size:0% .42em} .js .subraya{transition:background-size .7s var(--ease-out) calc(1.1s + var(--n,0) * .18s)} .js .presenta__marco:not(.is-in) .btn-estrella{opacity:0;transform:translateY(18px) scale(.85)} .js .presenta__marco .btn-estrella{transition:opacity .5s ease 1s,transform .8s cubic-bezier(.34,1.56,.64,1) 1s,box-shadow .4s var(--ease-out)} .js .presenta__marco.is-in .btn-estrella:hover{transition-delay:0s} .btn-estrella::before{animation:btn-giro 5s linear infinite} .btn-estrella__brillo::before{animation:btn-brillo 6s ease-in-out 2.2s infinite} .presenta__marco.is-in .btn-estrella{animation:btn-halo 3.2s ease-out 2s infinite} .btn-estrella:hover .btn-estrella__brillo::before{animation-duration:1.4s;animation-delay:0s} .presenta__marco.is-in .btn-estrella:hover,.presenta__marco.is-in .btn-estrella:focus-visible{animation:none} } @keyframes btn-giro{to{rotate:360deg}} @keyframes btn-brillo{0%,62%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}} @keyframes btn-halo{0%{box-shadow:0 14px 32px -14px hsl(229 75% 24% / .75),0 0 0 0 hsl(200 95% 60% / .5)}70%,100%{box-shadow:0 14px 32px -14px hsl(229 75% 24% / .75),0 0 0 16px hsl(200 95% 60% / 0)}} /* ---------- 4h. ¿A qué nos dedicamos?: raya del título y sombras ---------- La raya bajo el título se dibuja al entrar. Al pasar el ratón, las tarjetas responden sin el retardo del revelado. */ @media (prefers-reduced-motion:no-preference){ .js .dedica__cabeza:not(.is-in) .dedica__raya{transform:scaleX(0)} .js .dedica__raya{transition:transform .8s var(--ease-out) .35s} .js .dedica__tarjeta.reveal{transition:opacity var(--t-slow) var(--ease-out) calc(var(--i,0) * 90ms),transform var(--t-slow) var(--ease-out) calc(var(--i,0) * 90ms),box-shadow .3s var(--ease-out)} .js .dedica__tarjeta.reveal.is-in:hover,.js .dedica__tarjeta.reveal.is-in:focus-visible,.js .dedica__tarjeta.reveal.is-in:active{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)} } /* ---------- 5. Movimiento reducido: estado final, sin recorrido ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .reveal{opacity:1 !important;transform:none !important} .recorte img{clip-path:none !important;transform:none !important} .pr-trazo{stroke-dashoffset:0 !important} .proceso__cursor{display:none} .lemas__chispa{display:none} .lemas__trazo{stroke-dashoffset:0 !important} .hud__traza{stroke-dashoffset:0 !important} .is-destello{animation:none !important;-webkit-text-fill-color:currentColor;color:inherit;background:none} }