/* ========================================================================= Escultoriam — hero: diorama por capas (escena estática) Mobile-first. Las capas se colocan con --w (ancho) y --b (borde inferior), ambos relativos al hero. Ningún script toca estas capas. ========================================================================= */ .hero { position: relative; display: flex; flex-direction: column; min-height: 100svh; isolation: isolate; overflow: clip; } /* ---------------------------------------------------------------- escena */ .hero__scene { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, #0a1f3a 0%, #102e55 40%, #0b1524 100%); pointer-events: none; } .hero__layer { position: absolute; inset: 0; } /* La entrada es 100% CSS y se dispara desde el : si el módulo JS falla o tarda, la escena se monta igual. Nunca depende del script. El ritmo se gobierna con `--enter-scale` (tokens.css), que escala a la vez la duración y el desfase, así que la coreografía no se descompasa. */ .hero-enter .hero__layer { animation: layer-in calc(var(--dur-scene) * var(--enter-scale)) var(--ease-out) calc(var(--d, 0ms) * var(--enter-scale)) both; } @keyframes layer-in { from { opacity: 0; scale: 1.05; } to { opacity: 1; scale: 1; } } /* La misma entrada sin el `scale`, para dispositivos táctiles. Ver el bloque de presupuesto al final del archivo. */ @keyframes layer-fade { from { opacity: 0; } to { opacity: 1; } } .hero__layer > img { position: absolute; bottom: var(--b, 0); left: calc(50% + var(--x, 0%)); width: var(--w, 100%); max-width: none; translate: -50% 0; } .hero__layer--sky img { inset: -8%; width: 116%; height: 116%; object-fit: cover; object-position: 50% var(--sky-y, 34%); translate: none; } /* Encuadre de cada capa y su turno en la entrada */ .hero__layer--sky { --d: 0ms; } .hero__layer--castle { --w: 135%; --b: 10%; --d: 90ms; } .hero__layer--arch { --w: 195%; --b: 4%; --d: 180ms; } .hero__layer--lions { --w: 260%; --b: -10%; --d: 270ms; } /* Encuadre heredado del personaje anterior. No son los mismos números: aquel master era un recorte de medio cuerpo (1024×1536) y este es la figura entera (551×884), así que los valores se despejaron midiendo la figura en pantalla —ancho de hombros y altura de la cabeza— para reproducirla igual. `--w` sale casi idéntico (la proporción hombros/lienzo apenas cambia) y `--b` baja unos 5 puntos más, que es lo que ocupan las piernas de más en el lienzo. Las piernas quedan por debajo del borde del hero: ese corte es lo que asienta la figura. Si se le vieran los pies sobre el suelo de la escena, que está en otra perspectiva, parecería flotar. */ .hero__layer--knight { --w: 91%; --b: -23%; --d: 360ms; } /* ------------------------------------------------- el personaje: luz y aliento */ /* DOS cajas con el encuadre de la figura y su proporción exacta: `.hero__glow` para la luz y `.hero__knight` para el personaje. Posicionar la luz en % de esta caja es lo que la hace seguir al personaje en los siete encuadres; antes se calculaba desde el borde inferior de la imagen, que con las piernas recortadas cae fuera de la pantalla, y la aureola acababa 252 px por debajo del hero. Están separadas porque la luz lleva `mix-blend-mode` y la figura se mueve, y eso no puede convivir en el mismo elemento: una capa mezclada necesita leer lo que tiene detrás, así que mientras estuvo DENTRO de la caja que respira, cada latido obligaba a repintar y volver a mezclar en vez de componerse aparte. Con la luz fuera —y quieta en su sitio— la figura es lo único que se transforma y su aliento se compone solo. Regla: lo que se mezcla no se mueve, y lo que se mueve no lleva nada mezclado dentro. */ .hero__knight, .hero__glow { position: absolute; bottom: var(--b, 0); left: calc(50% + var(--x, 0%)); width: var(--w, 100%); aspect-ratio: 551 / 884; /* `--axis` corrige que la figura no esté centrada en su propio lienzo, y va en el `translate` porque ahí el porcentaje es del ancho de la CAJA: un mismo número vale para los siete encuadres, sin repetirlo por breakpoint. Medido sobre `knight-551.webp`: el eje de la cabeza cae en x=233 y el del torso en x=239, contra un centro de lienzo en 275.5 —el capote y la espada se van a la izquierda y llenan el resto—, así que la corrección completa sería del 7 %. Ver el bloque de encuadre alto. */ translate: calc(-50% + var(--axis, 0%)) 0; } /* Dos animaciones a la vez, con ciclos primos entre sí para que no se note el bucle: `knight-breathe` escala un 0.6 % desde los pies —el pecho sube, las botas no se mueven— y `knight-shift` bascula 0.35° sobre el mismo eje, como alguien de pie quieto. Ninguna desplaza la figura: levitar era el problema. Van en propiedades sueltas (`scale`, `rotate`) y no en `transform`, que es lo que permite que sean dos y que el `translate` del encuadre siga en pie. */ .hero__knight { transform-origin: 50% 100%; animation: knight-breathe 7s var(--ease-inout) infinite, knight-shift 11s var(--ease-inout) infinite; } .hero__knight img { position: absolute; inset: 0; width: 100%; height: 100%; /* El `drop-shadow` recorta la silueta real: es el filo de luz que separa al personaje del arco. Estático a propósito, se calcula una sola vez. */ filter: drop-shadow(0 0 2px rgb(255 232 182 / 0.62)) drop-shadow(0 0 14px rgb(214 168 84 / 0.5)) drop-shadow(0 0 40px rgb(201 154 69 / 0.3)) drop-shadow(0 18px 34px rgb(6 14 28 / 0.55)); } @keyframes knight-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.006; } } @keyframes knight-shift { 0%, 100% { rotate: -0.35deg; } 50% { rotate: 0.35deg; } } /* Aureola cálida detrás del torso y la cabeza, que es donde tiene que verse. */ .hero__knight-halo { position: absolute; top: -6%; left: 50%; width: 104%; aspect-ratio: 1; translate: -50% 0; background: radial-gradient( closest-side, rgb(214 168 84 / 0.3), rgb(190 138 66 / 0.14) 44%, rgb(140 96 48 / 0.05) 62%, transparent 74% ); mix-blend-mode: screen; animation: knight-aura 9s var(--ease-inout) infinite; pointer-events: none; } @keyframes knight-aura { 0%, 100% { opacity: 0.55; scale: 0.98; } 50% { opacity: 1; scale: 1.04; } } /* Haces de luz detrás de la figura: una rueda de cuñas doradas girando muy despacio, desvanecida por los bordes. A 2 minutos por vuelta no se lee como algo que gira, sino como luz que cambia. */ .hero__knight-rays { position: absolute; top: -16%; left: 50%; width: 152%; aspect-ratio: 1; translate: -50% 0; background: repeating-conic-gradient( from 0deg, rgb(201 154 69 / 0.13) 0deg 5deg, transparent 5deg 23deg ); mask-image: radial-gradient(closest-side, rgb(0 0 0 / 0.95) 18%, transparent 68%); mix-blend-mode: screen; animation: knight-rays 120s linear infinite; pointer-events: none; } @keyframes knight-rays { to { rotate: 360deg; } } /* ---------------------------------------------------------------- atmósfera */ .hero__grade { position: absolute; inset: 0; pointer-events: none; } /* Velo azul Leonhart: noche noble arriba, oro conservado en el horizonte. */ .hero__grade--sky { background: linear-gradient( to bottom, rgb(16 46 85 / 0.82) 0%, rgb(16 46 85 / 0.43) 28%, rgb(24 40 62 / 0.09) 50%, rgb(23 19 17 / 0.24) 74%, rgb(12 12 14 / 0.59) 100% ); } /* Niebla que separa el castillo del arco. */ .hero__grade--fog { background: linear-gradient( to bottom, rgb(231 207 164 / 0) 40%, rgb(222 200 172 / 0.2) 58%, rgb(200 175 150 / 0.08) 78%, rgb(23 19 17 / 0) 100% ); } /* Viñeta + velo de lectura. En móvil el texto va arriba: el velo va arriba. */ .hero__grade--base { background: linear-gradient( to bottom, rgb(10 22 42 / 0.88) 0%, rgb(10 22 42 / 0.66) 32%, rgb(10 22 42 / 0.24) 52%, rgb(10 22 42 / 0) 68% ), radial-gradient(125% 95% at 50% 52%, rgb(9 20 38 / 0) 44%, rgb(9 20 38 / 0.5) 100%), linear-gradient(to bottom, rgb(11 24 44 / 0) 64%, rgb(6 16 32 / 0.92) 100%); } /* ---------------------------------------------------------------- contenido */ .hero__inner { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; align-items: center; padding-block: calc(var(--nav-h) + 4vh) var(--s-6); text-align: center; } /* Dato comercial en texto muy pequeño sobre arte de alto contraste: el color por sí solo no basta. En vez de una caja, un filete dorado a cada lado —el mismo lenguaje que los separadores de la navegación— y sombra propia. */ .hero__eyebrow { display: flex; align-items: center; gap: 0.9em; margin-bottom: var(--s-4); color: var(--parchment); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-shadow: 0 1px 2px rgb(6 14 28 / 0.95), 0 2px 14px rgb(6 14 28 / 0.9); text-transform: uppercase; } .hero__eyebrow::before, .hero__eyebrow::after { width: 2.2rem; height: 1px; background: linear-gradient(to right, transparent, rgb(201 154 69 / 0.85)); content: ""; } .hero__eyebrow::after { background: linear-gradient(to left, transparent, rgb(201 154 69 / 0.85)); } .hero__title { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); } .hero__tagline { color: var(--gold-200); font-family: var(--font-display); font-size: var(--fs-tagline); font-weight: 500; font-style: italic; letter-spacing: 0.04em; text-shadow: 0 1px 2px rgb(6 14 28 / 0.9), 0 2px 14px rgb(6 14 28 / 0.8); } .hero__lede { max-width: 34rem; margin-bottom: var(--s-5); color: var(--text-dim); font-size: var(--fs-lg); text-shadow: 0 1px 2px rgb(6 14 28 / 0.92), 0 2px 12px rgb(6 14 28 / 0.9); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; } /* Sobre el diorama el borgoña macizo se recorta como una pegatina. Aquí —y solo aquí— el botón deja ver la escena, igual que ya hace el secundario. Los tres tramos son los mismos colores del degradado original con alfa. SIN `backdrop-filter`, y no por presupuesto: un desenfoque de fondo obliga al navegador a aplanar todo lo que tiene debajo y a rehacerlo en cada fotograma en que ese fondo cambia. Puesto delante del personaje que respira, los dos dejaban de ser independientes y se notaba el tirón justo al entrar los botones. El alfa sube para compensar la falta de desenfoque y que el rótulo siga legible sobre el arte; de paso se ve igual en todos los navegadores, sin depender de una propiedad que Safari solo entiende con prefijo. El vidrio se queda donde su fondo está quieto: la barra al hacer scroll y el menú móvil. */ .hero .btn--primary { background: linear-gradient( to bottom, rgb(138 33 49 / 0.86), rgb(108 23 34 / 0.9) 60%, rgb(77 15 24 / 0.93) ); } .hero .btn--primary:hover { background: linear-gradient( to bottom, rgb(138 33 49 / 0.94), rgb(108 23 34 / 0.94) 60%, rgb(77 15 24 / 0.96) ); } /* Entrada coreografiada del contenido, después de la escena. Mismo mando de ritmo que las capas: `--enter-scale`. */ .hero-enter .hero__enter { animation: rise-in calc(var(--dur-slow) * var(--enter-scale)) var(--ease-out) calc(var(--d, 0ms) * var(--enter-scale)) both; } @keyframes rise-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } } /* ---------------------------------------------------------------- controles */ .hero__foot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding-bottom: max(var(--s-5), env(safe-area-inset-bottom)); } .hero__cue { display: inline-flex; flex-direction: column; align-items: center; gap: 0.8em; color: var(--gold-200); font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-decoration: none; text-transform: uppercase; transition: color var(--dur-base) var(--ease-out); } .hero__cue:hover { color: var(--gold-300); } /* Tallo largo rematado en punta de flecha. Se anima con `translate` y no con `transform`, que lo usa la punta para su giro de 45°. */ .hero__cue-arrow { position: relative; display: block; width: 2px; height: 3rem; background: linear-gradient(to bottom, transparent, var(--gold-500)); animation: cue 2.2s var(--ease-inout) infinite; } .hero__cue-arrow::after { position: absolute; bottom: 0; left: 50%; width: 0.7rem; height: 0.7rem; border-right: 2px solid var(--gold-300); border-bottom: 2px solid var(--gold-300); translate: -50% 0; rotate: 45deg; content: ""; } @keyframes cue { 0%, 100% { opacity: 0.45; translate: 0 -6px; } 50% { opacity: 1; translate: 0 6px; } } /* ---------------------------------------------------------------- breakpoints */ /* Un diorama no se encuadra por ancho, sino por la forma del viewport: ENCUADRE ALTO (retrato) = cámara cerca, escena recortada. ENCUADRE ANCHO (apaisado) = cámara atrás, escena completa. El corte es 9/10 de relación de aspecto. */ /* ---------------------------------------- encuadre alto: el eje de la figura En vertical la figura va centrada, y ahí se nota que su propio lienzo no lo está: se leía descentrada hacia la izquierda. Un 6 % de su ancho la endereza —algo menos que el 7 % que separa el eje de la cabeza del centro del lienzo, porque el capote y la espada cargan a la izquierda y compensan parte—. Si alguna vez se quiere el eje exacto de la cabeza, este es el número, y es uno solo para todos los anchos. En apaisado y en escritorio no se toca: ahí la figura no está centrada, la desplaza `--x` a mano y esos valores ya se eligieron a ojo sobre el resultado. */ @media (max-aspect-ratio: 9 / 10) { .hero__layer--knight { --axis: 6%; } } /* ---------------------------------------- móvil retrato: los botones al pie En retrato la figura ocupa el centro de la pantalla y ahí es donde cae su cara. Los dos botones bajan al fondo del bloque de texto —`margin-top: auto` dentro de un `.hero__inner` que ya crece— y quedan pegados a «Cruza el arco», leyéndose como un solo grupo de acciones. Así el CTA no puede tapar la cara en ningún alto de pantalla, en vez de depender de que el recorte del personaje la deje por debajo. Solo en móvil, por eso el `max-width` además de la forma del viewport: de 768px arriba el bloque de texto vuelve a leerse arriba, que es donde lo quiere el resto de la composición. Medido de 360×640 a 412×915, el margen automático siempre deja hueco: los botones acaban entre 100 y 310px por debajo del texto y por encima de la flecha. */ @media (max-width: 767px) and (max-aspect-ratio: 9 / 10) { .hero__inner { padding-bottom: var(--s-4); } .hero__actions { margin-top: auto; padding-top: var(--s-5); } } /* ---------------------------------------- encuadre alto: móvil grande */ @media (min-width: 480px) and (max-aspect-ratio: 9 / 10) { .hero__layer--castle { --w: 120%; } .hero__layer--arch { --w: 175%; --b: 2%; } .hero__layer--lions { --w: 230%; } .hero__layer--knight { --w: 83%; --b: -25%; } } /* ---------------------------------------- encuadre alto: tablet vertical */ @media (min-width: 700px) and (max-aspect-ratio: 9 / 10) { .hero__layer--sky { --sky-y: 36%; } .hero__layer--castle { --w: 108%; --b: 8%; } .hero__layer--arch { --w: 158%; --b: 0%; } .hero__layer--lions { --w: 208%; --b: -8%; } .hero__layer--knight { --w: 73%; --b: -26%; } } /* ---------------------------------------- encuadre ancho */ @media (min-width: 768px) and (min-aspect-ratio: 9 / 10) { .hero__layer--sky { --sky-y: 38%; } .hero__layer--castle { --w: 78%; --b: 4%; } .hero__layer--arch { --w: 112%; --b: -3%; } .hero__layer--lions { --w: 140%; --b: -8%; } .hero__layer--knight { --w: 55%; --b: -34%; --x: 16%; } .hero__lede { font-size: var(--fs-lede); } } @media (min-width: 1024px) and (min-aspect-ratio: 9 / 10) { .hero__layer--sky { --sky-y: 40%; } .hero__layer--castle { --w: 60%; --b: 2%; } .hero__layer--arch { --w: 90%; --b: -5%; } .hero__layer--lions { --w: 118%; } .hero__layer--knight { --w: 43%; --b: -36%; --x: 21%; } /* El mundo sigue siendo simétrico; el texto y el personaje rompen el eje. */ .hero__grade--base { background: linear-gradient( to right, rgb(9 20 40 / 0.9) 0%, rgb(9 20 40 / 0.78) 24%, rgb(9 20 40 / 0.46) 44%, rgb(9 20 40 / 0) 68% ), /* Refuerzo superior: la línea de "juego de mesa · jugadores" cae sobre los leones, que son la zona más clara de la escena. */ linear-gradient(to bottom, rgb(9 20 40 / 0.5) 0%, rgb(9 20 40 / 0) 38%), radial-gradient(125% 95% at 50% 52%, rgb(9 20 38 / 0) 44%, rgb(9 20 38 / 0.5) 100%), linear-gradient(to bottom, rgb(11 24 44 / 0) 64%, rgb(6 16 32 / 0.9) 100%); } .hero__inner { align-items: flex-start; justify-content: center; padding-block: var(--nav-h) var(--s-6); text-align: left; } .hero__lede { max-width: 30rem; } .hero__actions { justify-content: flex-start; } } @media (min-width: 1440px) and (min-aspect-ratio: 9 / 10) { .hero__layer--castle { --w: 56%; } .hero__layer--arch { --w: 84%; } .hero__layer--lions { --w: 110%; } .hero__layer--knight { --w: 39%; --x: 22%; } } /* ------------------------------- pantallas muy anchas: 2:1 y más anchas ---- Las capas se dimensionan con `--w`, un porcentaje del ANCHO del hero. Eso funciona hasta relaciones de 2:1; en un monitor 21:9 (2.39) las hace un 50 % más altas que la ventana: al personaje se le va la cabeza fuera de cuadro y solo queda el torso, y el arco pierde el escudo del león, que es su clave. Aquí la escala pasa a ser el ALTO de la ventana. Los valores reproducen la composición de referencia de 1440×900 —donde la figura mide 101 svh, el arco 90 y los leones 117— con un 7 % de más para que la escena no se quede pequeña en un monitor grande. */ @media (min-aspect-ratio: 2 / 1) { .hero__layer--castle img { width: auto; height: 54svh; } .hero__layer--arch img { width: auto; height: 96svh; } .hero__layer--lions img { width: auto; height: 125svh; } /* El personaje: alto de la ventana, y su desplazamiento a la derecha también en `svh`, porque un 22 % del ancho lo mandaría casi fuera de pantalla. */ .hero__knight, .hero__glow { left: calc(50% + 38svh); width: auto; height: 108svh; } } /* Móvil en horizontal: poca altura, se cede escena antes que lectura. */ @media (max-height: 520px) and (orientation: landscape) { .hero { min-height: 34rem; } .hero__layer--castle { --w: 70%; } .hero__layer--arch { --w: 105%; } .hero__layer--lions { --w: 135%; } .hero__layer--knight { --w: 37%; --b: -23%; --x: 26%; } .hero__inner { align-items: flex-start; text-align: left; } .hero__lede, .hero__cue { display: none; } } /* Retrato bajo (móviles pequeños): el bloque de texto se come casi toda la pantalla, así que el personaje se recorta a la altura de la cintura para que su cara siga quedando por debajo del CTA. */ @media (max-height: 700px) and (max-aspect-ratio: 9 / 10) { .hero__layer--knight { --w: 86%; --b: -46%; } } /* Pantallas bajas: se comprime el bloque de texto para que el CTA principal siga cabiendo sin scroll. */ @media (max-height: 680px) { .hero__grade--base { background: linear-gradient( to bottom, rgb(10 22 42 / 0.9) 0%, rgb(10 22 42 / 0.72) 36%, rgb(10 22 42 / 0.36) 58%, rgb(10 22 42 / 0) 74% ), radial-gradient(125% 95% at 50% 52%, rgb(9 20 38 / 0) 44%, rgb(9 20 38 / 0.5) 100%), linear-gradient(to bottom, rgb(11 24 44 / 0) 64%, rgb(6 16 32 / 0.92) 100%); } .hero__inner { padding-block: calc(var(--nav-h) + 2vh) var(--s-3); } .hero__title { gap: var(--s-2); margin-bottom: var(--s-3); } .hero__lede { margin-bottom: var(--s-4); font-size: var(--fs-sm); } .hero__foot { gap: var(--s-2); padding-bottom: var(--s-3); } } /* ------------------------------- presupuesto en dispositivos táctiles ------ El criterio del proyecto son 60 fps en un móvil de gama media. En un Samsung A54 la entrada de la escena se cortaba, y lo que la ahoga no es el número de capas sino con qué se solapan: - la aureola y los haces llevan `mix-blend-mode: screen`, que impide que el navegador los suba a su propia capa: cada fotograma de su animación repinta y vuelve a mezclar contra toda la escena. Y como cuelgan de `.hero__knight`, que respira y bascula, la mezcla se recalcula también en cada fotograma del aliento, para siempre. Aquí la aureola se queda quieta y sin mezcla —sobre el azul oscuro del fondo, `screen` y alfa normal se ven casi igual—, así que el subárbol del personaje vuelve a ser promocionable y el aliento se compone en la GPU, - los haces son además un `repeating-conic-gradient` enmascarado girando sin final. En una pantalla de móvil quedan detrás de la figura y no se leen: se retiran, - el `scale` de la entrada obliga a rasterizar cada capa a 1.05 de un tamaño que ya es de 2 a 2.6 veces el ancho del viewport —los leones van al 260 %—. La entrada se queda solo con la opacidad, que es lo que de verdad se lee, - la figura pierde el más ancho de sus cuatro `drop-shadow`: es el que cuesta rasterizar, y el filo de luz lo dan los otros tres. Lo que no cambia: el orden de las capas, el desfase entre ellas, el aliento del personaje y la flecha del pie. La coreografía es la misma, más barata. */ @media (hover: none) and (pointer: coarse) { .hero-enter .hero__layer { animation-name: layer-fade; } .hero__knight img { filter: drop-shadow(0 0 2px rgb(255 232 182 / 0.62)) drop-shadow(0 0 14px rgb(214 168 84 / 0.5)) drop-shadow(0 14px 26px rgb(6 14 28 / 0.55)); } /* Quieta, pero conserva su mezcla: al estar fuera de la caja que respira, un `screen` estático se pinta una vez y no cuesta nada por fotograma. */ .hero__knight-halo { /* El punto medio del ciclo que ya no corre. */ opacity: 0.8; animation: none; } .hero__knight-rays { display: none; } }