/* ============================================================
   animations.css — Animace a přechody pro Litera v2
   Subtilní, čisté, nedistracting
   ============================================================ */

/* ── Page Enter ── */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-enter {
  animation: pageEnter 0.3s ease-out forwards;
}

/* ── Sheet/Modal animations ── */
@keyframes sheetSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── Test feedback ── */
@keyframes bounceIn {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

/* ── Tab bar active ── */
@keyframes tabPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1.1); }
}

/* ── Progress bar shimmer ── */
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}

.progress-fill {
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: shimmer 2s infinite;
}

/* ── Floating ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── Confetti ── */
@keyframes confettiFall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ── XP toast spring ── */
@keyframes toastSpring {
  0%   { transform: translateX(120%) scale(0.9); opacity: 0; }
  60%  { transform: translateX(-8%) scale(1.03); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

.xp-toast.show {
  animation: toastSpring 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Result panel animations ── */
@keyframes gradeSpring {
  0%   { opacity: 0; transform: translateY(-30px) scale(0.7); }
  60%  { opacity: 1; transform: translateY(4px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes countUp {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes resultFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Widget toggle ── */
@keyframes widgetPanelIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.widget-panel-enter {
  animation: widgetPanelIn 0.2s ease-out forwards;
}

/* ── Indeterminate loading bar ── */
@keyframes indeterminate {
  0%   { left: -40%; width: 40%; }
  60%  { left: 60%;  width: 40%; }
  100% { left: 110%; width: 10%; }
}

.progress-fill.indeterminate {
  position: relative;
  width: 100% !important;
  background: var(--blue-400);
  overflow: visible;
}

.progress-fill.indeterminate::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  background: var(--blue-600);
  border-radius: inherit;
  animation: indeterminate 1.4s ease-in-out infinite;
}

.progress-fill.indeterminate::after { display: none; }

.loading-bar-wrap {
  width: 100%;
  max-width: 200px;
  margin: var(--sp-4) auto 0;
}

/* ── Level-up overlay ── */
@keyframes levelUpIn {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes levelUpOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.15); }
}

.levelup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 58, 138, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.levelup-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--sp-10) var(--sp-8);
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: levelUpIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.levelup-card.out {
  animation: levelUpOut 0.35s ease-in forwards;
}

.levelup-emoji {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: var(--sp-4);
}

.levelup-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-2);
}

.levelup-level {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--blue-900);
  margin-bottom: var(--sp-2);
}

.levelup-sub {
  font-size: var(--text-sm);
  color: var(--color-muted);
}


@keyframes sheetSlideDown {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}

@keyframes modalFadeOut {
  to { opacity: 0; transform: scale(0.94); }
}

@keyframes recordPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.cal-day.active.record-jump {
  animation: recordPulse 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Purchase overlay animation ── */
@keyframes purchaseOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes purchaseOverlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes purchaseIconPop {
  0%   { transform: scale(0) rotate(-18deg); opacity: 0; }
  50%  { transform: scale(1.22) rotate(6deg); opacity: 1; }
  75%  { transform: scale(0.93) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes purchaseParticle {
  0%   { transform: translate(0, 0) scale(1.3); opacity: 1; }
  55%  { opacity: 1; }
  100% { transform: translate(var(--ptx), var(--pty)) scale(0.1); opacity: 0; }
}

@keyframes purchaseLabelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Staggered card entrance ── */
.stagger-enter {
  opacity: 0;
  animation: pageEnter 0.3s ease-out forwards;
}

.stagger-enter:nth-child(1) { animation-delay: 0.03s; }
.stagger-enter:nth-child(2) { animation-delay: 0.06s; }
.stagger-enter:nth-child(3) { animation-delay: 0.09s; }
.stagger-enter:nth-child(4) { animation-delay: 0.12s; }
.stagger-enter:nth-child(5) { animation-delay: 0.15s; }
.stagger-enter:nth-child(6) { animation-delay: 0.18s; }
.stagger-enter:nth-child(7) { animation-delay: 0.21s; }
.stagger-enter:nth-child(8) { animation-delay: 0.24s; }