:root {
  /* Base seasonal variables - will be overridden by JavaScript */
  --season-hue: 210;
  --season-saturation: 20%;
  --season-lightness: 50%;
  --season-warmth: 0.1;
  --season-animation-speed: 3s;
  --season-letter-spacing: 0.02em;
  --season-line-height: 1.6;
}

.seasonal-container {
  background: linear-gradient(135deg,
    hsl(var(--season-hue), var(--season-saturation), var(--season-lightness)) 0%,
    hsl(calc(var(--season-hue) + 30), calc(var(--season-saturation) * 0.8), calc(var(--season-lightness) + 5%)) 100%
  );
  color: hsl(var(--season-hue), calc(var(--season-saturation) * 0.6), calc(var(--season-lightness) - 30%));
  padding: 2rem;
  border-radius: 8px;
  margin: 1rem 0;
  letter-spacing: var(--season-letter-spacing);
  line-height: var(--season-line-height);
  transition: all var(--season-animation-speed) ease-in-out;
}

.seasonal-text {
  font-size: calc(1rem + var(--season-warmth) * 0.2rem);
  animation: seasonal-breathe var(--season-animation-speed) ease-in-out infinite alternate;
}

@keyframes seasonal-breathe {
  0% {
    text-shadow: 0 0 calc(var(--season-warmth) * 10px) hsl(var(--season-hue), var(--season-saturation), var(--season-lightness));
    letter-spacing: var(--season-letter-spacing);
  }
  100% {
    text-shadow: 0 0 calc(var(--season-warmth) * 20px) hsl(var(--season-hue), var(--season-saturation), var(--season-lightness));
    letter-spacing: calc(var(--season-letter-spacing) + var(--season-warmth) * 0.05em);
  }
}

.winter-mode {
  font-weight: 500;
  opacity: 0.9;
}

.spring-mode {
  animation: spring-growth 4s ease-in-out infinite;
}

@keyframes spring-growth {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.01); }
}

.summer-mode {
  animation: summer-shimmer 2s linear infinite;
}

@keyframes summer-shimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.1); }
}

.autumn-mode {
  animation: autumn-drift 6s ease-in-out infinite;
}

@keyframes autumn-drift {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-2px); }
  75% { transform: translateY(1px); }
}

# current-season-display {
  font-family: monospace;
  background: rgba(0,0,0,0.1);
  padding: 0.5rem;
  border-radius: 4px;
  margin: 1rem 0;
}

.season-transition-indicator {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,
    #3b82f6 25%,    /* Winter blue */
    #10b981 50%,    /* Spring green */
    #f59e0b 75%,    /* Summer gold */
    #dc2626 100%    /* Autumn red */
  );
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.season-marker {
  position: absolute;
  top: 0;
  width: 8px;
  height: 4px;
  background: white;
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
  transition: left 0.5s ease-in-out;
}