/* =========================================================
   ANUNCIO DE LA PRÓXIMA SALIDA · A La Torre GT
   Se carga DESPUÉS de inicio.css. Solo suma, no reemplaza nada.

   Momento de entrada (una sola secuencia, ~2 s):
     1. el fondo se oscurece y sube el volcán con su resplandor
     2. la tarjeta emerge desde abajo con un aro de lava girando
     3. el póster se "revela" como si la lava subiera por él
     4. un destello cruza el botón una vez para llamar la acción
   Mientras está abierto: brasas que suben + resplandor del cráter.

   El póster siempre conserva su proporción 3:4 (celular y compu).
   Con "reducir movimiento" activado en el dispositivo, todo es estático.
   ========================================================= */

@property --anu-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes anu-giro { to { --anu-ang: 360deg; } }

/* mientras el anuncio está abierto la página de atrás no se desplaza */
html.anu-bloqueo, html.anu-bloqueo body { overflow: hidden; }
html.anu-bloqueo { scrollbar-gutter: stable; }

/* ---------- CONTENEDOR ---------- */
.anu {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; overflow-y: auto; overscroll-behavior: contain;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.anu[hidden] { display: none; }

/* ---------- FONDO: oscuro con luz de magma desde abajo ---------- */
.anu-fondo {
    position: fixed; inset: 0; z-index: 0; cursor: pointer;
    background:
        radial-gradient(110% 65% at 50% 112%, rgba(255, 69, 0, 0.42), rgba(139, 0, 0, 0.12) 45%, transparent 70%),
        rgba(9, 10, 15, 0.8);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}

/* ---------- VOLCÁN (silueta con cráter encendido) ---------- */
.anu-volcan { position: fixed; left: 0; right: 0; bottom: 0; height: 46vh; z-index: 1; pointer-events: none; }
.anu-volcan svg { display: block; width: 100%; height: 100%; }
.anu-resplandor { animation: anu-late 3.4s ease-in-out infinite; }
@keyframes anu-late { 50% { opacity: 0.6; } }

/* ---------- BRASAS (las crea anuncio.js) ---------- */
.anu-brasas { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.anu-brasa {
    position: absolute; bottom: -14px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, #fff3b0 0%, #ffcc00 38%, #ff4500 72%, rgba(255, 69, 0, 0) 74%);
    box-shadow: 0 0 9px 2px rgba(255, 100, 20, 0.55);
    animation: anu-sube var(--d) linear var(--r) infinite; will-change: transform, opacity;
}
@keyframes anu-sube {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
    8%   { opacity: 1; }
    55%  { transform: translate3d(calc(var(--dx) * 0.5), -55vh, 0) scale(0.8); opacity: 0.85; }
    100% { transform: translate3d(var(--dx), -108vh, 0) scale(0.3); opacity: 0; }
}

/* ---------- TARJETA ----------
   Ancho = el menor entre: pantalla, 420px y lo que deja la altura libre,
   así el póster 3:4 + el botón siempre caben sin cortarse. */
.anu-card {
    --w: min(calc(100vw - 32px), 420px, calc((100vh - 150px) * 0.75));
    position: relative; z-index: 3; margin: auto; width: max(var(--w), 230px);
    background: #14151d; border-radius: 22px; overflow: hidden; isolation: isolate; outline: none;
    box-shadow: 0 40px 90px -20px rgba(255, 69, 0, 0.38), 0 18px 40px rgba(0, 0, 0, 0.5);
}
@supports (height: 100dvh) {
    .anu-card { --w: min(calc(100vw - 32px), 420px, calc((100dvh - 150px) * 0.75)); }
}
/* aro de lava girando (el mismo recurso del menú y las tarjetas) */
.anu-card::before {
    content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; padding: 2px;
    background: conic-gradient(from var(--anu-ang), #ff4500, #ffcc00, #ff4500, #8b0000, #ff4500);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: anu-giro 4s linear infinite;
}

/* ---------- PÓSTER 3:4 ---------- */
.anu-foto { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #14151d; }
.anu-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* "Lava que sube": una cortina oscura con borde ondulado sube y deja ver el póster;
   pegada a su borde viaja la franja de lava. Todo es transform (fluido en celulares). */
.anu-frente { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translateY(-150%); }
.anu-cubre {
    position: absolute; inset: 0; z-index: 1; background: #14151d;
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 13px) no-repeat,
                  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 0H48V6C36 6 36 14 24 14C12 14 12 6 0 6Z'/%3E%3C/svg%3E") bottom / 48px 14px repeat-x;
            mask: linear-gradient(#000 0 0) top / 100% calc(100% - 13px) no-repeat,
                  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 0H48V6C36 6 36 14 24 14C12 14 12 6 0 6Z'/%3E%3C/svg%3E") bottom / 48px 14px repeat-x;
}
.anu-lava {
    position: absolute; left: 0; right: 0; top: calc(100% - 9px); height: 36%; z-index: 0;
    background: linear-gradient(to bottom, #fff3b0 0, #ffcc00 6%, #ff7a00 16%, #ff4500 30%, rgba(139, 0, 0, 0.5) 58%, rgba(139, 0, 0, 0) 100%);
}

/* ---------- CERRAR ---------- */
.anu-x {
    position: absolute; top: 12px; right: 12px; z-index: 6; width: 40px; height: 40px; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(20, 21, 29, 0.62);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
    transition: transform 0.3s ease, background 0.3s ease;
}
.anu-x:hover { background: #ff4500; transform: rotate(90deg); }
.anu-x svg { width: 16px; height: 16px; }

/* ---------- BOTÓN ---------- */
.anu-pie { padding: 14px 16px 16px; background: #14151d; }
.anu-cta {
    position: relative; overflow: hidden; display: block; width: 100%; box-sizing: border-box;
    padding: 14px 20px; text-align: center; font-size: 1rem;
}
.anu-cta::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    transform: translateX(-160%) skewX(-20deg);
}
.anu-x:focus-visible, .anu-cta:focus-visible { outline: 3px solid #ffcc00; outline-offset: 3px; }

/* =========================================================
   SECUENCIA DE ENTRADA (solo cuando JS pone .abierto)
   ========================================================= */
.anu.abierto .anu-fondo   { animation: anu-aparece 0.55s ease both; }
.anu.abierto .anu-volcan  { animation: anu-surge 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
.anu.abierto .anu-card    { animation: anu-entra 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
.anu.abierto .anu-frente  { animation: anu-lava 1.35s cubic-bezier(0.55, 0.1, 0.2, 1) 0.55s both; }
.anu.abierto .anu-foto img { animation: anu-asienta 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both; }
.anu.abierto .anu-x       { animation: anu-aparece 0.4s ease 0.7s both; }
.anu.abierto .anu-cta::after { animation: anu-brillo 1.1s ease 2s 1 both; }

@keyframes anu-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes anu-surge   { from { opacity: 0; transform: translateY(35%); } to { opacity: 1; transform: none; } }
@keyframes anu-entra   { from { opacity: 0; transform: translateY(70px) scale(0.93); } to { opacity: 1; transform: none; } }
@keyframes anu-lava    { from { transform: translateY(0); } to { transform: translateY(-150%); } }
@keyframes anu-asienta { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes anu-brillo  { from { transform: translateX(-160%) skewX(-20deg); } to { transform: translateX(380%) skewX(-20deg); } }

/* ---------- SALIDA ---------- */
.anu.cerrando .anu-card { animation: anu-baja 0.38s cubic-bezier(0.5, 0, 0.8, 0.3) both; }
.anu.cerrando .anu-fondo, .anu.cerrando .anu-volcan, .anu.cerrando .anu-brasas { animation: anu-sale 0.38s ease both; }
@keyframes anu-baja { to { opacity: 0; transform: translateY(50px) scale(0.95); } }
@keyframes anu-sale { to { opacity: 0; } }

/* ---------- CELULAR ---------- */
@media (max-width: 768px) {
    .anu-card { border-radius: 20px; }
    .anu-volcan { height: 38vh; }
    .anu-pie { padding: 12px 14px 14px; }
}

/* ---------- SIN MOVIMIENTO (preferencia del dispositivo) ---------- */
@media (prefers-reduced-motion: reduce) {
    .anu *, .anu *::before, .anu *::after { animation: none !important; transition: none !important; }
    .anu-brasas { display: none; }
}