/* Mujer de Fe · portada · 8. «Nuevas son cada mañana». Con WebGL (amanecer-3d), la foto de la cruz la pinta comun/foto-luz.js en
   2,5D y la sección se queda fija mientras amanece: de la hora azul al oro, el sol sube tras los montes, rayos de luz,
   niebla, polen y destellos; Lamentaciones 3:22-23 llega con la luz y «Nuevas son cada mañana» se escribe sola.
   Sin WebGL, la foto se aleja al entrar con su destello. Tapa el mundo 3D de la portada (que se para). */

.amanecer { position: relative; z-index: 2; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: #F2C9A2; }
.amanecer-foto { position: absolute; inset: 0; }
.amanecer-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform-origin: 69% 42%; will-change: transform; }
.amanecer-lienzo { display: none; }
.amanecer-3d .amanecer-lienzo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.amanecer-3d .amanecer-foto, .amanecer-3d .amanecer-destello { display: none; }
.amanecer-destello {
  position: absolute; left: 69%; top: 40%; width: 60vmax; height: 60vmax; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 252, 235, .9), rgba(255, 220, 150, .35) 16%, rgba(255, 190, 120, .1) 36%, transparent 62%);
  mix-blend-mode: screen; animation: latido 7s ease-in-out infinite; will-change: transform;
}
@keyframes latido { 50% { scale: 1.12; opacity: .85; } }

.amanecer-texto {
  position: absolute; z-index: 1; top: clamp(90px, 12vh, 140px); left: 50%; translate: -18% 0;
  width: min(720px, 100% - 2 * var(--margen)); text-align: center; color: var(--chocolate);
  will-change: transform;
}
.amanecer-texto::before {
  content: ""; position: absolute; inset: -14% -18% -10%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 249, 240, .78), rgba(255, 249, 240, .4) 60%, rgba(255, 249, 240, 0));
}
.amanecer-cita p { margin: 0 0 14px; font: 400 clamp(19px, 1.7vw, 25px)/1.5 var(--serif); font-style: italic; }
.amanecer-cita .verso { display: block; }
.verso-grande {
  margin: 6px 0 2px; padding: 0 .1em .12em; white-space: nowrap; font-size: clamp(46px, 5.6vw, 92px); font-style: normal; line-height: 1;
  /* el rosa del botón con un reflejo de oro que pasa, y un halo de luz alrededor */
  background: linear-gradient(100deg, var(--rosa-fuerte) 0%, var(--rosa-fuerte) 38%, #E9A35C 48%, #FFF1C9 50%, #E9A35C 52%, var(--rosa-fuerte) 62%, var(--rosa-fuerte) 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 249, 240, .95));
  animation: reflejo-amanecer 6s 1s ease-in-out infinite;
}
@keyframes reflejo-amanecer { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0 0; } }
.amanecer-cita cite { margin-bottom: 26px; font: 600 12px/1 var(--sans); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--oro-hondo); }
.amanecer-texto .boton { display: inline-flex; }
.efectos .amanecer-texto .verso { opacity: 0; }
/* «Nuevas son cada mañana» se escribe de izquierda a derecha: --escrito avanza con el scroll (portada.js) */
.efectos .verso-grande {
  --escrito: -20%;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--escrito) - 12%), transparent var(--escrito));
  mask-image: linear-gradient(90deg, #000 calc(var(--escrito) - 12%), transparent var(--escrito));
}

@media (max-width: 800px) {
  .amanecer-foto img { object-position: 24% 50%; }
  .amanecer-destello { left: 80%; top: 36%; }
  .amanecer-texto { translate: -50% 0; top: 90px; }
  /* en vertical la cruz queda detrás del texto: un velo más denso para que se lea limpio */
  .amanecer-texto::before { inset: -10% -12% -8%; background: radial-gradient(closest-side, rgba(255, 249, 240, .9), rgba(255, 249, 240, .65) 60%, rgba(255, 249, 240, 0)); }
}