/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Celebration animations */
@keyframes slide-up {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

.animate-fade-out {
  animation: fade-out 0.3s ease-out;
}

/* Toast animations */
@keyframes slide-in {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

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

.animate-slide-in {
  animation: slide-in 0.3s ease-out forwards;
}

.animate-slide-out {
  animation: slide-out 0.3s ease-out forwards;
}

/* Progress bar shimmer effect */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

/* Lantern glow animation */
@keyframes lantern-glow {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.5)) drop-shadow(0 0 8px rgba(251, 191, 36, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 7px rgba(251, 191, 36, 0.95)) drop-shadow(0 0 18px rgba(251, 191, 36, 0.5));
  }
}

.animate-lantern-glow {
  animation: lantern-glow 2.5s ease-in-out infinite;
}

/* Sparkle twinkle animation */
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  20%       { opacity: 1; transform: scale(1.3); }
  40%       { opacity: 0; transform: scale(0); }
}

.sparkle {
  display: inline-block;
  transform-origin: center center;
}

/* Negative delays = animation already running at a different point on page load.
   Different durations = phases drift permanently and never re-sync. */
.sparkle-1 { animation: sparkle-twinkle  7.5s ease-in-out infinite -1.2s; }
.sparkle-2 { animation: sparkle-twinkle  9.1s ease-in-out infinite -4.3s; }
.sparkle-3 { animation: sparkle-twinkle 11.3s ease-in-out infinite -2.7s; }
.sparkle-4 { animation: sparkle-twinkle  8.4s ease-in-out infinite -6.1s; }
.sparkle-5 { animation: sparkle-twinkle 10.2s ease-in-out infinite -3.8s; }



.firefly-glow {
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(214 170 55 / 40%);
  background: radial-gradient(ellipse at 0% 100%, rgb(243 204 92 / 15%), transparent 45%),
              radial-gradient(ellipse at 100% 0%, rgb(243 204 92 / 12%), transparent 40%);
}
.firefly-glow > span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f7d978;
  box-shadow: 0 0 7px 2px rgb(229 183 64 / 65%);
  animation: firefly-drift 7s ease-in-out infinite alternate;
}
.firefly-glow > span:nth-child(1) { left: 6%; top: 24%; }
.firefly-glow > span:nth-child(2) { left: 16%; bottom: 8%; animation-delay: -3s; }
.firefly-glow > span:nth-child(3) { right: 8%; top: 15%; animation-delay: -5s; }
.firefly-glow > span:nth-child(4) { right: 4%; bottom: 22%; animation-delay: -2s; }
.firefly-glow > span:nth-child(5) { left: 44%; bottom: 5%; animation-delay: -4s; }
.firefly-glow > span:nth-child(6) { right: 30%; top: 5%; animation-delay: -6s; }
@keyframes firefly-drift {
  from { transform: translateY(3px); opacity: .45; }
  to { transform: translateY(-5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .firefly-glow > span { animation: none; }
}

.petal-drift {
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(207 136 159 / 40%);
  background: radial-gradient(ellipse at 100% 100%, rgb(235 166 186 / 16%), transparent 50%);
}
.petal-drift > span {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 80% 15% 70% 30%;
  background: #e6a1ba;
  opacity: .65;
  animation: petal-sway 9s ease-in-out infinite alternate;
}
.petal-drift > span:nth-child(1) { left: 5%; top: 18%; }
.petal-drift > span:nth-child(2) { left: 20%; bottom: 7%; animation-delay: -3s; }
.petal-drift > span:nth-child(3) { right: 8%; top: 14%; animation-delay: -5s; }
.petal-drift > span:nth-child(4) { right: 4%; bottom: 25%; animation-delay: -2s; }
.petal-drift > span:nth-child(5) { left: 48%; bottom: 5%; animation-delay: -4s; }
.petal-drift > span:nth-child(6) { right: 32%; top: 4%; animation-delay: -6s; }
@keyframes petal-sway {
  from { transform: translate(-2px, -3px) rotate(-20deg); }
  to { transform: translate(3px, 5px) rotate(25deg); }
}
@media (prefers-reduced-motion: reduce) {
  .petal-drift > span { animation: none; }
}


.avatar-companion {
  position: relative;
  display: inline-flex;
  flex: none;
  border-radius: 9999px;
  vertical-align: middle;
  margin-right: var(--companion-room);
}
.avatar-companion__creature {
  position: absolute;
  width: 88%; height: 88%; max-width: none; object-fit: contain;
  right: calc(-1 * var(--companion-room)); bottom: -14%;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px #152b2833);
  transform-origin: 50% 90%;
  animation: mossling-breathe 8s ease-in-out infinite;
}
.avatar-companion--compact .avatar-companion__creature { animation: none; }
.avatar-companion--sparrow .avatar-companion__creature {
  width: 78%; height: 78%;
  right: calc(-0.9 * var(--companion-room)); bottom: -6%;
  animation-name: sparrow-peek;
}
@keyframes sparrow-peek {
  0%, 40%, 70%, 100% { transform: rotate(0) translateY(0); }
  52% { transform: rotate(-6deg) translateY(-3%); }
}
.companion-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 176px; padding: 30px 40px;
  border: 1px solid #dbe5d6; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 75%, #dfe8d2 0, #f1f4e9 35%, #faf9f3 78%);
}
.dark .companion-preview {
  border-color: #34463b;
  background: radial-gradient(ellipse at 50% 75%, #293c2c 0, #1c2a23 40%, #19211e 78%);
}
@keyframes mossling-breathe {
  0%, 35%, 65%, 100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(-3deg) scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-companion .avatar-companion__creature { animation: none; }
}