/** * actos.css — el cielo cambia según se acerca el día 30. * * Cuatro atmósferas. La app se pone el atributo data-acto en a partir * de tiempo.js, y con eso cambian el cielo, la altura y el tamaño de la luna, * y el tinte general. Nadie le anuncia a Celin que quedan pocos días: lo ve. */ /* La luna vive dentro de la franja que --ventana-cielo deja libre arriba, así que su posición se expresa en píxeles relativos a esa franja y no en porcentaje del alto: en porcentaje se colaba por detrás de las tarjetas en cuanto la pantalla era alta. */ /* ── Primer día: quedan 20 días o más. Todo tranquilo. ──────────────────── */ :root[data-acto='primer'] { --cielo-alto: #2f6bb0; --cielo-bajo: #a9d6ec; --cielo-tinte: #2b5b8c; --luna-escala: 0.62; --niebla: rgba(180, 215, 240, .10); } /* ── Segundo día: entre 10 y 19. Empieza a atardecer. ───────────────────── */ :root[data-acto='segundo'] { --cielo-alto: #8d4f84; --cielo-bajo: #f2a35c; --cielo-tinte: #7a4468; --luna-escala: 0.78; --niebla: rgba(255, 190, 130, .13); } /* ── Último día: menos de 10. La luna ya ocupa el cielo. ────────────────── */ :root[data-acto='ultimo'] { --cielo-alto: #3d1626; --cielo-bajo: #d4563a; --cielo-tinte: #7a2a24; --luna-escala: 0.98; --niebla: rgba(220, 90, 60, .16); } /* ── Carnaval: es hoy. Sale el sol y la luna se detiene. ────────────────── */ :root[data-acto='carnaval'] { --cielo-alto: #1f5e9e; --cielo-bajo: #ffdc94; --cielo-tinte: #c9922f; --luna-escala: 0.7; --niebla: rgba(255, 225, 160, .18); } /* ── El cielo ───────────────────────────────────────────────────────────── */ .cielo { position: fixed; inset: 0; z-index: var(--z-cielo); background: linear-gradient(to bottom, var(--cielo-alto) 0%, var(--cielo-bajo) 100%); transition: background var(--lento) var(--curva); pointer-events: none; overflow: hidden; } /* Velo oscuro para que el texto se lea siempre. La franja de arriba se deja MUCHO más clara a propósito: es la ventana al cielo, donde se ve la luna, y oscurecerla ahí la apagaba. */ .cielo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,10,20,.18) 0%, rgba(8,10,20,.15) 22%, rgba(8,10,20,.42) 45%, rgba(8,10,20,.72) 100%); } /* Bruma que cruza el cielo despacio, para que no sea un degradado plano. */ .cielo::before { content: ''; position: absolute; inset: -20% -50%; background: radial-gradient(ellipse 38% 22% at 25% 30%, var(--niebla), transparent 70%), radial-gradient(ellipse 45% 18% at 72% 22%, var(--niebla), transparent 70%), radial-gradient(ellipse 30% 25% at 50% 55%, var(--niebla), transparent 70%); animation: bruma 70s linear infinite; pointer-events: none; } @keyframes bruma { from { translate: -6% 0; } 50% { translate: 6% -2%; } to { translate: -6% 0; } } /* La luna se centra DENTRO de la franja de cielo, y su tamaño se deriva del alto de esa franja. Antes se escalaba desde su propio centro con un factor fijo, y en pantallas bajas se desbordaba por abajo y el título de la pantalla le caía encima. Atándola a --ventana-cielo, siempre cabe. */ .cielo-luna { position: absolute; left: 50%; top: var(--alto-cabecera); height: var(--ventana-cielo); display: grid; place-items: center; translate: -50% 0; transition: height var(--lento) var(--curva); filter: drop-shadow(0 0 30px rgba(255,240,200,.35)); /* Deriva lentísima: la luna nunca está del todo quieta. Es casi imperceptible de un vistazo, y esa es la idea. */ animation: luna-deriva 24s ease-in-out infinite alternate; } .cielo-luna svg { height: calc(var(--ventana-cielo) * var(--luna-escala)); width: auto; transition: height var(--lento) var(--curva); } @keyframes luna-deriva { from { translate: -50% 0; } to { translate: -47% -5px; } } /* Halo alrededor de la luna, para separarla del cielo. */ .cielo-luna::before { content: ''; position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(circle, var(--niebla), transparent 68%); animation: halo-respira 7s ease-in-out infinite; pointer-events: none; } @keyframes halo-respira { 0%, 100% { opacity: .55; scale: 1; } 50% { opacity: 1; scale: 1.12; } } /* En el último día la luna respira: es lo que crea la tensión. */ :root[data-acto='ultimo'] .cielo-luna { animation: latido-luna 4s ease-in-out infinite; } @keyframes latido-luna { 0%, 100% { scale: var(--luna-escala); } 50% { scale: calc(var(--luna-escala) * 1.04); } } /* El día del carnaval, la luna brilla en vez de amenazar. */ :root[data-acto='carnaval'] .cielo-luna { animation: brillo-luna 6s ease-in-out infinite; } @keyframes brillo-luna { 0%, 100% { filter: drop-shadow(0 0 30px rgba(255,240,200,.4)); } 50% { filter: drop-shadow(0 0 55px rgba(255,225,150,.75)); } } /* ── Estrellas: solo cuando el cielo está oscuro ────────────────────────── */ .cielo-estrellas { position: absolute; inset: 0; opacity: 0; transition: opacity var(--lento) var(--curva); } :root[data-acto='ultimo'] .cielo-estrellas { opacity: .55; } :root[data-acto='segundo'] .cielo-estrellas { opacity: .2; } .estrella { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: titilar var(--duracion, 4s) ease-in-out infinite; animation-delay: var(--retardo, 0s); } @keyframes titilar { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } /* ── El momento del día ─────────────────────────────────────────────────── */ /* El acto dice en qué punto del MES estamos; esto, en qué punto del DÍA. Se aplica encima de la paleta del acto, así que el cielo no se ve igual por la mañana que por la noche aunque sea el mismo día del ciclo. */ :root[data-momento='amanecer'] { --velo-alto: rgba(255, 190, 120, .10); --velo-bajo: rgba(20, 14, 30, .55); --luz: 1.06; } :root[data-momento='dia'] { --velo-alto: rgba(255, 255, 255, .06); --velo-bajo: rgba(10, 14, 26, .5); --luz: 1.14; } :root[data-momento='atardecer'] { --velo-alto: rgba(255, 140, 70, .14); --velo-bajo: rgba(24, 12, 26, .6); --luz: .96; } :root[data-momento='noche'] { --velo-alto: rgba(30, 40, 90, .22); --velo-bajo: rgba(4, 6, 16, .78); --luz: .62; } /* El cielo se aclara u oscurece con la hora. */ .cielo { filter: brightness(var(--luz, 1)); } /* Y se le tiñe un velo de color según el momento. */ .cielo-velo { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--velo-alto), transparent 55%, var(--velo-bajo)); transition: background var(--lento) var(--curva); pointer-events: none; } /* De noche salen las estrellas, sea el acto que sea. */ :root[data-momento='noche'] .cielo-estrellas { opacity: .8 !important; } :root[data-momento='atardecer'] .cielo-estrellas { opacity: .3 !important; } /* ── El escenario de templos ────────────────────────────────────────────── */ .escenario { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .escena { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--curva); } .escena.dentro { opacity: 1; } .escena-capa { position: absolute; left: -6%; right: -6%; bottom: 0; } .escena-svg { width: 100%; height: 100%; display: block; } /* Tres profundidades. Cada una ocupa más alto y va más oscura y más saturada según se acerca: eso es lo que da la sensación de distancia sin usar ni una imagen. Las alturas son generosas a propósito. Con capas bajas el paisaje se quedaba en una tirita al pie de la pantalla y no se leía como un escenario: las torres tienen que subir hasta cerca de la luna para que parezca que la app ocurre EN un sitio. */ .escena-lejos { height: 80%; color: var(--cielo-tinte); opacity: .42; filter: blur(2px); animation: capa-deriva 90s ease-in-out infinite alternate; } .escena-medio { height: 62%; color: #0e1526; opacity: .66; filter: blur(.4px); animation: capa-deriva 60s ease-in-out infinite alternate-reverse; } .escena-cerca { height: 34%; color: #070b14; opacity: .88; animation: capa-deriva 40s ease-in-out infinite alternate; } /* Deriva lentísima y distinta por capa: es el parallax. */ @keyframes capa-deriva { from { translate: -1.5% 0; } to { translate: 1.5% 0; } } /* De noche las siluetas se cierran casi a negro. */ :root[data-tema-forzado='noche'] .escena-lejos { opacity: .35; } :root[data-tema-forzado='noche'] .escena-medio, :root[data-tema-forzado='noche'] .escena-cerca { color: #04060c; opacity: .95; } /* El día del carnaval el paisaje se aclara: sale el sol. */ :root[data-acto='carnaval'] .escena-medio { color: #2a2416; opacity: .6; } :root[data-acto='carnaval'] .escena-cerca { color: #171208; opacity: .8; } @media (prefers-reduced-motion: reduce) { .escena-lejos, .escena-medio, .escena-cerca { animation: none; } } :root[data-movimiento='reducido'] .escena-capa { animation: none; } /* ── Caritas: vuestras fotos flotando ───────────────────────────────────── */ .caritas { position: fixed; inset: 0; z-index: 1; /* entre el cielo (0) y el contenido (10) */ pointer-events: none; overflow: hidden; } .carita { position: absolute; border-radius: 50%; object-fit: cover; border: 2px solid rgba(217, 180, 74, .55); box-shadow: 0 6px 22px rgba(0, 0, 0, .45); opacity: 0; scale: .7; rotate: var(--giro, 0deg); /* Poca opacidad y algo de desenfoque: tienen que dar vida al fondo, no competir con lo que hay que leer por encima. */ filter: saturate(.85) blur(.4px); transition: opacity 1.3s var(--curva), scale 1.3s var(--curva); } .carita.dentro { opacity: .38; scale: 1; animation: flotar-carita var(--duracion, 12s) ease-in-out infinite alternate; } @keyframes flotar-carita { from { translate: 0 0; } to { translate: var(--deriva, 20px) -22px; } } /* En el último día se tiñen de rojo, como todo lo demás. */ :root[data-acto='ultimo'] .carita { filter: saturate(.6) sepia(.25) blur(.4px); } :root[data-acto='carnaval'] .carita { opacity: .5; filter: saturate(1.05); } @media (prefers-reduced-motion: reduce) { .carita.dentro { animation: none; } } :root[data-movimiento='reducido'] .carita.dentro { animation: none; } /* ── Nubes del último día ───────────────────────────────────────────────── */ .cielo-nubes { position: absolute; inset: 0; opacity: 0; transition: opacity var(--lento) var(--curva); background: radial-gradient(ellipse 40% 18% at 20% 30%, rgba(60,20,25,.5), transparent 70%), radial-gradient(ellipse 50% 15% at 75% 45%, rgba(60,20,25,.4), transparent 70%), radial-gradient(ellipse 35% 12% at 45% 62%, rgba(60,20,25,.35), transparent 70%); } :root[data-acto='ultimo'] .cielo-nubes { opacity: 1; }