/* Day/Night Cycle Styles */

.daycycle-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9997; /* Below weather and flies */
  overflow: hidden;
}

/* Sky overlay for time-of-day tinting */
.daycycle-sky-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background-color 2s ease;
  pointer-events: none;
}

/* Stars container */
.daycycle-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Individual star */
.daycycle-star {
  position: absolute;
  background: radial-gradient(circle, #ffffff 0%, #ffffff 40%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Firefly */
.daycycle-firefly {
  position: absolute;
  background: radial-gradient(circle, #ffff80 0%, #ffff00 30%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Time indicator in corner */
.daycycle-container::after {
  content: '';
  position: fixed;
  top: 10px;
  right: 90px;
  font-size: 20px;
  opacity: 0.7;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.daycycle-container.daycycle-dawn::after {
  content: '🌅';
}

.daycycle-container.daycycle-day::after {
  content: '☀️';
}

.daycycle-container.daycycle-dusk::after {
  content: '🌇';
}

.daycycle-container.daycycle-night::after {
  content: '🌙';
}

/* Moon during night */
.daycycle-container.daycycle-night::before {
  content: '';
  position: fixed;
  top: 40px;
  right: 80px;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 35% 35%,
    #ffffd0 0%,
    #ffffc0 20%,
    #f0f0a0 40%,
    #e8e890 60%,
    transparent 100%
  );
  border-radius: 50%;
  box-shadow:
    0 0 20px 10px rgba(255, 255, 200, 0.3),
    0 0 60px 30px rgba(255, 255, 200, 0.1);
  opacity: 0;
  transition: opacity 3s ease;
  pointer-events: none;
}

.daycycle-container.daycycle-night::before {
  opacity: 0.9;
}

/* Sun during day - positioned opposite to moon */
.daycycle-container.daycycle-day .daycycle-sun,
.daycycle-container.daycycle-dawn .daycycle-sun,
.daycycle-container.daycycle-dusk .daycycle-sun {
  position: fixed;
  top: 30px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle at 50% 50%,
    #ffff00 0%,
    #ffdd00 40%,
    #ffaa00 70%,
    transparent 100%
  );
  border-radius: 50%;
  box-shadow:
    0 0 30px 15px rgba(255, 200, 0, 0.4),
    0 0 80px 40px rgba(255, 200, 0, 0.2);
  pointer-events: none;
}

/* Ambient lighting effects on page content */
.daycycle-container.daycycle-night ~ * {
  filter: brightness(0.95);
}

.daycycle-container.daycycle-dawn ~ *,
.daycycle-container.daycycle-dusk ~ * {
  filter: brightness(0.98);
}

/* Creature eye glow at night - applied via JS class */
.fly.night-vision .fly-eye,
.wasp.night-vision .wasp-eye {
  filter: brightness(1.5);
}

/* Firefly interaction hint */
.daycycle-firefly:hover {
  transform: scale(1.5);
}