/*
  Seasonal theme (Mar–Oct):
  - Uses the same trees as winter but with summer effects
  - Click trees to emit sun rays and falling suns
  - Escalating heat levels with warm effects
  - Motion disabled if user prefers reduced motion

  Scoped via body.theme-summer so it only applies when enabled.
*/

body.theme-summer {
  position: relative;
}

/* Trees in summer get a green leafy glow */
body.theme-summer .xmas-tree {
  filter: brightness(1.1) saturate(1.3);
}

/* Warm overlay at heat levels */
body.theme-summer.summer-heat::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% -20%, rgba(255, 200, 50, 0.08) 0%, transparent 70%);
  z-index: 2;
  opacity: 0.5;
  transition: opacity 0.5s ease;
}

body.theme-summer.summer-heat-2::before {
  opacity: 0.7;
  background: radial-gradient(ellipse at 50% -20%, rgba(255, 160, 20, 0.12) 0%, transparent 70%);
}

body.theme-summer.summer-heat-3::before {
  opacity: 0.85;
  background: radial-gradient(ellipse at 50% -20%, rgba(255, 120, 0, 0.15) 0%, transparent 70%);
  animation: heat-shimmer 3s ease-in-out infinite;
}

body.theme-summer.summer-heat-4::before {
  opacity: 1;
  background: radial-gradient(ellipse at 50% -20%, rgba(255, 80, 0, 0.18) 0%, transparent 70%);
  animation: heat-shimmer 1.5s ease-in-out infinite;
}

@keyframes heat-shimmer {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Heat wave distortion at level 3+ */
body.theme-summer.summer-heat-3 {
  animation: heat-wave 4s ease-in-out infinite;
}

body.theme-summer.summer-heat-4 {
  animation: heat-wave 2s ease-in-out infinite;
}

@keyframes heat-wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.5px); }
}

/* Heat mirage overlay for level 4 */
body.theme-summer.summer-heat-4::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 200, 50, 0.02) 3px,
    rgba(255, 200, 50, 0.02) 6px
  );
  animation: mirage-move 3s linear infinite;
  z-index: 4;
}

@keyframes mirage-move {
  0% { background-position: 0 0; }
  100% { background-position: 0 60px; }
}

/* Tree bounce on click in summer */
body.theme-summer .xmas-tree.shake {
  animation: summer-tree-bounce 0.5s ease-in-out 1 both !important;
}

@keyframes summer-tree-bounce {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.2) rotate(3deg); }
  50% { transform: scale(0.9) rotate(-2deg); }
  75% { transform: scale(1.1) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Falling sun particles */
.summer-particle {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  animation-name: sun-particle-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

/* Small ray particle */
.summer-particle--ray {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 50, 0.95) 0%, rgba(255, 150, 0, 0.6) 100%);
  box-shadow: 0 0 8px rgba(255, 180, 0, 0.5);
  transform: scale(var(--s, 1));
}

/* Big sun particle (at higher levels) */
.summer-particle--sun {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 80, 0.95) 30%, rgba(255, 140, 0, 0.7) 100%);
  box-shadow: 0 0 16px rgba(255, 160, 0, 0.6), 0 0 32px rgba(255, 100, 0, 0.3);
  transform: scale(var(--s, 1));
}

/* Mega sun (level 4) */
.summer-particle--mega {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 100, 1) 20%, rgba(255, 120, 0, 0.8) 70%, rgba(255, 60, 0, 0.4) 100%);
  box-shadow: 0 0 24px rgba(255, 140, 0, 0.7), 0 0 48px rgba(255, 80, 0, 0.4);
  transform: scale(var(--s, 1));
}

@keyframes sun-particle-fall {
  0% { opacity: 1; }
  70% { opacity: 0.8; }
  100% {
    transform: translate3d(var(--dx, 20px), var(--dy, 180px), 0) scale(var(--s, 1)) rotate(var(--rot, 120deg));
    opacity: 0;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.theme-summer .xmas-tree.shake { animation: none !important; }
  .summer-particle { animation: none; display: none; }
  body.theme-summer.summer-heat::before,
  body.theme-summer.summer-heat-2::before,
  body.theme-summer.summer-heat-3::before,
  body.theme-summer.summer-heat-4::before { animation: none; }
  body.theme-summer.summer-heat-3,
  body.theme-summer.summer-heat-4 { animation: none; }
  body.theme-summer.summer-heat-4::after { animation: none; }
}

/* Hide summer particles outside summer season */
body:not(.theme-summer) .summer-particle { display: none !important; }