/* MacWP EOY Challenge - Animations & Transitions */

/* ===== COZY ANIMATIONS ===== */

/* Gentle spin for loading */
@keyframes gentle-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(90deg) scale(0.95);
  }

  50% {
    transform: rotate(180deg) scale(1);
  }

  75% {
    transform: rotate(270deg) scale(1.05);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Gentle, warm animations - not jarring */
@keyframes gentle-up {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes gentle-down {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(8px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes gentle-bounce {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* Position change animations */
.position-up {
  color: var(--success-green);
  animation: gentle-up 0.6s var(--ease-cozy);
}

.position-down {
  color: var(--error-red);
  animation: gentle-down 0.6s var(--ease-cozy);
}

.position-same {
  color: var(--text-mist);
}

/* ===== WICHTEL ASSIGNMENT ANIMATIONS ===== */

/* Lottery drawing animation */
@keyframes lottery-shake {

  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(-2deg) scale(1.02);
  }

  75% {
    transform: rotate(2deg) scale(0.98);
  }
}

@keyframes lottery-glow {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(212, 167, 68, 0.3);
    border-color: var(--prize-gold);
  }

  50% {
    box-shadow: 0 0 25px rgba(212, 167, 68, 0.6);
    border-color: var(--prize-gold-hover);
  }
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

.lottery-card {
  animation: lottery-shake 0.8s ease-in-out infinite;
}

.lottery-card.revealing {
  animation: lottery-glow 1.5s ease-in-out;
}

.confetti {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--prize-gold);
  pointer-events: none;
  z-index: 1000;
  animation: confetti-fall 3s linear infinite;
}

.confetti:nth-child(odd) {
  background: var(--warm-red);
  animation-delay: 0.5s;
}

.confetti:nth-child(3n) {
  background: var(--primary-green);
  animation-delay: 1s;
}

/* ===== PRIZE OWNERSHIP ANIMATIONS ===== */

/* Crown animation for prize owner */
@keyframes crown-float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes crown-entrance {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }

  70% {
    transform: scale(1.2) rotate(10deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.prize-crown {
  animation: crown-float 2s ease-in-out infinite;
}

.prize-crown.new-owner {
  animation: crown-entrance 0.8s var(--ease-warm);
}

/* Prize ownership transfer */
@keyframes ownership-transfer {
  0% {
    background: var(--bg-winter);
    border-color: var(--border-frost);
  }

  50% {
    background: var(--prize-gold-light);
    border-color: var(--prize-gold);
    transform: scale(1.02);
  }

  100% {
    background: var(--prize-owner-highlight);
    border-color: var(--prize-gold);
    transform: scale(1);
  }
}

.ownership-change {
  animation: ownership-transfer 1s var(--ease-warm);
}

/* ===== LEADERBOARD ANIMATIONS ===== */

/* Score counting animation */
@keyframes score-count {
  0% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.score-update {
  animation: score-count 0.8s var(--ease-cozy);
}

/* Rank change slide */
@keyframes slide-up {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-down {
  0% {
    transform: translateY(-40px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.rank-up {
  animation: slide-up 0.5s var(--ease-warm);
}

.rank-down {
  animation: slide-down 0.5s var(--ease-warm);
}

/* ===== LOADING ANIMATIONS ===== */

/* Winter spinner for loading states */
@keyframes winter-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse-glow {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

.winter-spinner {
  animation: winter-spin 2s linear infinite;
}

.loading-pulse {
  animation: pulse-glow 1.5s ease-in-out infinite;
}

/* ===== UI STATE TRANSITIONS ===== */

/* Smooth show/hide for sections */
.fade-in {
  animation: fadeIn 0.5s var(--ease-warm);
}

.fade-out {
  animation: fadeOut 0.3s var(--ease-cozy);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Card hover animations - Disabled for static design */
.winter-card {
  transition: box-shadow var(--duration-normal) var(--ease-cozy);
}

.wichtel-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-prize-glow), var(--shadow-cozy-lg);
}

/* ===== NOTIFICATION ANIMATIONS ===== */

/* Toast notifications from admin broadcasts */
@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.toast-notification {
  position: fixed;
  top: 100px;
  right: var(--space-6);
  background: var(--winter-gradient);
  border: 2px solid var(--primary-green);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--shadow-cozy-lg);
  z-index: 1500;
  animation: toast-slide-in 0.4s var(--ease-warm);
}

.toast-notification.removing {
  animation: toast-slide-out 0.3s var(--ease-cozy);
}

/* ===== FORM FEEDBACK ANIMATIONS ===== */

/* Input validation feedback */
@keyframes shake-error {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

.form-input.error {
  animation: shake-error 0.4s ease-in-out;
  border-color: var(--error-red);
}

.form-input.success {
  border-color: var(--success-green);
  animation: gentle-bounce 0.6s var(--ease-cozy);
}

/* ===== GAMIFICATION MICRO-INTERACTIONS ===== */

/* Button interactions */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:active::before {
  width: 300px;
  height: 300px;
}

/* Special festive button effect */
.btn-festive {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ===== ACCESSIBILITY & REDUCED MOTION ===== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .winter-spinner {
    animation: none;
  }

  .crown-pulse,
  .gradient-shift {
    animation: none;
  }
}

/* High contrast support */
@media (prefers-contrast: high) {
  .winter-card::before {
    opacity: 0.2;
  }

  .winter-card {
    border-width: 2px;
  }
}