/* ============================================
   Base
   ============================================ */
[x-cloak] { display: none !important; }

html {
  scroll-behavior: smooth;
}

/* ============================================
   Nav Card Animations
   ============================================ */
.nav-card {
  transition: transform 0.35s cubic-bezier(.16, 1, .3, 1),
              opacity 0.35s cubic-bezier(.16, 1, .3, 1);
}

.nav-card.exit-yes {
  transform: translateX(120%) rotate(8deg);
  opacity: 0;
  pointer-events: none;
}

.nav-card.exit-no {
  transform: translateX(-120%) rotate(-8deg);
  opacity: 0;
  pointer-events: none;
}

.nav-card.enter {
  animation: cardEnter 0.4s cubic-bezier(.16, 1, .3, 1) forwards;
}

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

/* ============================================
   Answer Button Animations
   ============================================ */
.answer-btn {
  transition: all 0.15s cubic-bezier(.16, 1, .3, 1);
}

.answer-btn:active {
  transform: scale(0.94);
}

.answer-btn.selected {
  animation: selectPop 0.3s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes selectPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ============================================
   Nav Button Animations
   ============================================ */
.nav-btn {
  transition: all 0.15s cubic-bezier(.16, 1, .3, 1);
}

.nav-btn:hover {
  transform: translateY(-2px);
}

.nav-btn:active {
  transform: translateY(0) scale(0.96);
}

/* ============================================
   Screen Transitions
   ============================================ */
.screen-enter {
  animation: screenFadeUp 0.5s cubic-bezier(.16, 1, .3, 1) forwards;
}

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

/* ============================================
   Loading Dots
   ============================================ */
.loading-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  height: 24px;
}

.loading-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #496EA6;
  animation: loadBounce 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes loadBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.3;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================
   Progress Bar Animation
   ============================================ */
.progress-fill {
  transition: width 0.5s cubic-bezier(.16, 1, .3, 1);
}

/* ============================================
   Check Item Hover
   ============================================ */
.check-item {
  transition: box-shadow 0.15s cubic-bezier(.16, 1, .3, 1);
}

.check-item:hover {
  box-shadow: 0 4px 16px rgba(73, 110, 166, 0.1);
}

/* ============================================
   Tab Indicator
   ============================================ */
.tab-btn {
  transition: all 0.15s cubic-bezier(.16, 1, .3, 1);
}

/* ============================================
   Result Score Glow
   ============================================ */
.score-glow {
  text-shadow: 0 0 40px rgba(73, 110, 166, 0.15);
}

/* ============================================
   SVG Check Animation
   ============================================ */
.check-draw {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: drawCheck 0.5s cubic-bezier(.16, 1, .3, 1) 0.1s forwards;
}

@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

/* ============================================
   Nav Result Fade
   ============================================ */
.result-enter {
  animation: resultFadeIn 0.6s cubic-bezier(.16, 1, .3, 1) forwards;
}

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

/* ============================================
   Focus Badge Pulse
   ============================================ */
.focus-pulse {
  animation: focusPulse 2s ease-in-out infinite;
}

@keyframes focusPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .nav-card { transition: none; }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
  body {
    background: white !important;
    font-size: 11pt;
  }

  .no-print,
  header,
  .tab-btn,
  button {
    display: none !important;
  }

  .print-area {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .print-show {
    display: block !important;
  }

  canvas {
    max-width: 280px !important;
    max-height: 280px !important;
  }

  * {
    box-shadow: none !important;
  }
}