/* ¡Feliz Primavera! Capa del evento de cierre (public/spring-finale.js).
   z-index 20000: por encima de TODO el resto de la app (header sticky 9995, chat-dock 9990,
   barra/toggle de reacciones 9997/9998, #cursor-layer 9999, .loc-modal 10000, #toast-layer 10001,
   popovers de estado/aire 10002-10003, .muro-* y afines hasta 10021), pero por debajo del
   .app-loader (100000) que tapa la carga inicial de la página.

   La coreografía, por fase (#finale[data-fase]):
   - cuenta: el número gigante hace "pop" en cada segundo (steps, se siente arcade), una viñeta
     verde se va cerrando y abajo, donde está el jardín, brota una flor por segundo.
   - blum: desde el cantero se abre un destello (lima y después blanco), "¡FELIZ PRIMAVERA!"
     entra letra por letra y las flores de la ofi salen disparadas en arcos, con pétalos.
   - ramo: mis flores bajan y se atan en un ramo de papel madera con moño; al lado (o abajo en el
     celular), la tarjeta de cada una cae como un papelito.
   - cierre: el total de la ofi en un cartel, el cantero plantado abajo y la ofi que se asoma
     detrás (el fondo se aclara mientras el tema se apaga).
   Solo se animan transform y opacity. */

.finale {
  --tinta: #1b1b1b;
  --crema: #fff8e8;
  --papel: #fffdf6;
  --hoja: #43674c;
  --hoja-osc: #304d38;
  --hoja-tinta: #253b2a;
  --lima: #d9ec9a;
  --tierra: #95b479;
  --rosa: #e8628a;
  --girasol: #f1c64e;
  position: fixed; inset: 0; z-index: 20000;
  display: flex; flex-direction: column;
  padding: 16px;
  overflow-x: hidden; overflow-y: auto;
  font-family: 'Press Start 2P', monospace; text-align: center; color: var(--tinta);
  outline: none;
}
.finale[hidden] { display: none; }
/* El fondo crema es una capa aparte para poder aclararlo en el cierre (se ve la ofi volver). */
.finale::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background: var(--crema); opacity: 1;
  transition: opacity 1.2s ease;
}
.finale[data-fase='cierre']::before { opacity: .82; }
.finale--saliendo { opacity: 0; transition: opacity .8s; }

/* ---- Escena (decorado) ---- */
.finale-escena { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.finale-contenido {
  position: relative; z-index: 2;
  margin: auto; /* centrado, pero si no entra se puede scrollear */
  width: 100%; max-width: 980px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 8px 0 24px;
}

/* ---- Fase por fase: qué se ve ---- */
.finale-vineta, .finale-brotes, .finale-cuenta-caja { display: none; }
.finale[data-fase='cuenta'] .finale-vineta, .finale[data-fase='cuenta'] .finale-cuenta-caja { display: block; }
.finale[data-fase='cuenta'] .finale-brotes { display: flex; }
.finale[data-fase='cuenta'] :is(.finale-titulo, .finale-subtitulo, .finale-mesa, .finale-cierre) { display: none; }
.finale:not([data-fase='blum']) :is(.finale-destello, .finale-cielo) { display: none; }
.finale:not([data-fase='ramo']) .finale-mesa { display: none; }
.finale:not([data-fase='cierre']) :is(.finale-cierre, .finale-cantero) { display: none; }
.finale-subtitulo:empty { display: none; }

/* ---- Cuenta regresiva ---- */
.finale-cuenta-leyenda { margin: 0 0 18px; font-size: 12px; color: var(--hoja-osc); }
.finale-cuenta {
  font-size: clamp(96px, 26vw, 220px); line-height: 1;
  text-shadow: .05em .05em 0 var(--lima), .1em .1em 0 var(--hoja);
  animation: finale-pop .42s steps(4) both;
}
@keyframes finale-pop {
  0% { transform: scale(1.8); opacity: 0; }
  50% { transform: scale(.88); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
/* Viñeta: un marco verde que se cierra a medida que baja la cuenta (--vineta 0 → 1, JS). */
.finale-vineta {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 22vmin 2vmin rgba(88, 150, 70, .55);
  opacity: var(--vineta, 0);
  transition: opacity .6s ease-out;
}
/* El cantero de la cuenta: diez brotes, uno por segundo. */
.finale-brotes {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  gap: 6px; align-items: end; justify-content: center;
  padding: 0 14px;
  border-bottom: 10px solid var(--tierra);
  box-shadow: 0 4px 0 var(--hoja-osc);
}
.finale-brote { width: 42px; height: 56px; transform: scaleY(0); transform-origin: 50% 100%; }
.finale-brote.brotada { animation: finale-brota .4s steps(4) forwards; }
@keyframes finale-brota {
  0% { transform: scale(.3, 0); }
  60% { transform: scale(1.1, 1.15); }
  100% { transform: none; }
}

/* ---- Blum: destello desde el cantero ---- */
/* Un "círculo" de pixel (octógono escalonado) que crece desde abajo al centro: primero lima, después blanco. */
.finale-destello {
  position: absolute; left: 50%; bottom: 0;
  width: 250vmax; height: 250vmax; margin: 0 0 -125vmax -125vmax;
  background: var(--lima);
  clip-path: polygon(35% 0, 65% 0, 65% 5%, 80% 5%, 80% 10%, 90% 10%, 90% 20%, 95% 20%, 95% 35%, 100% 35%, 100% 65%, 95% 65%, 95% 80%, 90% 80%, 90% 90%, 80% 90%, 80% 95%, 65% 95%, 65% 100%, 35% 100%, 35% 95%, 20% 95%, 20% 90%, 10% 90%, 10% 80%, 5% 80%, 5% 65%, 0 65%, 0 35%, 5% 35%, 5% 20%, 10% 20%, 10% 10%, 20% 10%, 20% 5%, 35% 5%);
  transform: scale(0);
  animation: finale-destello 1.1s linear both;
}
.finale-destello--blanco { background: #fff; animation-delay: .12s; }
@keyframes finale-destello {
  0% { transform: scale(0); opacity: 1; animation-timing-function: steps(6); }
  45% { transform: scale(1); opacity: 1; animation-timing-function: ease-in; }
  100% { transform: scale(1); opacity: 0; }
}

/* ---- El título, letra por letra ---- */
.finale-titulo {
  margin: 0; font-weight: normal;
  font-size: clamp(28px, 7vw, 76px); line-height: 1.35;
  text-shadow: .06em .06em 0 var(--girasol), .12em .12em 0 var(--rosa);
}
.finale-palabra { display: inline-block; white-space: nowrap; }
.finale-letra { display: inline-block; }
.finale[data-fase='blum'] .finale-letra {
  animation:
    finale-letra .5s steps(5) calc(250ms + var(--i) * 45ms) both,
    finale-ola 1.1s steps(2) calc(1.3s + var(--i) * 70ms) infinite;
}
@keyframes finale-letra {
  0% { transform: translateY(-.9em) scale(2); opacity: 0; }
  60% { transform: translateY(.12em) scale(.9); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes finale-ola { 50% { transform: translateY(-.1em); } }
/* En el ramo y el cierre el título queda chico, arriba; entra de nuevo con un saltito. */
.finale:is([data-fase='ramo'], [data-fase='cierre']) .finale-titulo {
  font-size: clamp(16px, 3.4vw, 28px);
  animation: finale-baja .4s steps(4) both;
}
@keyframes finale-baja { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.finale-subtitulo {
  margin: 0; padding: 8px 10px;
  font-size: 9px; line-height: 1.6;
  background: var(--lima); border: 3px solid var(--hoja-tinta); box-shadow: 3px 3px 0 var(--hoja-tinta);
  transform: rotate(-2deg);
}

/* ---- Blum: las flores que vuelan y los pétalos ---- */
.finale-cielo { position: absolute; inset: 0; }
/* De afuera: de costado (lineal). De adentro: sube frenando y gira. Juntos, un arco. */
.finale-vuelo {
  position: absolute; left: var(--x0); bottom: -100px;
  animation: finale-costado var(--dur) linear var(--d) both;
  will-change: transform;
}
.finale-sube {
  animation: finale-sube var(--dur) cubic-bezier(.15, .6, .45, 1) var(--d) both;
  will-change: transform;
}
.finale-vuela { width: calc(24px * var(--s)); height: calc(32px * var(--s)); }
@keyframes finale-costado { to { transform: translateX(var(--x1)); } }
@keyframes finale-sube {
  from { transform: translateY(0) rotate(0); }
  to { transform: translateY(calc(-1 * var(--alto))) rotate(var(--giro)); }
}
.finale-petalo {
  position: absolute; top: -12px; left: var(--x);
  box-shadow: 1px 1px 0 var(--hoja-tinta);
  animation: finale-petalo var(--dur) linear var(--d) both;
}
@keyframes finale-petalo {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translate(var(--viento), 110vh) rotate(var(--giro)); opacity: 1; }
}

/* ---- Ramo + tarjeta ---- */
.finale-mesa { display: flex; align-items: center; justify-content: center; gap: 48px; width: 100%; }
.finale-ramo { --tallo: 112px; --flor: 96px; position: relative; flex-shrink: 0; width: 320px; height: 340px; }
.finale-ramo-flores { position: absolute; left: 50%; bottom: 30%; width: 0; height: 0; }
/* Cada tallo sale del mismo punto (el atado) y se abre en abanico con --a. */
.finale-ramo-tallo {
  position: absolute; left: -2px; bottom: 0; z-index: var(--z);
  width: 4px; height: calc(var(--tallo) * var(--h));
  background: #427247; box-shadow: 1px 0 0 var(--hoja-tinta);
  transform-origin: 50% 100%;
  transform: rotate(var(--a));
  animation: finale-junta .9s cubic-bezier(.3, .9, .4, 1.15) var(--d) both;
}
@keyframes finale-junta {
  from { transform: translate(var(--dx), -85vh) rotate(var(--giro)); }
  to { transform: rotate(var(--a)); }
}
.finale-ramo-flor {
  position: absolute; left: 50%; bottom: calc(100% - var(--flor) * .5);
  width: calc(var(--flor) * .75); height: var(--flor);
  margin-left: calc(var(--flor) * -.375);
  transition: transform .2s steps(2);
}
/* La flor de la tarjeta que se está leyendo se asoma un poco del ramo. */
.finale-ramo-tallo.es-actual { z-index: 5; }
.finale-ramo-tallo.es-actual .finale-ramo-flor { transform: translateY(-10px) scale(1.18); }
.finale-ramo-papel {
  position: absolute; left: 50%; bottom: 0; z-index: 6;
  width: 128px; height: 128px; margin-left: -64px;
  animation: finale-funde .5s ease-out .2s both;
}
.finale-ramo-papel svg, .finale-ramo-monio svg { display: block; width: 100%; height: 100%; }
.finale-ramo-monio {
  position: absolute; left: 50%; bottom: 19%; z-index: 7;
  width: 72px; height: 48px; margin-left: -36px;
  animation: finale-monio .45s steps(4) 1s both;
}
@keyframes finale-monio { 0% { transform: scale(0) rotate(-20deg); } 70% { transform: scale(1.2) rotate(6deg); } 100% { transform: none; } }
@keyframes finale-funde { from { opacity: 0; } to { opacity: 1; } }

.finale-lado { display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(420px, 100%); }
.finale-tarjeta { width: 100%; }
.finale-papel {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 18px; text-align: left;
  background: var(--papel); border: 4px solid var(--tinta); box-shadow: 6px 6px 0 var(--tinta);
  transform: rotate(var(--tilt));
  animation: finale-papelito .55s cubic-bezier(.2, .8, .3, 1.2) both;
}
@keyframes finale-papelito {
  from { transform: translate(40px, -46px) rotate(calc(var(--tilt) * -8)); opacity: 0; }
  to { transform: rotate(var(--tilt)); opacity: 1; }
}
/* La flor grande, como una estampilla. */
.finale-tarjeta-sello {
  display: grid; place-items: center;
  width: 84px; height: 104px;
  background: var(--lima); border: 3px solid var(--tinta);
}
.finale-tarjeta-flor { width: 60px; height: 80px; }
.finale-tarjeta-texto { min-width: 0; }
.finale-tarjeta-quien { display: block; font-size: 12px; line-height: 1.7; font-weight: normal; overflow-wrap: anywhere; }
.finale-tarjeta-nota {
  margin: 10px 0 0; font-family: 'Press Start 2P', monospace; font-size: 10px; line-height: 2;
  overflow-wrap: break-word;
}
.finale-tarjeta-pie { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.finale-tarjeta-n { flex-shrink: 0; font-size: 8px; color: var(--hoja-osc); }
/* Cuánto le queda a esta tarjeta antes de pasar sola. */
.finale-tarjeta-reloj {
  flex: 1; height: 6px; background: var(--hoja); transform-origin: 0 50%;
  animation: finale-reloj 3.5s steps(14) both;
}
@keyframes finale-reloj { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- Botones: el look de .spring-garden-action (spring.css) ---- */
.finale-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.finale button {
  min-height: 44px; padding: 12px 16px;
  font-family: 'Press Start 2P', monospace; font-size: 9px; line-height: 1.4;
  background: var(--hoja); color: var(--crema);
  border: 3px solid var(--hoja-tinta); box-shadow: 3px 3px 0 var(--hoja-tinta);
  cursor: pointer;
  transform: none;
}
.finale button:hover { background: var(--hoja-osc); transform: none; box-shadow: 3px 3px 0 var(--hoja-tinta); }
.finale button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--hoja-tinta); }
.finale button:focus-visible { outline: 3px solid #a95443; outline-offset: 3px; }
.finale button.finale-boton-claro { background: var(--crema); color: var(--hoja-tinta); }
.finale button.finale-boton-claro:hover { background: var(--lima); }
.finale button[hidden] { display: none; }

/* ---- Cierre ---- */
.finale-cierre {
  width: min(560px, 100%); padding: 26px 22px;
  background: var(--papel); border: 4px solid var(--tinta); box-shadow: 6px 6px 0 var(--tinta);
  animation: finale-cartel .45s steps(4) .15s both;
}
@keyframes finale-cartel { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.04); opacity: 1; } 100% { transform: none; opacity: 1; } }
.finale-cierre-texto { margin: 0; font-size: clamp(14px, 2.6vw, 20px); line-height: 1.7; text-wrap: balance; }
.finale-cierre-yo { margin: 14px 0 0; font-size: 10px; line-height: 1.6; color: var(--hoja-osc); }
.finale-cierre-yo:empty { display: none; }
.finale-cierre .finale-botones { margin-top: 24px; }
/* Cierre: "Cerrar" es LA acción (ancha, arriba); abajo, separadas por una línea punteada como un
   talón de papel, las dos secundarias (volver al ramo, ir a la tienda), que pueden no estar. */
.finale-botones-cierre { flex-direction: column; align-items: stretch; gap: 0; }
.finale-botones-cierre .finale-cerrar { align-self: center; min-width: min(240px, 100%); font-size: 10px; }
.finale-botones-otros { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 3px dashed var(--hoja); }
.finale-botones-otros:not(:has(button:not([hidden]))) { display: none; }
.finale-botones-otros button { flex: 1 1 180px; max-width: 260px; font-size: 8px; }
/* El cantero plantado: las flores de la ofi (muestra) en una hilera sobre la tierra. */
.finale-cantero {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; align-items: end; gap: 2px;
  overflow: hidden;
  border-bottom: 10px solid var(--tierra); box-shadow: 0 4px 0 var(--hoja-osc);
}
.finale-cantero-flor { width: 30px; height: 40px; transform-origin: 50% 100%; animation: finale-brota .4s steps(4) calc(var(--i) * 45ms) both; }
.finale-cantero-flor:nth-child(3n) { height: 34px; }
.finale-cantero-flor:nth-child(4n+1) { height: 44px; }

/* ---- Celular ---- */
@media (max-width: 700px) {
  .finale-mesa { flex-direction: column; gap: 14px; }
  .finale-ramo { --tallo: 70px; --flor: 60px; width: 250px; height: 220px; }
  .finale-lado { width: min(420px, calc(100% - 10px)); }
  .finale-vuela { width: calc(18px * var(--s)); height: calc(24px * var(--s)); }
  .finale-ramo-papel { width: 92px; height: 92px; margin-left: -46px; }
  .finale-ramo-monio { width: 52px; height: 35px; margin-left: -26px; }
  .finale-brote { width: 26px; height: 35px; }
  .finale-brotes { gap: 2px; padding: 0 6px; }
  .finale-papel { padding: 14px; gap: 12px; }
  .finale-tarjeta-sello { width: 64px; height: 80px; }
  .finale-tarjeta-flor { width: 45px; height: 60px; }
  .finale-tarjeta-quien { font-size: 10px; }
  .finale-cantero-flor { width: 22px; height: 30px; }
  .finale-cantero-flor:nth-child(3n) { height: 26px; }
  .finale-cantero-flor:nth-child(4n+1) { height: 33px; }
  .finale-contenido { padding-bottom: 60px; } /* que el cierre no quede encima del cantero */
}

@media (max-width: 420px) {
  .finale-tarjeta-nota { font-size: 9px; }
  .finale-cierre { padding: 22px 14px; }
  .finale-botones-otros button { flex-basis: 100%; max-width: none; }
}

/* ---- El cartelito de arriba (T-10 min a T-10 s): "¡Feliz Primavera! en 9:59" ----
   Cuelga del borde de abajo del header como un banderín, centrado (el JS le pone el `top` con
   la altura real del header, que cambia entre escritorio y celular). z-index 15000: por encima del header
   (9995), chat (9990) y popovers (hasta 10021), por debajo de la capa .finale (20000). No
   intercepta clicks (pointer-events: none): no tiene controles y la gente sigue trabajando abajo. */
.finale-aviso {
  --tinta: #1b1b1b;
  --papel: #fffdf6;
  --hoja: #43674c;
  --hoja-tinta: #253b2a;
  --lima: #d9ec9a;
  position: fixed; top: 0; left: 50%; z-index: 15000;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 8px 14px 9px;
  background: var(--papel); color: var(--tinta);
  border: 3px solid var(--tinta);
  box-shadow: 4px 4px 0 var(--hoja);
  font-family: 'Press Start 2P', monospace;
  white-space: nowrap;
  pointer-events: none;
  animation: finale-aviso-baja .35s steps(3) both;
}
.finale-aviso[hidden] { display: none; }
.finale-aviso-flor { width: 18px; height: 24px; flex: none; }
.finale-aviso-flor svg { width: 100%; height: 100%; display: block; }
.finale-aviso-texto { font-size: 9px; color: var(--hoja-tinta); }
.finale-aviso-reloj {
  min-width: 5ch; /* "10:00" y "0:31" ocupan lo mismo: no baila el ancho */
  padding: 4px 6px 3px;
  background: var(--tinta); color: var(--lima);
  font-size: 13px; text-align: right;
  font-variant-numeric: tabular-nums;
}
@keyframes finale-aviso-baja { from { transform: translate(-50%, -110%); } to { transform: translateX(-50%); } }
/* Últimos 30 s: late una vez por segundo, al ritmo del tic tac. */
.finale-aviso--ultimos { background: var(--lima); animation: finale-aviso-late 1s steps(2) infinite; }
.finale-aviso--ultimos .finale-aviso-reloj { background: #e6194b; color: #fff; }
@keyframes finale-aviso-late {
  0% { transform: translateX(-50%) scale(1.07); }
  100% { transform: translateX(-50%) scale(1); }
}
@media (max-width: 420px) {
  .finale-aviso { gap: 8px; padding: 6px 10px 7px; }
  .finale-aviso-flor { width: 15px; height: 20px; }
  .finale-aviso-texto { font-size: 8px; }
  .finale-aviso-reloj { font-size: 11px; }
}

/* ---- Menos movimiento: sin vuelo, sin pétalos, sin letras escalonadas; fundidos simples ---- */
@media (prefers-reduced-motion: reduce) {
  .finale-cielo, .finale-destello { display: none !important; }
  .finale-cuenta, .finale-brote.brotada, .finale-ramo-monio, .finale-cantero-flor { animation: none; }
  .finale-brote.brotada { transform: none; }
  .finale[data-fase='blum'] .finale-letra { animation: none; }
  .finale[data-fase='blum'] .finale-titulo,
  .finale:is([data-fase='ramo'], [data-fase='cierre']) .finale-titulo,
  .finale-ramo, .finale-cierre { animation: finale-funde .6s ease-out both; }
  .finale-ramo-tallo { animation: none; }
  .finale-papel { animation: finale-funde .4s ease-out both; }
  .finale-tarjeta-reloj { animation: none; transform: none; }
  .finale-ramo-flor { transition: none; }
  .finale::before, .finale-vineta, .finale--saliendo { transition: none; }
  .finale-aviso, .finale-aviso--ultimos { animation: none; }
}