/* ====== Winter Mode (Snow & Icicles) ====== */
/* line 2, ../shared_assets/stylesheets/seasonal_mode.scss */
#mainHeader.winter-mode {
  background-image: url(main_images/VillaPaintingHeader_Snow.png);
}

/* Snowflake Base */
/* line 7, ../shared_assets/stylesheets/seasonal_mode.scss */
.snowflake {
  position: absolute;
  top: -15px;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  width: 6px;
  height: 6px;
  opacity: 0.8;
}

/* line 20, ../shared_assets/stylesheets/seasonal_mode.scss */
.snowflake:nth-child(3n) {
  width: 3px;
  height: 3px;
}

/* line 25, ../shared_assets/stylesheets/seasonal_mode.scss */
.snowflake:nth-child(3n+1) {
  width: 5px;
  height: 5px;
}

/* line 30, ../shared_assets/stylesheets/seasonal_mode.scss */
.snowflake:nth-child(3n+2) {
  width: 7px;
  height: 7px;
}

/* line 35, ../shared_assets/stylesheets/seasonal_mode.scss */
.snowflake.large {
  width: 10px;
  height: 10px;
  opacity: 0.6;
  animation-duration: 20s;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
}

@keyframes snowfall {
  0% {
    transform: translateX(0) translateY(-15px) rotate(0deg);
  }
  25% {
    transform: translateX(var(--drift)) translateY(80px) rotate(90deg);
  }
  50% {
    transform: translateX(calc(var(--drift) * -0.5)) translateY(160px) rotate(180deg);
  }
  75% {
    transform: translateX(calc(var(--drift) * 0.8)) translateY(240px) rotate(270deg);
  }
  100% {
    transform: translateX(var(--drift)) translateY(330px) rotate(360deg);
  }
}

@keyframes icicle-sparkle {
  0%,
100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* ====== Spring Mode (Flowers & Floating Petals) ====== */
/* line 78, ../shared_assets/stylesheets/seasonal_mode.scss */
.petal {
  position: absolute;
  top: -10px;
  pointer-events: none;
  z-index: 10;
  width: 8px;
  height: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.9;
}

@keyframes petalFloat {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(300px) rotate(360deg) translateX(calc(var(--sway) * 1px));
    opacity: 0;
  }
}

/* ====== Summer Mode (Fireflies, Sunbeams, Butterflies) ====== */
/* line 107, ../shared_assets/stylesheets/seasonal_mode.scss */
.firefly {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 110;
  /* Higher z-index to pop over other elements */
  background: radial-gradient(circle, #fffacd 20%, #ffd700 60%, rgba(255, 215, 0, 0) 100%);
  box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.6);
  /* Glow effect */
  opacity: 0;
  mix-blend-mode: screen;
  /* Helps pop against dark backgrounds */
}

@keyframes fireflyFloat {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translate(var(--moveX), var(--moveY)) scale(1.2);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 10px 4px rgba(255, 215, 0, 0.8);
  }
  /* Pulse */
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--moveX) * 2), calc(var(--moveY) * 2)) scale(0.5);
    opacity: 0;
  }
}

/* Sunbeams */
/* line 149, ../shared_assets/stylesheets/seasonal_mode.scss */
.sunbeam-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* line 160, ../shared_assets/stylesheets/seasonal_mode.scss */
.sunbeam {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 240, 200, 0.05) 10%, rgba(255, 255, 255, 0) 20%);
  animation: sunRotate 60s infinite linear;
  opacity: 0.6;
}

@keyframes sunRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Butterflies */
/* line 182, ../shared_assets/stylesheets/seasonal_mode.scss */
.butterfly {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  will-change: transform;
}

@keyframes butterflyFlap {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.2);
  }
}

@keyframes butterflyPath {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--endX), var(--endY)) rotate(var(--rot));
    opacity: 0;
  }
}

/* ====== Fall Mode (Falling Leaves) ====== */
/* line 220, ../shared_assets/stylesheets/seasonal_mode.scss */
.leaf {
  position: absolute;
  top: -20px;
  pointer-events: none;
  z-index: 10;
  width: 20px;
  height: 20px;
  opacity: 0.9;
}

@keyframes leafFall {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(320px) rotate(720deg) translateX(calc(var(--sway) * 1px));
    opacity: 0;
  }
}

/* Shared Container for Piles (Snow, Pumpkins, Flowers) */
/* line 247, ../shared_assets/stylesheets/seasonal_mode.scss */
.seasonal-piles-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 362px;
  height: 80px;
  pointer-events: none;
  z-index: 100;
  overflow: visible;
}

/* Individual Pile Item Wrappers */
/* line 259, ../shared_assets/stylesheets/seasonal_mode.scss */
.seasonal-item {
  position: absolute;
  bottom: 0;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

/* line 266, ../shared_assets/stylesheets/seasonal_mode.scss */
.seasonal-item:hover {
  transform: scale(1.05) translateY(-2px);
}

/* ====== Holly Corners (Christmas Only) ====== */
/* line 271, ../shared_assets/stylesheets/seasonal_mode.scss */
#holly_corner_left,
#holly_corner_right {
  display: none;
  /* Hidden by default */
}

/* line 277, ../shared_assets/stylesheets/seasonal_mode.scss */
#holly_corner_left {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 100px;
  height: 100px;
  object-fit: scale-down;
  z-index: 4;
  overflow: hidden;
}

/* line 288, ../shared_assets/stylesheets/seasonal_mode.scss */
#holly_corner_right {
  position: absolute;
  top: -5px;
  right: -5px;
  transform: scaleX(-1);
  width: 100px;
  height: 100px;
  object-fit: scale-down;
  z-index: 4;
  overflow: hidden;
}

/* line 300, ../shared_assets/stylesheets/seasonal_mode.scss */
.holly_corner_scaled {
  width: 500px;
  /* Original size */
  height: auto;
  /* Maintain aspect ratio */
  transform: scale(0.2);
  /* Scale down to 20% */
  transform-origin: top left;
  /* Scale from the top-left corner */
}

/* Show holly corners only during Christmas season (Dec 15 - Jan 5) */
/* line 312, ../shared_assets/stylesheets/seasonal_mode.scss */
#mainHeader.winter-mode #holly_corner_left,
#mainHeader.winter-mode #holly_corner_right {
  display: block;
}

/* ====== VALENTINE'S DAY ====== */
/* line 318, ../shared_assets/stylesheets/seasonal_mode.scss */
.heart {
  position: absolute;
  top: -15px;
  pointer-events: none;
  z-index: 10;
  opacity: 0.9;
}

@keyframes heartFall {
  0% {
    transform: translateX(0) translateY(-15px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  100% {
    transform: translateX(var(--drift)) translateY(350px) rotate(360deg);
    opacity: 0;
  }
}

/* ====== JULY 4TH FIREWORKS ====== */
/* line 343, ../shared_assets/stylesheets/seasonal_mode.scss */
.firework-star {
  position: absolute;
  pointer-events: none;
  z-index: 15;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}

/* line 350, ../shared_assets/stylesheets/seasonal_mode.scss */
.firework-rocket {
  position: absolute;
  pointer-events: none;
  z-index: 12;
}

/* line 356, ../shared_assets/stylesheets/seasonal_mode.scss */
.firework-smoke {
  position: absolute;
  pointer-events: none;
  z-index: 10;
}

@keyframes fireworkBurst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    filter: drop-shadow(0 0 6px white) drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
  }
  100% {
    transform: translate(var(--endX), var(--endY)) scale(0.05);
    opacity: 0;
    filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
  }
}

/* line 381, ../shared_assets/stylesheets/seasonal_mode.scss */
.july4-star {
  position: absolute;
  top: 0;
  pointer-events: none;
  z-index: 10;
}

/* ====== HOLIDAY DECORATIVE ELEMENTS ====== */
/* line 389, ../shared_assets/stylesheets/seasonal_mode.scss */
.holiday-drifters {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}

/* Holly Corners styling remains below */