/* =============================================================================
   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: color-mix(in oklab, var(--rt-tinta) 74%, transparent);
  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; }
}