/* ============================================================
   KỸ NĂNG SỐNG — Animations & Micro-interactions
   ============================================================ */

/* ─── Page Transitions ─────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { transform: scale(0.9);  opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes scaleOut {
  from { transform: scale(1);    opacity: 1; }
  to   { transform: scale(0.92); opacity: 0; }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-40px); }
}

@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

/* ─── Smooth Screen Transitions ────────────────────────── */
.screen {
  will-change: opacity, transform;
}

.screen.active {
  animation: fadeIn 0.28s cubic-bezier(.4,0,.2,1);
}

/* Directional enter */
.screen.screen-enter.screen-enter-forward {
  animation: slideInRight 0.28s cubic-bezier(.4,0,.2,1);
}
.screen.screen-enter.screen-enter-backward {
  animation: slideInLeft 0.28s cubic-bezier(.4,0,.2,1);
}

/* Directional exit */
.screen.screen-exit.screen-exit-forward {
  animation: slideOutLeft 0.28s cubic-bezier(.4,0,.2,1) forwards;
}
.screen.screen-exit.screen-exit-backward {
  animation: slideOutRight 0.28s cubic-bezier(.4,0,.2,1) forwards;
}

/* ─── Ripple ───────────────────────────────────────────── */
@keyframes ripple {
  to { transform: scale(3.5); opacity: 0; }
}

/* ─── Spin (Loader) ────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Loading Orbit ────────────────────────────────────── */
@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}
@keyframes planetPulse {
  0%,100% { transform: scale(1); opacity: 0.8; }
  50%     { transform: scale(1.3); opacity: 1; }
}

/* ─── Pulse (Map node) ─────────────────────────────────── */
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0   0 rgba(124,77,255,0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(124,77,255,0); }
}

/* ─── Twinkle (landing stars) ─────────────────────────── */
@keyframes twinkle {
  0%,100% { opacity: 0.12; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.4); }
}

/* ─── Bounce (hero scroll arrow) ──────────────────────── */
@keyframes bounce {
  0%,20%,50%,80%,100% { transform: translateX(-50%) translateY(0); }
  40%                  { transform: translateX(-50%) translateY(-12px); }
  60%                  { transform: translateX(-50%) translateY(-6px); }
}

/* ─── Float (decorations) ─────────────────────────────── */
@keyframes hfloat {
  0%,100% { transform: translate(0, 0) rotate(0deg);    opacity: 0.3; }
  50%      { transform: translate(15px,-18px) rotate(12deg); opacity: 0.6; }
}

/* ─── Sway (map decorations) ──────────────────────────── */
@keyframes sway {
  0%,100% { transform: translateY(0)   rotate(-4deg); }
  50%      { transform: translateY(-6px) rotate(4deg); }
}

/* ─── Confetti fall (enhanced) ─────────────────────────── */
@keyframes confettiFall {
  0% {
    transform: translate(0, -30px) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(-120px + 240px * var(--r, 0.5)),
      105vh
    ) rotate(1080deg) scale(0.5);
    opacity: 0;
  }
}

@keyframes confettiSpin {
  0% { transform: rotateX(0) rotateY(0); }
  100% { transform: rotateX(360deg) rotateY(180deg); }
}

/* ─── Completion pop ───────────────────────────────────── */
@keyframes popIn {
  0%   { transform: scale(0)   rotate(-15deg); }
  60%  { transform: scale(1.3) rotate(5deg); }
  100% { transform: scale(1)   rotate(0deg); }
}

/* ─── Star pop (enhanced burst) ────────────────────────── */
@keyframes starPop {
  0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
  50%  { transform: scale(1.4) rotate(10deg); opacity: 1; }
  70%  { transform: scale(0.9) rotate(-3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ─── Star shimmer glow ────────────────────────────────── */
@keyframes starGlow {
  0%,100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 12px rgba(255,215,0,0.6)); }
}

/* ─── Podium Rise ──────────────────────────────────────── */
@keyframes podiumRise {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}

.lb-podium-block { animation: podiumRise 0.6s cubic-bezier(.4,0,.2,1) backwards; }
.lb-podium-item:nth-child(1) .lb-podium-block { animation-delay: 0.1s; }
.lb-podium-item:nth-child(2) .lb-podium-block { animation-delay: 0s; }
.lb-podium-item:nth-child(3) .lb-podium-block { animation-delay: 0.2s; }

/* Lesson cards: no GPU-layer promotion — removed will-change/contain
   to prevent black compositing layers during fast scroll */

/* Map nodes: no stagger — prevents invisible-node-on-scroll */
.map-node { transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }

/* ─── LB item stagger ──────────────────────────────────── */
.lb-item {
  animation: fadeInUp 0.35s cubic-bezier(.4,0,.2,1) backwards;
}
.lb-item:nth-child(1) { animation-delay: 0.05s; }
.lb-item:nth-child(2) { animation-delay: 0.10s; }
.lb-item:nth-child(3) { animation-delay: 0.15s; }
.lb-item:nth-child(n+4){ animation-delay: 0.20s; }

/* ─── Group card stagger ───────────────────────────────── */
.group-card {
  animation: fadeInUp 0.4s cubic-bezier(.4,0,.2,1) backwards;
}
.group-card:nth-child(1) { animation-delay: 0.05s; }
.group-card:nth-child(2) { animation-delay: 0.10s; }
.group-card:nth-child(3) { animation-delay: 0.15s; }
.group-card:nth-child(4) { animation-delay: 0.20s; }
.group-card:nth-child(n+5){ animation-delay: 0.25s; }

/* ─── Price card ───────────────────────────────────────── */
.price-card {
  animation: fadeInUp 0.45s cubic-bezier(.4,0,.2,1) backwards;
}
.price-card:nth-child(1) { animation-delay: 0.1s; }
.price-card:nth-child(2) { animation-delay: 0.2s; }
.price-card:nth-child(3) { animation-delay: 0.3s; }



@keyframes shimmer {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── Hover shimmer on cards ───────────────────────────── */
.lesson-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.04) 50%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 1;
  border-radius: var(--radius);
}
.lesson-card:hover::before { opacity: 1; }

/* ─── Glow effect for completed map nodes ─────────────── */
.map-node.completed .map-node-inner {
  animation: completedGlow 3s ease-in-out infinite;
}

@keyframes completedGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,229,160,0.3); }
  50%      { box-shadow: 0 0 20px 6px rgba(0,229,160,0.15); }
}

/* ─── Toast slide in ───────────────────────────────────── */
.toast { animation: slideInRight 0.35s cubic-bezier(.4,0,.2,1); }

/* ─── Settings panel ───────────────────────────────────── */
.settings-panel { transition: right 0.35s cubic-bezier(.4,0,.2,1); }

/* ─── Modal scale in ───────────────────────────────────── */
.auth-box,
.modal-box,
.completion-content {
  animation: scaleIn 0.3s cubic-bezier(.4,0,.2,1);
}

/* ─── Skeleton loading effect ─────────────────────────── */
@keyframes skeletonShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-card2) 25%,
    var(--c-border) 50%,
    var(--bg-card2) 75%
  );
  background-size: 800px 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: 8px;
}

/* ─── Skeleton Card CSS ────────────────────────────────── */
.skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  animation: fadeIn 0.3s ease backwards;
}
.skeleton-card:nth-child(2) { animation-delay: 0.05s; }
.skeleton-card:nth-child(3) { animation-delay: 0.1s; }
.skeleton-card:nth-child(4) { animation-delay: 0.15s; }

.skeleton-thumb {
  height: 100px;
  border-radius: 0 !important;
}
.skeleton-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skeleton-line {
  height: 14px;
  width: 100%;
}
.skeleton-line.short { width: 50%; height: 10px; }
.skeleton-line.stars { width: 40%; height: 12px; }

/* ─── LB Skeleton ──────────────────────────────────────── */
.lb-item-skeleton {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 6px;
  background: var(--bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  animation: fadeIn 0.3s ease backwards;
}
.lb-item-skeleton:nth-child(2) { animation-delay: 0.05s; }
.lb-item-skeleton:nth-child(3) { animation-delay: 0.1s; }
.lb-item-skeleton:nth-child(4) { animation-delay: 0.15s; }

/* ─── USP item hover ───────────────────────────────────── */
.usp-item {
  padding: 20px 12px;
  border-radius: var(--radius);
  transition: transform 0.2s, background 0.2s;
}
.usp-item:hover {
  transform: translateY(-4px);
  background: rgba(124,77,255,0.06);
}

/* ─── Nav star badge pulse ───────────────────────────────*/
@keyframes starBadgePulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.nav-stars.updated {
  animation: starBadgePulse 0.4s ease;
}

/* ─── Loading Overlay ──────────────────────────────────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.loading-overlay.active {
  display: flex;
  opacity: 1;
}
.loading-overlay-content {
  text-align: center;
  color: #fff;
}
.loading-overlay-content p {
  margin-top: 16px;
  font-size: 14px;
  color: var(--c-text2);
}
.loading-orbit {
  width: 48px; height: 48px;
  border: 3px solid var(--c-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: orbitSpin 0.8s linear infinite;
  margin: 0 auto;
  position: relative;
}
.loading-planet {
  position: absolute;
  top: -4px; right: -4px;
  width: 10px; height: 10px;
  background: var(--c-accent);
  border-radius: 50%;
  animation: planetPulse 1s ease infinite;
}

/* ─── Error State ──────────────────────────────────────── */
.error-state {
  text-align: center;
  padding: 48px 20px;
  animation: fadeIn 0.3s ease;
}
.error-icon {
  font-size: 56px;
  margin-bottom: 12px;
  animation: popIn 0.4s ease;
}
.error-msg {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--c-text);
}
.error-hint {
  font-size: 13px;
  color: var(--c-muted);
  margin-bottom: 16px;
}
.error-retry-btn {
  margin: 0 auto;
}

/* ─── Empty State ──────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  animation: fadeIn 0.3s ease;
}
.empty-state.small {
  padding: 24px 16px;
}
.empty-icon {
  font-size: 56px;
  margin-bottom: 12px;
  animation: popIn 0.5s ease;
}
.empty-state.small .empty-icon {
  font-size: 36px;
}
.empty-msg {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.6;
}

/* ─── Offline Indicator ────────────────────────────────── */
.offline-indicator {
  position: fixed;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  background: rgba(239, 83, 80, 0.9); /* premium semi-transparent soft red */
  backdrop-filter: blur(12px) saturate(120%);
  color: #fff;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 800;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(239, 83, 80, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: fadeInDown 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
  pointer-events: none;
}

/* ─── Button loading state ─────────────────────────────── */
button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.fa-spin {
  animation: spin 0.8s linear infinite;
}

/* ─── Confetti shapes ──────────────────────────────────── */
.confetti-circle { border-radius: 50%; }
.confetti-rect { border-radius: 1px; }
.confetti-star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ─── Reduce motion preference ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── PWA Install Banner ─────────────────────────────────── */
.pwa-install-banner {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 800;
  width: calc(100% - 32px);
  max-width: 420px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--c-primary);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(124,77,255,0.25), 0 0 0 1px rgba(124,77,255,0.1);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  backdrop-filter: blur(12px);
}
.pwa-install-banner.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.pwa-install-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.pwa-install-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.pwa-install-title {
  font-weight: 800;
  font-size: 14px;
  color: var(--c-text);
}
.pwa-install-sub {
  font-size: 12px;
  color: var(--c-muted);
  margin-top: 2px;
}
.pwa-install-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
}
.pwa-install-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(124,77,255,0.4);
}
.pwa-dismiss-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-card2);
  border: 1px solid var(--c-border);
  color: var(--c-muted);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.pwa-dismiss-btn:hover {
  background: var(--c-border2);
  color: var(--c-text);
}

/* ─── SW Update Banner ────────────────────────────────────── */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateX(-50%) translateY(24px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ─── Premium Button Shine ────────────────────────────── */
@keyframes shine {
  0%   { left: -100%; }
  20%  { left: 100%; }
  100% { left: 100%; }
}

/* ─── Tab Switch Slide ────────────────────────────────── */
@keyframes tabSwitch {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Glow Pulse ───────────────────────────────────────── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(124, 77, 255, 0.4); }
  50%      { box-shadow: 0 0 35px rgba(124, 77, 255, 0.6); }
}