/* =============================================================================
   RUTINITAS — CELEBRACIÓN DE COMPLETITUD
   =============================================================================
   El momento clave del producto. Secuencia en 4 fases, orquestada por
   js/celebrate.js mediante el atributo `data-phase`:

     1. slam    — dos bloques planos (superior e inferior) bajan y suben hasta
                  encontrarse exactamente en el medio de la pantalla
     2. impacto — la junta destella y toda la escena tiembla una vez
     3. burst   — los bloques salen despedidos y explota el confetti
     4. star    — la estrella entra con rebote sobre el nombre de la tarea

   Reglas de forma (v2, después de la revisión):
     · Los bloques son de COLOR PLANO. Sin rayado, sin cebra, sin degradé.
     · El canto es RECTO. Nada de dientes ni sierra.
     · En el medio NO hay nada más que la junta: una línea de luz que destella
       en el impacto y se apaga. Se eliminó la capa de bandas de colores.

   Con `prefers-reduced-motion` la secuencia se reduce a un fundido y la
   estrella aparece sin rebote (ver el bloque final del archivo).
   ============================================================================= */

.rt-celebrate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  overflow: hidden;
  background: transparent;
}
.rt-celebrate[data-open='true'] { display: grid; }

.rt-cel-veil {
  position: absolute;
  inset: 0;
  background: rgba(61, 50, 34, 0.74);
  opacity: 0;
  transition: opacity var(--rt-dur) var(--rt-ease);
}
.rt-celebrate[data-open='true'] .rt-cel-veil { opacity: 1; }

/* ── Escena: contiene los dos bloques y la junta ─────────────────────────── */
.rt-cel-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Los dos bloques ─────────────────────────────────────────────────────── */
.rt-cel-slab {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  will-change: transform;
}
.rt-cel-slab.top {
  top: 0;
  background: var(--rt-franja-tint);   /* pastel de la franja */
  transform: translateY(-101%);
}
.rt-cel-slab.bottom {
  bottom: 0;
  background: var(--rt-franja);        /* el vivo de la franja */
  transform: translateY(101%);
}

/* Fase 1 — entran y se encuentran al medio */
.rt-celebrate[data-phase='slam'] .rt-cel-slab.top,
.rt-celebrate[data-phase='impacto'] .rt-cel-slab.top {
  animation: rt-slam-top 0.34s cubic-bezier(0.66, 0, 0.24, 1) forwards;
}
.rt-celebrate[data-phase='slam'] .rt-cel-slab.bottom,
.rt-celebrate[data-phase='impacto'] .rt-cel-slab.bottom {
  animation: rt-slam-bottom 0.34s cubic-bezier(0.66, 0, 0.24, 1) forwards;
}
@keyframes rt-slam-top {
  from { transform: translateY(-101%); }
  to   { transform: translateY(0); }
}
@keyframes rt-slam-bottom {
  from { transform: translateY(101%); }
  to   { transform: translateY(0); }
}

/* Fase 3 — salen despedidos, rectos, sin rotación */
.rt-celebrate[data-phase='burst'] .rt-cel-slab.top,
.rt-celebrate[data-phase='star'] .rt-cel-slab.top {
  animation: rt-eject-top 0.46s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.rt-celebrate[data-phase='burst'] .rt-cel-slab.bottom,
.rt-celebrate[data-phase='star'] .rt-cel-slab.bottom {
  animation: rt-eject-bottom 0.46s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes rt-eject-top {
  from { transform: translateY(0); }
  to   { transform: translateY(-101%); }
}
@keyframes rt-eject-bottom {
  from { transform: translateY(0); }
  to   { transform: translateY(101%); }
}

/* ── Fase 2 — la junta destella y la escena tiembla ──────────────────────── */
.rt-cel-seam {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.125rem;
  margin-top: -0.0625rem;
  background: var(--rt-franja-soft);
  opacity: 0;
  will-change: transform, opacity;
}
.rt-celebrate[data-phase='impacto'] .rt-cel-seam {
  animation: rt-seam 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes rt-seam {
  0%   { opacity: 0; transform: scaleY(1); }
  18%  { opacity: 1; transform: scaleY(7); }
  55%  { opacity: 0.75; transform: scaleY(2); }
  100% { opacity: 0; transform: scaleY(1); }
}

.rt-celebrate[data-phase='impacto'] .rt-cel-stage {
  animation: rt-impacto 0.26s cubic-bezier(0.3, 0, 0.2, 1);
}
@keyframes rt-impacto {
  0%   { transform: translate3d(0, 0, 0); }
  22%  { transform: translate3d(0, 0.55rem, 0); }
  48%  { transform: translate3d(0, -0.3rem, 0); }
  74%  { transform: translate3d(0, 0.14rem, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ── Tarjeta central + estrella ──────────────────────────────────────────── */
.rt-cel-card {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--rt-space-3);
  padding: var(--rt-space-6) var(--rt-space-7);
  width: min(26rem, 88vw);
  text-align: center;
  border-radius: var(--rt-radius-lg);
  background: var(--theme-bg-elevated);
  color: var(--theme-text);
  box-shadow: var(--rt-elev-3);
  opacity: 0;
  transform: scale(0.9);
}
.rt-celebrate[data-phase='burst'] .rt-cel-card,
.rt-celebrate[data-phase='star'] .rt-cel-card {
  animation: rt-card-in 0.4s var(--rt-ease-bounce) forwards;
}
@keyframes rt-card-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.rt-cel-card h2 { font-size: var(--rt-text-2xl); }
.rt-cel-card p { margin: 0; color: var(--theme-text-secondary); }

.rt-cel-star {
  position: relative;
  display: grid;
  place-items: center;
  width: 7rem;
  height: 7rem;
  color: var(--rt-estrella);
  opacity: 0;
  transform: scale(0.2) rotate(-40deg);
}
.rt-cel-star svg { width: 100%; height: 100%; filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.25)); }
.rt-cel-star::before {
  content: '';
  position: absolute;
  inset: -1.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rt-estrella) 0%, transparent 68%);
  opacity: 0.32;
}
.rt-celebrate[data-phase='star'] .rt-cel-star {
  animation: rt-star-in 0.62s var(--rt-ease-bounce) forwards;
}
@keyframes rt-star-in {
  0%   { opacity: 0; transform: scale(0.2) rotate(-40deg); }
  60%  { opacity: 1; transform: scale(1.18) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ── Confetti ────────────────────────────────────────────────────────────── */
.rt-cel-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.rt-confetti-bit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.55rem;
  height: 0.9rem;
  border-radius: 0.125rem;
  will-change: transform, opacity;
  animation: rt-confetti-fly 1.15s cubic-bezier(0.15, 0.6, 0.3, 1) forwards;
}
@keyframes rt-confetti-fly {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(0.6); opacity: 1; }
  70%  { opacity: 1; }
  100% {
    transform:
      translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
      rotate(var(--spin))
      scale(1);
    opacity: 0;
  }
}

/* ── Modo reducido: el tutor apagó la animación completa en Ajustes ─────── */
.rt-celebrate[data-reducido='true'] .rt-cel-stage,
.rt-celebrate[data-reducido='true'] .rt-cel-confetti { display: none; }
.rt-celebrate[data-reducido='true'] .rt-cel-card {
  opacity: 1;
  transform: none;
  animation: rt-card-in 0.28s var(--rt-ease) forwards;
}

/* ── Micro-celebración en línea (tilde de una tarea suelta) ──────────────── */
@keyframes rt-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.rt-mark.is-popping { animation: rt-pop 0.42s var(--rt-ease-bounce); }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rt-cel-stage, .rt-cel-confetti { display: none; }
  .rt-cel-card { opacity: 1; transform: none; animation: none; }
  .rt-cel-star { opacity: 1; transform: none; animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPALDO PARA NAVEGADORES ANTERIORES A 2023
   Arriba cada valor quedó como color fijo, calculado con la misma
   matemática oklab que usa el navegador. Acá se restituye la mezcla para
   los que la entienden, así cambiar un token sigue arrastrando a sus
   derivados. Un navegador viejo ignora este bloque entero y se queda con
   los fijos: la misma pantalla, sin nada transparente.
   Generado desde scripts/colores.cjs · el gate es scripts/compat.cjs
   ═══════════════════════════════════════════════════════════════════════ */
@supports (color: color-mix(in oklab, red 50%, blue)) {
  .rt-cel-veil {
    background: color-mix(in oklab, var(--rt-tinta) 74%, transparent);
  }
}