/* ============================================================================ Alio · Lo que se apaga en un teléfono que no puede ---------------------------------------------------------------------------- Todo lo de aquí cuelga de `.gama-baja`, que pone `js/gama.js` en el después de MEDIR los cuadros de verdad (no de leer la ficha técnica). Va en un archivo propio y no repartido por hero.css a propósito: «qué se sacrifica en un equipo lento» es una decisión de producto, y tiene que poder leerse entera de una sentada en vez de reconstruirse de doce sitios. LO QUE NO SE APAGA, Y ES LO IMPORTANTE: el recorrido. El teléfono sigue haciendo su zoom y el cerebro sigue formándose. Lo que se va son los ADORNOS que cuestan una fortuna y no cuenta nadie. Degradar hasta dejar una página quieta habría sido más fácil y habría dado otro sitio. ========================================================================== */ /* --- 1. Los desenfoques ---------------------------------------------------- El más caro de todos, y con diferencia. Un `backdrop-filter` obliga al navegador a copiar el fondo, desenfocarlo y componer CADA VEZ que algo debajo se mueve — y durante el zoom se mueve todo, sesenta veces por segundo. Las GPU de gama baja tienen muy poca tasa de relleno y un desenfoque grande es justo lo que peor llevan. MEDIO EFECTO YA ERA INVISIBLE. `.nav__links` desenfoca 24 px detrás de un fondo `rgba(255,255,255,0.97)`, y `.chip` 6 px detrás de `0.92`: a esas opacidades no se ve NADA a través, así que el desenfoque se pagaba entero sin pintar nada. Ahí no se pierde ni un píxel de aspecto. Donde el fondo SÍ era translúcido de verdad (la barra a 0,82 y los dos sobre la foto) se sube la opacidad, porque quitar el desenfoque sin tocarla deja el texto sobre lo que haya detrás, sin separación y a veces ilegible. ------------------------------------------------------------------------ */ .gama-baja .nav.is-stuck, .gama-baja .nav__links, .gama-baja .chip, .gama-baja .hero__eyebrow, .gama-baja .hero__hint { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .gama-baja .nav.is-stuck { background: rgba(246, 247, 248, 0.96); } .gama-baja .hero__eyebrow { background: rgba(16, 20, 25, 0.5); } .gama-baja .hero__hint { background: rgba(16, 20, 25, 0.66); } /* --- 2. La niebla y el sol ------------------------------------------------- `.mist` es una capa desenfocada 14 px con una animación INFINITA encima: cuesta cada cuadro de la vida de la página, esté el usuario donde esté. Se va entera; es atmósfera, no información. Al sol se le quita el desenfoque pero se queda: ya es un degradado radial con los bordes suaves, así que sin los 4 px se ve prácticamente igual. ------------------------------------------------------------------------ */ .gama-baja .mist { display: none; } .gama-baja .landscape__sun { filter: none; } /* --- 3. Las animaciones infinitas ----------------------------------------- Un `infinite` no termina nunca: mantiene despierto al compositor y compite por cada cuadro con lo que el usuario SÍ está mirando. Las de entrada se quedan —ocurren una vez y dan vida al primer vistazo—; las que se repiten para siempre, no. ------------------------------------------------------------------------ */ .gama-baja .chip { /* Conserva su entrada (`chip-in`) y pierde el vaivén (`chip-float`). */ animation: chip-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; } .gama-baja .hero__hint { animation: none !important; } /* --- 4. EL VUELO NO ARRASTRA LA APP ENTERA -------------------------------- Esto es lo caro de verdad, y no se arregla quitando adornos. Dentro de `.phone__screen` vive la maqueta del Home: unos 240 elementos con texto, iconos y tarjetas. El vuelo escala `.phone` de 0,26 a 1, y en cada cuadro el navegador RE-RASTERIZA ese árbol a la escala nueva — porque el transform lo escribe JavaScript cuadro a cuadro y el navegador no puede saber a qué escala va a acabar. Son sesenta rasterizados de una pantalla de app completa, cada uno más grande que el anterior. De ahí los picos de 1 fps medidos en el Redmi, y por eso quitar los desenfoques apenas se notó: el coste no estaba ahí. La solución no es dibujarlo más barato: es NO DIBUJARLO. Durante el vuelo la pantalla se queda apagada —que es lo que ya hace los primeros dos tercios del recorrido por decisión de diseño— y el Home no se rasteriza ni una vez. Al aterrizar aparece, UNA sola vez y ya a su tamaño final. Lo que se pierde: en el último cuarto del vuelo, donde en un equipo bueno se ve la app encendiéndose mientras se acerca, aquí el teléfono llega oscuro y se enciende al posarse. Es una lectura distinta del mismo gesto, no una versión rota — y a cambio el vuelo se puede ver. ------------------------------------------------------------------------ */ .gama-baja .hero.is-flying:not(.is-inside) .home-fit { visibility: hidden; } .gama-baja .hero.is-flying:not(.is-inside) .phone__screen::after { opacity: 1; } /* El encendido al aterrizar. Sin esto el velo salta de 1 a 0 de golpe, porque para entonces `--screen-off` ya vale 0 desde hace rato. Es UN elemento compuesto: cuesta lo mismo en cualquier teléfono. */ .gama-baja .phone__screen::after { transition: opacity 0.3s ease; } /* --- 5. Sombras enormes --------------------------------------------------- Una sombra de 90 px de difuminado es un desenfoque con otro nombre, y esta cuelga del teléfono, que es justo el elemento que se escala durante todo el vuelo: se re-rasteriza en cada cuadro y a un tamaño que no para de crecer. Se cambia por una sombra corta, que se sigue leyendo como profundidad. ------------------------------------------------------------------------ */ .gama-baja .phone__body::before { box-shadow: 0 12px 28px rgba(16, 20, 25, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.22); }