/* Dynamic Theme Styles */

:root {
  --dynamic-primary: var(--accent-color);
  --dynamic-secondary: var(--accent-color);
  --dynamic-background: var(--bg-color);
  --dynamic-text: var(--text-color);
  --dynamic-accent: var(--accent-color);
  --dynamic-gradient: linear-gradient(135deg, var(--bg-color) 0%, var(--secondary-bg) 100%);
  --dynamic-shadow: var(--shadow);

  /* Holiday theme variables */
  --holiday-accent-1: var(--accent-color);
  --holiday-accent-2: var(--accent-color);
  --holiday-accent-3: var(--accent-color);
}

/* Weather Effect Overlays */
.weather-effect-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.weather-effect-overlay canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Time-based theme transitions */
[data-time-theme="sunrise"] {
  --theme-overlay-color: rgba(255, 154, 86, 0.05);
}

[data-time-theme="morning"] {
  --theme-overlay-color: rgba(16, 185, 129, 0.05);
}

[data-time-theme="afternoon"] {
  --theme-overlay-color: rgba(245, 158, 11, 0.05);
}

[data-time-theme="sunset"] {
  --theme-overlay-color: rgba(249, 115, 22, 0.08);
}

[data-time-theme="night"] {
  --theme-overlay-color: rgba(0, 255, 136, 0.05);
}

/* Apply subtle overlay based on time theme */
.portfolio-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--theme-overlay-color, transparent);
  pointer-events: none;
  z-index: 0;
  transition: background 2s ease;
}

/* Holiday Theme Styles */
[data-holiday-theme="christmas"] .header::before {
  content: '🎄';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  animation: bounce 2s ease infinite;
}

[data-holiday-theme="halloween"] {
  --accent-color: #ff6b1a;
}

[data-holiday-theme="halloween"] .header::before {
  content: '🎃';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  animation: spooky 3s ease-in-out infinite;
}

[data-holiday-theme="newyear"] .header::before {
  content: '🎉';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  animation: spin 4s linear infinite;
}

[data-holiday-theme="valentines"] .header::before {
  content: '💕';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  animation: heartbeat 1.5s ease infinite;
}

[data-holiday-theme="stpatricks"] {
  --accent-color: #00ff88;
}

[data-holiday-theme="stpatricks"] .header::before {
  content: '☘️';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  animation: bounce 2s ease infinite;
}

/* Holiday Animations */
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

@keyframes spooky {
  0%, 100% { transform: translateX(-50%) scale(1); filter: hue-rotate(0deg); }
  50% { transform: translateX(-50%) scale(1.1); filter: hue-rotate(20deg); }
}

@keyframes spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes heartbeat {
  0%, 100% { transform: translateX(-50%) scale(1); }
  25% { transform: translateX(-50%) scale(1.2); }
  50% { transform: translateX(-50%) scale(1); }
  75% { transform: translateX(-50%) scale(1.15); }
}

/* Spotify Mood Theme Indicators */
[data-spotify-mood="energetic"] .spotify-widget {
  border-color: #ff6b6b;
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.3);
}

[data-spotify-mood="mellow"] .spotify-widget {
  border-color: #6c5ce7;
  box-shadow: 0 0 20px rgba(108, 92, 231, 0.3);
}

[data-spotify-mood="groovy"] .spotify-widget {
  border-color: #00d2d3;
  box-shadow: 0 0 20px rgba(0, 210, 211, 0.3);
}

/* Dynamic theme accent highlights */
.dynamic-accent {
  color: var(--dynamic-accent);
}

.dynamic-bg {
  background: var(--dynamic-gradient);
}

.dynamic-shadow {
  box-shadow: 0 4px 20px var(--dynamic-shadow);
}

/* Smooth transitions for theme changes */
* {
  transition: background-color 1s ease, color 1s ease, border-color 1s ease;
}

/* Override for elements that shouldn't transition */
canvas,
.no-transition,
[data-no-theme-transition] {
  transition: none !important;
}

/* Weather-specific UI adjustments */
.rain-effect ~ .portfolio-container {
  filter: brightness(0.9);
}

.snow-effect ~ .portfolio-container {
  filter: contrast(1.1) brightness(1.05);
}

.fog-effect ~ .portfolio-container {
  filter: blur(1px) contrast(0.95);
}

/* Holiday-specific decorations */
[data-holiday-theme="christmas"] .tab-button.active::after {
  content: '🎁';
  margin-left: 5px;
}

[data-holiday-theme="halloween"] .tab-button.active::after {
  content: '👻';
  margin-left: 5px;
}

[data-holiday-theme="newyear"] .tab-button.active::after {
  content: '✨';
  margin-left: 5px;
}

[data-holiday-theme="valentines"] .tab-button.active::after {
  content: '💗';
  margin-left: 5px;
}

[data-holiday-theme="stpatricks"] .tab-button.active::after {
  content: '🍀';
  margin-left: 5px;
}

/* Time of day background adjustments */
[data-time-theme="sunrise"] body {
  background-image: linear-gradient(to bottom, #ff9a56, #ffd4a3, #fff5eb);
}

[data-time-theme="sunset"] body {
  background-image: linear-gradient(to bottom, #c026d3, #f97316, #1a1a2e);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .weather-effect-overlay {
    opacity: 0.5; /* Less intensive on mobile */
  }

  [data-holiday-theme] .header::before {
    font-size: 1.5rem;
  }
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
  .weather-effect-overlay {
    display: none;
  }

  [data-holiday-theme] .header::before {
    animation: none;
  }

  * {
    transition: none !important;
  }
}

/* Dark mode adjustments for dynamic themes */
[data-theme="cyberpunk"] [data-time-theme="morning"],
[data-theme="cyberpunk"] [data-time-theme="afternoon"] {
  /* Keep cyberpunk dark even during day themes */
  --dynamic-background: #0a0a0a;
  --dynamic-text: #ffffff;
}

/* Light mode adjustments */
[data-theme="light"] [data-time-theme="night"],
[data-theme="light"] [data-time-theme="sunset"] {
  /* Don't make light mode too dark at night */
  --dynamic-background: #f5f5f5;
  --dynamic-text: #1a1a1a;
}