/* Base Resets & Overrides */
html,
body {
  margin: 0;
  padding: 0;
  overscroll-behavior-y: none;
}

h1,
h2,
h3 {
  font-family: theme("fontFamily.heading") !important;
}

/* View Transitions */
.view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(10px);
}

.view.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.view.hidden {
  display: none;
}

/* Task Modal Transitions */
#task-modal.modal-open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* Sophisticated Buttons */
.outline-btn {
  border: 1.5px solid theme("colors.primary");
  color: theme("colors.primary");
  background-color: transparent;
  border-radius: 9999px;
  transition: all 0.3s ease;
}

.outline-btn:hover:not(:disabled) {
  background-color: theme("colors.primary");
  color: theme("colors.background");
}

.outline-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.mcq-btn {
  width: 100%;
  padding: 1.15rem 1.5rem;
  border: 1.5px solid theme("colors.secondary");
  border-radius: 0.75rem;
  text-align: left;
  transition: all 0.2s ease;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.mcq-btn:active:not(:disabled) {
  background-color: theme("colors.secondary");
  color: white;
}

/* Header circular gauge */
.gauge-circle {
  stroke-dasharray: 175.93;
  stroke-dashoffset: 175.93;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Word Search Styles */
.cell-city-blue {
  background-color: #6cabdd !important;
  color: #ffffff !important;
  border-color: #6cabdd !important;
  font-weight: bold;
}

.cell-city-navy {
  background-color: #1c2c5b !important;
  color: #ffffff !important;
  border-color: #1c2c5b !important;
  font-weight: bold;
  transform: scale(1.1);
}

/* Fade In Animation */
.fade-in {
  animation: fadeIn 0.4s ease forwards;
}

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

/* Final Screen Animations */
.anim-float {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.anim-heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite both;
}
@keyframes heartbeat {
  from {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

.anim-sparkle {
  animation: sparkle 2.5s linear infinite;
}
@keyframes sparkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.15) rotate(10deg);
  }
}

/* Target emerging animation */
@keyframes popIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  80% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.dot-pop {
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#bg-sakura {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10;
  pointer-events: none;
}

#result-modal {
  transition: opacity 0.4s ease;
}

#result-modal.modal-open {
  opacity: 1 !important;
  pointer-events: all !important;
}

#result-modal.modal-open > div {
  transform: scale(1) !important;
}

/* Asynchronous Paper Card Floating Animation */
@keyframes paperFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(0.6deg);
  }
}

.paper-card-float {
  animation: paperFloat 4.5s ease-in-out infinite;
}

/* Pause the floating loop smoothly on hover/press to prevent visual jittering */
.paper-card-float:hover {
  animation-play-state: paused;
  transform: translateY(-8px) scale(1.03) !important;
  border-color: theme("colors.primary") !important;
}

.paper-card-float:active {
  animation-play-state: paused;
  transform: translateY(-2px) scale(0.96) !important;
  transition: transform 0.1s ease;
}

/* --- Messy Stacked Paper Effect (Inpsired by mlms13/Messiah7) --- */
.paper-stack {
  position: relative;
  background-color: #fdfbf9 !important; /* Main sheet */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  overflow: visible !important; /* Ensure child sheets can bleed out */
  z-index: 1;
}

/* Base style for stacked sheets underneath */
.paper-stack::before,
.paper-stack::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  top: 0;
  left: 0;
  z-index: -1; /* Placed behind the main card */
  pointer-events: none;
  transition: transform 0.3s ease;
}

/* Sheet 1: Rotated leftwards */
.paper-stack::before {
  background-color: #fbfaf6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transform: translate(-3px, 3px) rotate(-2.5deg);
}

/* Sheet 2: Rotated rightwards */
.paper-stack::after {
  background-color: #f7f5f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
  transform: translate(2px, 1px) rotate(1.4deg);
}

/* --- Hand-Drawn Crossed Out Strike-Lines --- */
.strike-line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2.5px;
  pointer-events: none;
  z-index: 10;
  opacity: 0.85;
}

.strike-green {
  background-color: #10b981; /* Emerald green pen */
  transform: translateY(-50%) rotate(-6deg);
}

.strike-red {
  background-color: #ef4444; /* Crimson red pen */
  transform: translateY(-50%) rotate(6deg);
}

/* Custom Confetti Animation and Particle Styling */
@keyframes fallAndSway {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(105dvh) translateX(var(--drift))
      rotate(var(--rotation));
    opacity: 0;
  }
}

.confetti-particle {
  animation: fallAndSway var(--duration) cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

/* Blossom landing */
@keyframes bloom-sway {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}
@keyframes bloom-heartbeat {
  0% {
    transform: scale(1);
  }
  11% {
    transform: scale(1.22);
  }
  22% {
    transform: scale(1);
  }
  34% {
    transform: scale(1.16);
  }
  48% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bloom-btn-glow {
  0%,
  100% {
    box-shadow: 0 4px 14px rgba(178, 106, 92, 0.16);
  }
  50% {
    box-shadow: 0 6px 20px rgba(178, 106, 92, 0.26);
  }
}

.bloom-btn {
  border: 0.5px solid #e0b3a6;
  color: #a75f52;
  background: linear-gradient(120deg, #fbeae3, #f6ddd4);
  border-radius: 9999px;
}
.bloom-btn:hover {
  background: linear-gradient(120deg, #f8e3da, #f1d2c7);
}
.bloom-btn:not(.opacity-0) {
  animation: bloom-btn-glow 3.4s ease-in-out infinite;
}