/*
 * Celebration Experience v2 — Academy Components
 * academy/components/celebration-v2.css
 * Sprint: S-89 · Version: 1.0.0-s89
 *
 * Companion to celebration.css (S-64 · FROZEN — do not modify).
 * Provides: enhanced overlay animations · per-type accents
 *           in-page micro-animations · queue indicator
 *           dashboard celebration banner · reduced-motion support.
 *
 * Load AFTER celebration.css:
 *   <link rel="stylesheet" href="../components/celebration.css">
 *   <link rel="stylesheet" href="../components/celebration-v2.css">
 */

/* ============================================================ */
/* Keyframes                                                    */
/* ============================================================ */

@keyframes celV2Entrance {
  0%   { opacity: 0; transform: scale(0.88) translateY(24px); }
  65%  { transform: scale(1.03) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes celV2Exit {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.92) translateY(16px); }
}

@keyframes celV2IconPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}

@keyframes tgsMicroUnlock {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  40%  { box-shadow: 0 0 0 14px rgba(212,175,55,0.38); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}

@keyframes tgsStampDrop {
  0%   { opacity: 0; transform: scale(1.5) rotate(-10deg); }
  60%  { opacity: 1; transform: scale(0.95) rotate(3deg); }
  80%  { transform: scale(1.03) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes tgsDestArrive {
  0%   { opacity: 0.5; transform: translateY(-8px) scale(0.96); }
  100% { opacity: 1;   transform: translateY(0)    scale(1); }
}

@keyframes tgsVocabPulse {
  0%, 100% { color: inherit; }
  50%       { color: #D4AF37; transform: scale(1.06); }
}

@keyframes tgsBannerSlide {
  0%   { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================ */
/* Enhanced overlay — stacks on top of celebration.css base     */
/* ============================================================ */

#tgs-celebration-overlay {
  animation: celV2Entrance 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

#tgs-celebration-overlay .tgs-celebration-inner {
  border: 1.5px solid rgba(212,175,55,0.38) !important;
  box-shadow:
    0 28px 72px rgba(0,0,0,0.65),
    0 0 48px rgba(212,175,55,0.10) !important;
  backdrop-filter: blur(16px);
}

#tgs-celebration-overlay .tgs-celebration-icon {
  animation: celV2IconPulse 0.72s ease 0.3s both;
  display: block;
}

/* ── Per-type colour accents ── */

.tgs-celebration--lesson .tgs-celebration-inner {
  border-color: rgba(212,175,55,0.42) !important;
  box-shadow:
    0 28px 72px rgba(0,0,0,0.65),
    0 0 48px rgba(212,175,55,0.14) !important;
}

.tgs-celebration--ks .tgs-celebration-inner {
  border-color: rgba(76,175,128,0.42) !important;
  box-shadow:
    0 28px 72px rgba(0,0,0,0.65),
    0 0 48px rgba(76,175,128,0.16) !important;
}

.tgs-celebration--streak .tgs-celebration-inner {
  border-color: rgba(255,120,40,0.42) !important;
  box-shadow:
    0 28px 72px rgba(0,0,0,0.65),
    0 0 48px rgba(255,120,40,0.16) !important;
}

/* ============================================================ */
/* In-page micro-animations                                     */
/* ============================================================ */

/* Achievement unlock · subtle gold ring pulse */
.tgs-micro-unlock {
  animation: tgsMicroUnlock 0.72s ease forwards;
}

/* Passport stamp placement */
.tgs-stamp-drop {
  animation: tgsStampDrop 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Journey destination arrival */
.tgs-dest-arrive {
  animation: tgsDestArrive 0.48s ease forwards;
}

/* Vocabulary milestone count */
.tgs-vocab-pulse {
  animation: tgsVocabPulse 0.6s ease;
  display: inline-block;
}

/* ============================================================ */
/* Dashboard celebration banner                                 */
/* ============================================================ */

#dh-celebration-banner {
  animation: tgsBannerSlide 0.36s ease forwards;
  margin-bottom: 0.5rem;
}

.dh-cel-banner {
  background: linear-gradient(
    135deg,
    rgba(30,61,47,0.55) 0%,
    rgba(6,42,74,0.55) 100%
  );
  border: 1px solid rgba(76,175,128,0.38);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.dh-cel-banner-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.dh-cel-banner-text {
  flex: 1;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.5;
  margin: 0;
}

.dh-cel-banner-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.dh-cel-banner-close:hover,
.dh-cel-banner-close:focus-visible {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.08);
}

/* ============================================================ */
/* Streak milestone micro-animation target                      */
/* ============================================================ */

.sk-streak-num.tgs-micro-unlock {
  display: inline-block;
}

/* ============================================================ */
/* Reduced-motion accessibility                                 */
/* ============================================================ */

@media (prefers-reduced-motion: reduce) {
  #tgs-celebration-overlay {
    animation: none !important;
    transition: none !important;
  }

  #tgs-celebration-overlay .tgs-celebration-inner {
    animation: none !important;
    transition: none !important;
  }

  #tgs-celebration-overlay .tgs-celebration-icon {
    animation: none !important;
  }

  .tgs-micro-unlock,
  .tgs-stamp-drop,
  .tgs-dest-arrive,
  .tgs-vocab-pulse,
  #dh-celebration-banner,
  .tgs-cel-queue-dot {
    animation: none !important;
    transition: none !important;
  }
}

/*
 * celebration-v2.css · v1.0.0-s89 · S-89 Celebration Experience v2
 * Companion to: celebration.css (S-64 · FROZEN)
 * Zero external dependencies · Inline-safe keyframes · AMD-001 compliant
 */