/* ============================================================
   KEYFRAME ANIMATIONS — Lichtblick Blackforest
   Kategorien: Entrance, Ambient, Interactive, Transitions
   ============================================================ */

/* --- ENTRANCE ANIMATIONS --- */

@keyframes charIn {
  to { opacity: 1; transform: translateY(0) scale(1) }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(25px) }
  to { opacity: 1; transform: translateY(0) }
}

@keyframes fadeIn {
  from { opacity: 0 }
  to { opacity: 1 }
}

@keyframes lineGrow {
  to { height: 50px }
}

@keyframes slowReveal {
  from { opacity: 0; transform: translateY(var(--reveal-y, 25px)) }
  to { opacity: 1; transform: translateY(0) }
}

/* --- AMBIENT ANIMATIONS --- */

@keyframes hazeBreath {
  0%   { opacity: .06; transform: scale(1) translate(0, 0) }
  50%  { opacity: .13; transform: scale(1.03) translate(.5%, -.5%) }
  100% { opacity: .09; transform: scale(1.06) translate(1%, -1%) }
}

@keyframes grainDrift {
  0%, 100% { transform: translate(0) }
  25%  { transform: translate(-5%, -10%) }
  50%  { transform: translate(8%, 5%) }
  75%  { transform: translate(-3%, 8%) }
}

@keyframes availPulse {
  0%, 100% { opacity: .6 }
  50%  { opacity: 1 }
}

@keyframes scrollPulse {
  0%, 100% { opacity: .2; transform: scaleY(.6) }
  50%  { opacity: .6; transform: scaleY(1) }
}

/* --- STAR ANIMATIONS --- */

@keyframes ringExpand {
  0%   { transform: scale(.5); opacity: 0 }
  20%  { opacity: .8 }
  60%  { opacity: .3 }
  100% { transform: scale(1.6); opacity: 0 }
}

@keyframes glowPulse {
  0%, 100% { transform: scale(1); opacity: .3 }
  50%  { transform: scale(2.5); opacity: .08 }
}

@keyframes coreBreath {
  0%, 100% {
    width: 8px; height: 8px;
    box-shadow:
      0 0 6px 2px rgba(240,234,212,.6),
      0 0 18px 4px rgba(240,234,212,.2),
      0 0 35px 8px rgba(196,169,106,.1);
  }
  50% {
    width: 10px; height: 10px;
    box-shadow:
      0 0 10px 3px rgba(255,250,235,.8),
      0 0 25px 8px rgba(255,250,235,.3),
      0 0 50px 15px rgba(196,169,106,.15);
  }
}

@keyframes subRingPulse {
  0%, 100% { transform: scale(.8); opacity: 0 }
  50%  { transform: scale(1.5); opacity: .4 }
}

/* --- INTERACTIVE ANIMATIONS --- */

@keyframes ripple {
  to { width: 100px; height: 100px; margin: -50px 0 0 -50px; opacity: 0 }
}

/* Shooting star clickable glow */
@keyframes shootingStarGlow {
  0%   { box-shadow: 0 0 0 0 rgba(196,169,106,0) }
  50%  { box-shadow: 0 0 20px 10px rgba(196,169,106,.3) }
  100% { box-shadow: 0 0 0 0 rgba(196,169,106,0) }
}

/* --- LOADING ANIMATION --- */
@keyframes starAppear {
  from { opacity: 0; transform: scale(0) }
  to { opacity: 1; transform: scale(1) }
}

/* Loading screen */
.loading-screen {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1.5rem;
  transition: opacity 1s ease;
}
.loading-screen.fade-out { opacity: 0; pointer-events: none }
.loading-stars {
  display: flex; gap: 8px;
}
.loading-star {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--star);
  opacity: 0;
  animation: starAppear .4s var(--ease-spring) forwards;
}
.loading-text {
  font-family: var(--serif-it); font-style: italic;
  font-size: .8rem; color: var(--text-dim);
  letter-spacing: .1em;
  opacity: 0; animation: fadeIn .8s ease .5s forwards;
}

/* --- CONSTELLATION PROGRESS --- */
.constellation-progress-web line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.5s var(--ease-expo);
}
.constellation-progress-web line.connected {
  stroke-dashoffset: 0;
  stroke: rgba(196,169,106,.4);
}
.constellation-progress-web.complete line.connected {
  stroke: rgba(196,169,106,.6);
  filter: drop-shadow(0 0 4px rgba(196,169,106,.3));
}

/* --- EASTER EGG: Shooting star clickable --- */
.shooting-star.clickable {
  cursor: none; pointer-events: auto;
  width: 140px; height: 3px;
  background: linear-gradient(to right, transparent, rgba(255,250,235,.9), rgba(196,169,106,.6), transparent);
}
.shooting-star-reward {
  position: fixed; z-index: 100;
  pointer-events: none;
  font-family: var(--serif-it); font-style: italic;
  font-size: .9rem; color: var(--accent);
  text-align: center; max-width: 300px;
  opacity: 0; transform: translateY(10px);
  animation: rewardAppear 3s var(--ease-expo) forwards;
}
@keyframes rewardAppear {
  0%   { opacity: 0; transform: translateY(10px) }
  15%  { opacity: 1; transform: translateY(0) }
  85%  { opacity: 1; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(-20px) }
}