@charset "UTF-8";

/* =========================================================================
   SEASONS.CSS - Saisonale Hintergrund-Animationen
   Sommer, Herbst, Fruehling, Ostern
   ========================================================================= */

#season-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  backdrop-filter: blur(0.8px);
}

/* Sommer: season-bg muss ueber Matrix-Canvas (z-index:0) liegen */
:root[data-season="summer"] #season-bg {
  z-index: 1;
}

/* =========================================================================
   SOMMER - Sonne (Light Mode) & Mond (Dark Mode)
   ========================================================================= */

/* Sonne: kleine, weisse Kugel oben-zentriert */
:root[data-season="summer"][data-theme="light"] #season-bg::before {
  content: '';
  position: fixed;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 42%,
    #ffffff 0%,
    #fffef8 28%,
    #fffce2 55%,
    rgba(255,247,185,0.88) 73%,
    rgba(255,232,90,0.42) 88%,
    transparent 100%
  );
  box-shadow:
    0 0 10px 4px  rgba(255,255,245,0.98),
    0 0 28px 10px rgba(255,252,200,0.78),
    0 0 65px 24px rgba(255,238,100,0.38),
    0 0 145px 52px rgba(255,210,50,0.14);
  animation: sunPulse 6s ease-in-out infinite;
  z-index: 1;
}

/* Atmosphaerischer Schimmer um die Sonne */
:root[data-season="summer"][data-theme="light"] #season-bg::after {
  content: '';
  position: fixed;
  top: -22px;
  left: calc(50% - 82px);
  width: 164px;
  height: 164px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,218,0.11) 0%,
    rgba(255,244,152,0.07) 42%,
    transparent 72%
  );
  animation: sunAtmosphere 6s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes sunPulse {
  0%, 100% {
    box-shadow:
      0 0 10px 4px  rgba(255,255,245,0.98),
      0 0 28px 10px rgba(255,252,200,0.78),
      0 0 65px 24px rgba(255,238,100,0.38),
      0 0 145px 52px rgba(255,210,50,0.14);
  }
  50% {
    box-shadow:
      0 0 14px 6px  rgba(255,255,250,1),
      0 0 42px 16px rgba(255,254,218,0.90),
      0 0 95px 36px rgba(255,242,118,0.50),
      0 0 195px 76px rgba(255,218,65,0.20);
  }
}

@keyframes sunAtmosphere {
  0%, 100% { transform: scale(1);    opacity: 0.68; }
  50%       { transform: scale(1.22); opacity: 1;    }
}

/* Mond mit Mare und Kratern via geschichtete radial-gradient */
:root[data-season="summer"][data-theme="dark"] #season-bg::before {
  content: '';
  position: fixed;
  top: 32px;
  right: 44px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background:
    /* Krater Tycho – heller Strahlenkrater, untere Mitte */
    radial-gradient(circle 4px at 42% 72%,
      rgba(245,235,210,0.88) 30%, rgba(220,208,178,0.42) 70%, transparent 100%),
    /* Krater Copernicus – mittlere linke Zone */
    radial-gradient(circle 3px at 38% 46%,
      rgba(238,228,200,0.80) 30%, rgba(215,203,173,0.38) 70%, transparent 100%),
    /* Krater Plato – dunkler Boden, oben */
    radial-gradient(circle 5px at 30% 24%,
      rgba(62,52,36,0.68) 50%, rgba(62,52,36,0.22) 80%, transparent 100%),
    /* Krater Kepler – kleiner heller Fleck, Zentrum */
    radial-gradient(circle 2px at 54% 51%,
      rgba(232,222,194,0.72) 40%, transparent 100%),
    /* Mare Crisium – kompaktes dunkles Oval, rechts oben */
    radial-gradient(ellipse 10px 8px at 77% 28%,
      rgba(55,45,30,0.54) 58%, transparent 100%),
    /* Mare Nectaris – kleines Oval, rechts unten */
    radial-gradient(ellipse 11px 8px at 71% 68%,
      rgba(52,43,28,0.46) 58%, transparent 100%),
    /* Mare Tranquillitatis – mittleres Oval, Mitte-rechts */
    radial-gradient(ellipse 22px 17px at 63% 54%,
      rgba(50,42,27,0.52) 58%, transparent 100%),
    /* Mare Imbrium – grosses Oval, links-oben */
    radial-gradient(ellipse 28px 22px at 35% 32%,
      rgba(52,43,28,0.48) 60%, transparent 100%),
    /* Basis-Mondflaeche */
    radial-gradient(circle at 38% 38%,
      #fffff0 0%, #f5edd0 18%, #ddd0a0 40%, #c8b870 65%, #a89050 82%, #8a7040 100%);
  box-shadow:
    inset -10px -6px 16px rgba(60,50,20,0.45),
    inset 4px 4px 10px rgba(255,250,220,0.25),
    0 0 25px rgba(220,200,120,0.55),
    0 0 65px rgba(200,175,90,0.28),
    0 0 120px rgba(170,145,60,0.12);
  animation: moonGlow 6s ease-in-out infinite;
  z-index: 0;
}

:root[data-season="summer"][data-theme="dark"] #season-bg::after {
  content: '';
  position: fixed;
  top: -30px;
  right: -20px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,rgba(220,200,130,0.08) 0%,rgba(200,175,90,0.05) 40%,transparent 70%);
  animation: moonHalo 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes moonGlow {
  0%, 100% { box-shadow: inset -10px -6px 16px rgba(60,50,20,0.45),inset 4px 4px 10px rgba(255,250,220,0.25),0 0 25px rgba(220,200,120,0.55),0 0 65px rgba(200,175,90,0.28),0 0 120px rgba(170,145,60,0.12); }
  50%       { box-shadow: inset -10px -6px 16px rgba(60,50,20,0.45),inset 4px 4px 10px rgba(255,250,220,0.25),0 0 35px rgba(220,200,120,0.75),0 0 90px rgba(200,175,90,0.42),0 0 160px rgba(170,145,60,0.20); }
}

@keyframes moonHalo {
  0%, 100% { opacity: 0.7; transform: scale(1);    }
  50%       { opacity: 1;   transform: scale(1.12); }
}

/* =========================================================================
   HERBST - Fallendes Laub (langsamer, entsaettigt, 1px blur)
   ========================================================================= */

.season-leaf {
  position: absolute;
  top: -40px;
  display: inline-block;
  pointer-events: none;
  user-select: none;
  animation: leafFall linear infinite;
  will-change: transform, top;
  line-height: 1;
}

@keyframes leafFall {
  0%   { top: -40px; transform: translateX(0) rotate(0deg); opacity: 0.9; }
  20%  { transform: translateX(var(--sway-x, 40px)) rotate(72deg); }
  40%  { transform: translateX(0) rotate(144deg); }
  60%  { transform: translateX(calc(-1 * var(--sway-x, 40px))) rotate(216deg); opacity: 0.85; }
  80%  { transform: translateX(0) rotate(288deg); }
  100% { top: 110vh; transform: translateX(var(--sway-x, 40px)) rotate(360deg); opacity: 0.6; }
}

/* =========================================================================
   FRUEHLING - Sakura-Kirschblueten (langsamer)
   ========================================================================= */

.season-petal {
  position: absolute;
  top: -20px;
  border-radius: 50% 0 50% 0;
  pointer-events: none;
  user-select: none;
  animation: petalFloat ease-in-out infinite;
  will-change: transform, top;
}

@keyframes petalFloat {
  0%   { top: -20px; transform: translateX(0) rotate(0deg); opacity: 0.85; }
  15%  { transform: translateX(calc(0.6 * var(--sway-x, 30px))) rotate(54deg); }
  30%  { transform: translateX(var(--sway-x, 30px)) rotate(108deg); }
  45%  { transform: translateX(calc(0.3 * var(--sway-x, 30px))) rotate(162deg); opacity: 0.75; }
  60%  { transform: translateX(calc(-0.5 * var(--sway-x, 30px))) rotate(216deg); }
  75%  { transform: translateX(calc(-1 * var(--sway-x, 30px))) rotate(270deg); }
  90%  { transform: translateX(calc(-0.4 * var(--sway-x, 30px))) rotate(324deg); opacity: 0.55; }
  100% { top: 110vh; transform: translateX(0) rotate(360deg); opacity: 0.35; }
}

/* =========================================================================
   OSTERN - Verstecktes Ei
   ========================================================================= */

.easter-egg {
  position: fixed;
  width: 28px;
  height: 36px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  cursor: pointer;
  border: none;
  padding: 0;
  z-index: 50;
  pointer-events: all;
  background: radial-gradient(ellipse at 38% 32%,rgba(255,255,220,0.9) 0%,rgba(255,215,60,0.85) 30%,rgba(240,170,20,0.9) 60%,rgba(200,120,10,0.95) 85%,rgba(160,80,0,1) 100%);
  box-shadow: inset -4px -5px 8px rgba(0,0,0,0.25),inset 2px 2px 5px rgba(255,255,200,0.4),0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.4s;
  animation: eggWiggle 4s ease-in-out infinite;
  opacity: 0.72;
}

.easter-egg:hover {
  transform: scale(1.15);
  opacity: 1;
  box-shadow: inset -4px -5px 8px rgba(0,0,0,0.25),inset 2px 2px 5px rgba(255,255,200,0.4),0 4px 16px rgba(240,160,20,0.5);
  animation: none;
}

.easter-egg.found {
  opacity: 0.18;
  cursor: default;
  animation: none;
  pointer-events: none;
}

@keyframes eggWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20%       { transform: rotate(-4deg) scale(1.02); }
  40%       { transform: rotate(4deg) scale(1.02); }
  60%       { transform: rotate(-2deg) scale(1.01); }
  80%       { transform: rotate(2deg) scale(1.01); }
}

.easter-reveal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.easter-reveal.show { opacity: 1; }

.easter-reveal-inner {
  background: var(--surface, #222220);
  border: 1px solid var(--border, #323230);
  border-radius: 12px;
  padding: 2.5rem 3.5rem;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  transform: scale(0.92);
  transition: transform 0.3s ease;
}

.easter-reveal.show .easter-reveal-inner { transform: scale(1); }

.easter-letter {
  font-size: 4.5rem;
  font-family: var(--mono, monospace);
  color: var(--accent, #26A69A);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 20px currentColor;
  letter-spacing: 0.05em;
}

.easter-hint {
  font-family: var(--mono, monospace);
  font-size: 0.72rem;
  color: var(--dim, #777);
  margin-top: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .season-leaf,
  .season-petal,
  .easter-egg,
  :root[data-season="summer"] #season-bg::before,
  :root[data-season="summer"] #season-bg::after {
    animation: none !important;
  }
  .season-leaf, .season-petal { display: none; }
}