/* La barra de redes va en NEGRO también en Nosotros (pedido explícito de Isaías, todas las páginas interiores menos Inicio). Nosotros es la única página que no carga paginas.css (donde vive esta regla para el resto), así que se repite aquí — nosotros-anim.css es el único archivo exclusivo de esta página que ya se carga al final del . */ .social-top{ background:#000 } /* ========================================================================== FUNDACIÓN PUNTO 37 — movimiento propio de la página Nosotros -------------------------------------------------------------------------- Complemento de animaciones.css. Aquí sólo vive lo que necesitan las dos ilustraciones de esta página, ya separadas en capas: · hero: nos-hero-nino + medalla, guante, botín, cronómetro, silbato y un colchón de estelas (arcos, rombos y puntitos) · historia: nos-muneco-naranja + su brazo levantado + nos-muneco-verde Todas las capas de una misma figura salen del .ai recortadas con LA MISMA CAJA. Superpuestas al 100% reconstruyen la ilustración original, así que la alineación está garantizada por construcción: este archivo no la corrige con desplazamientos a ojo, sólo mueve. Se respeta el contrato de animaciones.css sin excepciones: 1. El estado escondido cuelga de html.anim, que pone el script. Sin JavaScript no existe y la ilustración se ve entera y quieta. 2. NUNCA se revela con transiciones. Sólo @keyframes. Y en este archivo ninguna capa baja de opacity:1 en ningún fotograma: aunque una animación no llegara a arrancar, la peor consecuencia posible es que una pieza se quede quieta, jamás que desaparezca. Por eso el vigía de animaciones.js no puede tropezar con nada de aquí. 3. Sólo se animan transform y opacity. 4. Con prefers-reduced-motion todo queda quieto y VISIBLE. 5. Ninguna capa de aquí se arma con una receta de animaciones.js, así que ninguna lleva .rv. Lo único que se engancha al revelado es el crecimiento de los muñecos, y se nombra en los DOS estados —.rv-on mientras entra y .rv-listo cuando el script suelta la animación— con valores idénticos, igual que hacen las rayas del §9 de animaciones.css: al ser los mismos, el navegador no reinicia nada en el relevo. ========================================================================== */ /* ========================================================================== 1. HERO DE NOSOTROS — el niño y sus garabatos ========================================================================== */ /* El escenario. position:relative es lo único que hace falta para que las capas de encima se apilen contra el mismo rectángulo. La capa del niño va en flujo normal y es la que da la altura; las demás flotan sobre ella. */ .p37-nino{ position:relative; line-height:0 } .p37-nino img{ display:block; width:100%; height:auto } /* inset:0 no sirve aquí: al fijar top y bottom con height:auto el navegador estira la imagen hasta el alto del contenedor y deja de respetar su proporción. Anclando sólo arriba e izquierda, cada capa conserva su ratio y cae exactamente sobre la de abajo. */ .p37-nino .cn{ position:absolute; top:0; left:0 } /* Grupo de garabatos espejado a la izquierda del niño (como el .ai). El niño (.cn-nino) queda FUERA de este contenedor, así que no se voltea; solo se mueven los dibujos. Cada .cn de dentro conserva su animación de giro: el scaleX del grupo se compone con el rotate del hijo sin romperlo. */ .p37-nino .cn-espejo{ position:absolute; inset:0; transform:scaleX(-1); pointer-events:none } /* Cada pieza gira alrededor de un punto medido sobre la propia imagen, no inventado: el centro real de su dibujo dentro de la caja común. Si se dejara el 50% 50% de la caja, una pieza pequeña de la esquina describiría un arco enorme al rotar un par de grados. */ .p37-nino .cn-medalla { transform-origin:87% 3% } /* alto de la cinta */ .p37-nino .cn-guante { transform-origin:68.6% 30.4% } .p37-nino .cn-botin { transform-origin:79.9% 29.5% } .p37-nino .cn-cronometro{ transform-origin:57.6% 39.1% } .p37-nino .cn-silbato { transform-origin:69.1% 43.7% } /* --- el niño -------------------------------------------------------------- Recorrido corto y periodo largo. Es la pieza grande de la composición: si se moviera tanto como los garabatos, el hero entero parecería temblar. El balón, la copa y los guayos van fundidos en esta capa porque en el arte original están dibujados ENCIMA de la foto, y debajo de ese trazo no hay foto que recuperar: se mueven con él, que es además como se leen, apoyados en el niño. */ /* El niño va espejado para calzar con el .ai (guayos apuntando a la derecha; en el arte estaba así, en el sitio salía al revés). El scaleX(-1) va en la base y también dentro de los keyframes de la flotación, porque la animación reescribe el transform y sin él perdería el volteo mientras flota. */ .p37-nino .cn-nino{ transform:scaleX(-1) } html.anim .p37-nino .cn-nino{ animation:p37-nino-flota 7.4s ease-in-out infinite; } @keyframes p37-nino-flota{ 0%,100%{ transform:translate3d(0,0,0) scaleX(-1) } 50% { transform:translate3d(0,-6px,0) scaleX(-1) } } /* --- los garabatos -------------------------------------------------------- La profundidad no la da el recorrido sino el DESFASE. Cinco periodos que no son múltiplos entre sí (5,9 · 6,7 · 7,9 · 9,1 · 11,3 s) y arranques negativos distintos: el conjunto tarda minutos en repetir una misma postura, así que nunca se lee como una calcomanía sacudiéndose en bloque. */ html.anim .p37-nino .cn-medalla{ animation:p37-medalla 6.7s ease-in-out infinite; animation-delay:-1.9s; } @keyframes p37-medalla{ /* cuelga de la cinta: se balancea */ 0%,100%{ transform:rotate(-2.6deg) translate3d(0,0,0) } 50% { transform:rotate( 2.2deg) translate3d(0,-5px,0) } } html.anim .p37-nino .cn-guante{ animation:p37-guante 7.9s ease-in-out infinite; animation-delay:-3.4s; } @keyframes p37-guante{ 0%,100%{ transform:translate3d(0,0,0) rotate(0deg) } 50% { transform:translate3d(-5px,-12px,0) rotate(-3.4deg) } } html.anim .p37-nino .cn-botin{ animation:p37-botin 9.1s ease-in-out infinite; animation-delay:-5.2s; } @keyframes p37-botin{ 0%,100%{ transform:translate3d(0,0,0) rotate(0deg) } 50% { transform:translate3d(7px,-9px,0) rotate(4.2deg) } } /* El cronómetro late en vez de flotar: es el único objeto de la tanda que sugiere tiempo, y un pulso corto con pausa larga se lee como un tic-tac sin poner nerviosa la composición. */ html.anim .p37-nino .cn-cronometro{ animation:p37-cronometro 5.9s ease-in-out infinite; animation-delay:-.7s; } @keyframes p37-cronometro{ 0%,62%,100%{ transform:scale(1) translate3d(0,0,0) } 70% { transform:scale(1.085) translate3d(0,-3px,0) } 78% { transform:scale(.985) translate3d(0,-1px,0) } 86% { transform:scale(1.03) translate3d(0,-2px,0) } } html.anim .p37-nino .cn-silbato{ animation:p37-silbato 11.3s ease-in-out infinite; animation-delay:-6.1s; } @keyframes p37-silbato{ 0%,100%{ transform:translate3d(0,0,0) rotate(0deg) } 50% { transform:translate3d(-4px,-8px,0) rotate(-5deg) } } /* Arcos, rombos y puntitos. Van todos juntos en una sola capa a propósito: son el fondo del abanico y su trabajo es respirar detrás de las piezas reconocibles, no competir con ellas. El giro es mínimo porque la capa ocupa casi todo el ancho y en los extremos cualquier grado se convierte en muchos píxeles. */ html.anim .p37-nino .cn-estelas{ transform-origin:55.3% 34.6%; animation:p37-estelas 13.7s ease-in-out infinite; animation-delay:-4.5s; } @keyframes p37-estelas{ 0%,100%{ transform:scale(1) rotate(0deg) translate3d(0,0,0) } 50% { transform:scale(1.018) rotate(.55deg) translate3d(0,-4px,0) } } /* --- la nube que cruza la franja de arriba -------------------------------- Pieza nueva del hero: la misma nube suelta del banco de símbolos que ya usan las esquinas, atravesando la banda superior de lado a lado. Va en z-index 1 para quedar por detrás del titular, que en .hero-nos ocupa el 2. El reposo (sin JavaScript) es left:55%: una nube posada en el cielo del hero, que es una imagen que se sostiene sola. La animación sólo la pone a caminar. .hero-nos ya recorta con overflow:hidden, así que salirse por los lados no ensancha la página ni asoma una barra horizontal. */ .hero-nos .nube-viaje{ position:absolute; top:calc(var(--nav-alto) + 40px); left:55%; width:min(210px,24vw); z-index:1; color:#fff; opacity:.42; pointer-events:none; } .hero-nos .nube-viaje svg{ display:block; width:100%; height:auto } /* El paseo dura 46 s. Más rápido se convierte en el protagonista del hero y roba la atención al titular; más lento se percibe como que la página se quedó pegada. El vaivén vertical de los tramos intermedios es lo que evita que parezca colgada de un raíl. */ html.anim .hero-nos .nube-viaje{ animation:p37-nube-cruza 46s linear infinite; } @keyframes p37-nube-cruza{ 0% { transform:translate3d(calc(-55vw - 260px), 0px,0) } 25% { transform:translate3d(calc(-30vw - 130px), -9px,0) } 50% { transform:translate3d(calc( -5vw), 4px,0) } 75% { transform:translate3d(calc( 20vw + 130px), -6px,0) } 100%{ transform:translate3d(calc( 45vw + 260px), 0px,0) } } /* ========================================================================== 2. HISTORIA — los dos muñequitos ========================================================================== */ /* Dos envoltorios anidados, y no uno, porque hacen dos trabajos distintos sobre la misma propiedad: el de fuera crece UNA vez al entrar en pantalla, el de dentro respira siempre. En una sola caja la segunda animación pisaría a la primera, porque las dos escriben transform. */ .p37-munecos{ position:relative; line-height:0; transform-origin:50% 100% } .p37-munecos-int{ position:relative; display:block; transform-origin:50% 100% } .p37-munecos img{ display:block; width:100%; height:auto } .p37-munecos .cm{ position:absolute; top:0; left:0 } /* El escenario tiene que medir EXACTAMENTE lo que mide la ilustración, no lo que mide la columna. estilo.css centra la imagen de .historia con width:min(100%,380px) + margin-inline:auto; si el escenario ocupara toda la columna, la base quedaría centrada dentro de él y las capas absolutas, ancladas a su izquierda, se irían veinte píxeles a la izquierda. Medido: sin esta regla el brazo y el verde salían con dx = -20,58 px. El 380px es el mismo valor de estilo.css, no uno nuevo. */ .historia figure .p37-munecos{ width:100%; max-width:380px; margin-inline:auto } /* El orden de apilado es el del arte: el brazo levantado por DEBAJO del cuerpo naranja y el verde por encima de los dos. Así, al girar desde el hombro, el arranque del brazo se esconde detrás del cuerpo en vez de asomar por encima, y el brazo sigue pasando por detrás de la cabeza del verde como en el .ai. */ .p37-munecos .cm-brazo { z-index:1 } .p37-munecos .cm-naranja{ position:relative; z-index:2 } .p37-munecos .cm-verde { z-index:3 } /* --- crecimiento al aparecer --------------------------------------------- Se engancha al revelado que animaciones.js hace sobre el
de .historia-grid: así el crecimiento ocurre cuando la sección se ve, y no cuando carga la página estando la sección mucho más abajo. Se nombran los DOS estados con valores idénticos. El script suelta .rv-on y pone .rv-listo en cuanto termina la entrada del
, a los 680ms, y este crecimiento dura 780ms: nombrando sólo .rv-on se cortaría a mitad y la figura pegaría un salto al tamaño final. Con los dos nombres y la misma declaración el navegador no reinicia nada en el relevo y el gesto se completa. Escala desde el suelo (origin 50% 100%) porque los muñecos están de pie sobre su sombra: creciendo desde el centro parecerían despegar. OJO: la opacidad no se toca en ningún fotograma. Del fundido se encarga el .rv del
, que ya tiene su vigía. Y el relleno es both para que durante el retardo se vea el estado inicial —la figura algo más chica pero ENTERA— y al acabar se quede clavado el final, que es el tamaño natural: ni con la animación detenida a mitad puede desaparecer nada. Va sobre .p37-munecos, que no es el mismo elemento que lleva ninguna animación perpetua, así que no hay dos animaciones peleándose por un mismo transform (el caso que documenta el §6 de animaciones.css). */ html.anim .historia figure.rv-on .p37-munecos, html.anim .historia figure.rv-listo .p37-munecos{ animation:p37-crece .72s cubic-bezier(.22,.9,.24,1.02) both; animation-delay:.06s; } @keyframes p37-crece{ 0% { transform:scale(.82) } 62% { transform:scale(1.035) } 100%{ transform:scale(1) } } /* --- respiración continua ------------------------------------------------- El "más carisma" que pidió el cliente. Va en el envoltorio interior, o sea sobre los tres muñecos a la vez: si respirara sólo el cuerpo naranja, el hombro se despegaría del brazo en cada ciclo. Es un ensanche mínimo con apoyo en el suelo, el gesto de alguien que toma aire. */ html.anim .p37-munecos-int{ animation:p37-respira 4.6s ease-in-out infinite; } @keyframes p37-respira{ 0%,100%{ transform:scale(1,1) } 50% { transform:scale(1.022,1.032) translate3d(0,-2px,0) } } /* --- el naranja saluda ---------------------------------------------------- El pivote es el hombro medido sobre la propia capa: 61% 43% de la caja común, justo por debajo del arranque del brazo, de modo que el punto de giro queda tapado por el cuerpo y la articulación nunca se ve. El ciclo tiene pausa: agita un par de veces, con la amplitud cayendo de 9 a 2 grados, y descansa los tres primeros segundos. Un saludo continuo se convierte en ruido de fondo a los diez segundos; con la pausa el ojo lo vuelve a ver cada vez. Medido en el navegador: el recorrido real va de -8,87 a +6,84 grados. */ .p37-munecos .cm-brazo{ transform-origin:61% 43% } html.anim .p37-munecos .cm-brazo{ animation:p37-saluda 5.2s ease-in-out infinite; } @keyframes p37-saluda{ 0%,52%,100%{ transform:rotate(0deg) } 60% { transform:rotate(-9deg) } 68% { transform:rotate(7deg) } 76% { transform:rotate(-8deg) } 84% { transform:rotate(5deg) } 92% { transform:rotate(-2deg) } } /* El verde tiene su propio compás, más lento y desfasado respecto de la respiración del grupo: dos personajes que se mueven exactamente igual se leen como un solo dibujo, no como dos. */ html.anim .p37-munecos .cm-verde{ transform-origin:50% 100%; animation:p37-verde 6.3s ease-in-out infinite; animation-delay:-2.1s; } @keyframes p37-verde{ 0%,100%{ transform:translate3d(0,0,0) rotate(0deg) } 50% { transform:translate3d(0,-5px,0) rotate(-1.4deg) } } /* ========================================================================== 3. MOVIMIENTO REDUCIDO -------------------------------------------------------------------------- Quien lo pide ve la ilustración completa y quieta. Ninguna regla de aquí puede dejar algo en cero: se anulan las animaciones y se limpian los transform, y las capas quedan exactamente donde las dejó el recorte, que es la ilustración original. ========================================================================== */ @media (prefers-reduced-motion:reduce){ html.anim .p37-nino .cn, html.anim .p37-nino img, html.anim .hero-nos .nube-viaje, html.anim .p37-munecos, html.anim .p37-munecos-int, html.anim .p37-munecos .cm, html.anim .historia figure.rv-on .p37-munecos, html.anim .historia figure.rv-listo .p37-munecos{ animation:none !important; transform:none !important; opacity:1 !important; } /* La nube de paseo sí conserva su transparencia de adorno: es su color de reposo, no un estado de animación a medias. */ html.anim .hero-nos .nube-viaje{ opacity:.42 !important } }