/* WSC Scholar's Quest - Custom Styles */

/* Card flip animation */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 1rem;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* Circular timer */
.timer-circle {
  transform: rotate(-90deg);
}

.timer-circle-bg {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 8;
}

.timer-circle-progress {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease;
}

/* Streak flame animation */
@keyframes flame-flicker {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  25% { transform: scaleY(1.1) scaleX(0.95); }
  50% { transform: scaleY(0.95) scaleX(1.05); }
  75% { transform: scaleY(1.05) scaleX(0.98); }
}

.flame-animate {
  animation: flame-flicker 0.8s ease-in-out infinite;
  display: inline-block;
}

/* Confetti animation */
@keyframes confetti-fall {
  0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
  position: fixed;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confetti-fall 3s ease-in forwards;
  z-index: 100;
  pointer-events: none;
}

/* Button press effect */
.btn-press {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-press:active {
  transform: scale(0.95);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Page transition */
.view-enter {
  animation: fadeSlideIn 0.3s ease-out;
}

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

/* Rapid fire pulse */
@keyframes rapid-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.rapid-fire-pulse {
  animation: rapid-pulse 0.5s ease-in-out infinite;
}

/* Score count up animation */
@keyframes score-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.score-pop {
  animation: score-pop 0.3s ease-out;
}

/* Progress ring animation */
@keyframes progress-fill {
  from { stroke-dashoffset: 283; }
}

.progress-ring-circle {
  transition: stroke-dashoffset 0.8s ease-out;
}

/* Achievement unlock animation */
@keyframes achievement-unlock {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.achievement-unlock {
  animation: achievement-unlock 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Option button states for quiz */
.option-btn {
  transition: all 0.2s ease;
}

.option-btn.selected {
  ring: 3px;
  transform: scale(1.02);
}

.option-btn.correct {
  background-color: #dcfce7 !important;
  border-color: #22c55e !important;
}

.option-btn.incorrect {
  background-color: #fef2f2 !important;
  border-color: #ef4444 !important;
}

.option-btn.missed-correct {
  background-color: #dcfce7 !important;
  border-color: #22c55e !important;
  opacity: 0.7;
}

/* Alpaca mascot states */
.alpaca-default { filter: none; }
.alpaca-happy { filter: hue-rotate(0deg) brightness(1.1); }
.alpaca-thinking { filter: hue-rotate(30deg); }
.alpaca-celebrating { filter: hue-rotate(0deg) brightness(1.2) saturate(1.3); }

/* Swipe hint animation */
@keyframes swipe-hint {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(20px); opacity: 1; }
}

.swipe-hint {
  animation: swipe-hint 2s ease-in-out infinite;
}

/* Nav active indicator */
.nav-item.active {
  color: #6366f1;
}

.nav-item.active::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #6366f1;
  margin: 2px auto 0;
}

/* Hide scrollbar but keep functionality */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Toast notification */
@keyframes toast-in {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

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

.toast-enter {
  animation: toast-in 0.3s ease-out;
}

.toast-exit {
  animation: toast-out 0.3s ease-in forwards;
}