/* ============================================================
   KROBIA 1558 — animations.css (zaktualizowany)
   Podmień: gra/game/css/animations.css
   ============================================================ */

/* ============================================================
   PRZEJŚCIA MIĘDZY EKRANAMI
   ============================================================ */
@keyframes screenEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screen-enter { animation: screenEnter 0.5s ease forwards; }

@keyframes screenExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}
.screen-exit { animation: screenExit 0.35s ease forwards; pointer-events: none; }

@keyframes overlayEnter { from { opacity: 0; } to { opacity: 1; } }
.screen-overlay.screen-active { animation: overlayEnter 0.25s ease forwards; }

@keyframes bgFadeIn { from { opacity: 0; } to { opacity: 1; } }
.bg-image.bg-changing { animation: bgFadeIn 0.6s ease forwards; }

/* Powolny zoom kinowy na tle */
@keyframes bgZoomIn {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* ============================================================
   EKRAN TYTUŁOWY
   ============================================================ */

/* Ornament — pulsujący blask złota */
@keyframes ornamentGlow {
  0%, 100% { opacity: 0.4; text-shadow: none; }
  50%       { opacity: 1;   text-shadow: 0 0 18px rgba(200, 146, 42, 0.7); }
}
.title-ornament {
  animation: ornamentGlow 3s ease-in-out infinite;
}
.title-ornament--bottom { animation-delay: 1.5s; }

/* Tytuł — bloom z ciemności + rozmycie */
@keyframes titleBloom {
  0%   { opacity: 0; filter: brightness(0.2) blur(8px); letter-spacing: 0.02em; }
  60%  { opacity: 0.9; filter: brightness(1.3) blur(0px); }
  100% { opacity: 1;   filter: brightness(1) blur(0px); letter-spacing: 0.08em; }
}
.game-title { animation: titleBloom 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }

/* Podtytuł — rozszerzenie letter-spacing */
@keyframes subtitleReveal {
  from { opacity: 0; letter-spacing: 0.6em; }
  to   { opacity: 1; letter-spacing: 0.3em; }
}
.game-subtitle { animation: subtitleReveal 1s ease-out 1.2s both; }

/* Przyciski menu — staggered */
@keyframes menuItemReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.title-menu .btn:nth-child(1) { animation: menuItemReveal 0.5s ease-out 1.5s both; }
.title-menu .btn:nth-child(2) { animation: menuItemReveal 0.5s ease-out 1.7s both; }
.title-menu .btn:nth-child(3) { animation: menuItemReveal 0.5s ease-out 1.9s both; }
.title-footer { animation: menuItemReveal 0.5s ease-out 2.1s both; }

/* ============================================================
   HUD
   ============================================================ */
@keyframes hudReveal {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
#hud.hud-reveal { animation: hudReveal 0.4s ease-out forwards; }

/* ============================================================
   EFEKT ŚWIECY — migotanie vignette + ikony
   ============================================================ */
@keyframes vignetteBreath {
  0%, 100% { opacity: 1; }
  30%       { opacity: 0.88; }
  50%       { opacity: 0.95; }
  70%       { opacity: 0.82; }
}

@keyframes candleFlicker {
  0%, 100% { opacity: 1;    color: var(--color-gold); }
  20%       { opacity: 0.85; color: #d4a030; }
  35%       { opacity: 0.95; }
  50%       { opacity: 0.80; color: #bf8020; }
  65%       { opacity: 0.92; }
  80%       { opacity: 0.87; }
}
.hud-day-icon { animation: candleFlicker 4s ease-in-out infinite; }

/* ============================================================
   TYPEWRITER
   ============================================================ */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.typewriter-text.is-typing::after {
  content: '|';
  display: inline-block;
  color: var(--color-gold);
  animation: cursorBlink 0.7s step-end infinite;
}

.typewriter-char {
  display: inline;
  opacity: 0;
  animation: charReveal 0.02s ease forwards;
}
@keyframes charReveal { to { opacity: 1; } }

/* ============================================================
   PANELE — wejście
   ============================================================ */
@keyframes panelRise {
  from { opacity: 0; transform: translateY(28px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.journal-panel,
.pause-panel {
  animation: panelRise 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ============================================================
   NARRATION PANEL — wjazd od dołu
   ============================================================ */
.narration-panel {
  animation: panelRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* ============================================================
   PORTRET — reveal z lewej
   ============================================================ */
@keyframes portraitReveal {
  from {
    opacity: 0;
    transform: scale(0.96) translateX(-12px);
    filter: brightness(0);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
    filter: brightness(1);
  }
}
.portrait-frame {
  animation: portraitReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Panel tekstu dialogu */
.dialogue-text-panel {
  animation: panelFadeIn 0.4s ease 0.3s both;
}

/* ============================================================
   WYBORY DIALOGOWE — staggered reveal
   ============================================================ */
@keyframes choiceReveal {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.choices-entering .btn--choice:nth-child(1) { animation: choiceReveal 0.25s ease-out 0.05s both; }
.choices-entering .btn--choice:nth-child(2) { animation: choiceReveal 0.25s ease-out 0.13s both; }
.choices-entering .btn--choice:nth-child(3) { animation: choiceReveal 0.25s ease-out 0.21s both; }
.choices-entering .btn--choice:nth-child(4) { animation: choiceReveal 0.25s ease-out 0.29s both; }

/* ============================================================
   HUB — lokacje reveal
   ============================================================ */
@keyframes locationReveal {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.location-btn { animation: locationReveal 0.35s ease-out both; }
.location-btn:nth-child(1) { animation-delay: 0.05s; }
.location-btn:nth-child(2) { animation-delay: 0.12s; }
.location-btn:nth-child(3) { animation-delay: 0.19s; }
.location-btn:nth-child(4) { animation-delay: 0.26s; }
.location-btn:nth-child(5) { animation-delay: 0.33s; }
.location-btn:nth-child(6) { animation-delay: 0.40s; }

/* Glow pulse przy hover */
@keyframes glowPulseOnce {
  0%   { box-shadow: 0 0 0 0 rgba(200, 146, 42, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(200, 146, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 146, 42, 0); }
}
.location-btn:not(.location-btn--locked):hover {
  animation: glowPulseOnce 0.7s ease-out;
}

/* ============================================================
   PRZYCISK "DALEJ" — pulsowanie uwagi
   ============================================================ */
@keyframes pulseAttention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 146, 42, 0); border-color: var(--color-gold-dim); }
  50%       { box-shadow: 0 0 0 6px rgba(200, 146, 42, 0.15), 0 0 14px rgba(200, 146, 42, 0.35); border-color: var(--color-gold); }
}
.pulse-attention { animation: pulseAttention 2s ease-in-out infinite; }
.pulse-attention:hover { animation: none; box-shadow: var(--shadow-btn-hover); border-color: var(--color-gold-light); }

/* ============================================================
   ZŁOTY SHIMMER — przycisk hover
   ============================================================ */
@keyframes goldSweep {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ============================================================
   SLOT ZAPISU — flash po zapisie
   ============================================================ */
@keyframes saveFlash {
  0%   { background: rgba(200, 146, 42, 0.25); }
  100% { background: rgba(36, 26, 13, 0.6); }
}
.save-slot.just-saved { animation: saveFlash 0.8s ease-out forwards; }

/* ============================================================
   DOSTĘPNOŚĆ — redukcja ruchu
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pulse-attention { animation: none; border-color: var(--color-gold-dim); }
  .title-ornament  { animation: none; opacity: 0.7; }
}

/* ============================================================
   MOBILE — uproszczone animacje
   ============================================================ */
@media (max-width: 768px) {
  @keyframes screenEnter { from { opacity: 0; } to { opacity: 1; } }
  .screen-enter { animation-duration: 0.25s; }
  .location-btn:not(.location-btn--locked):hover { animation: none; }
  .portrait-frame { animation-duration: 0.4s; }
  .narration-panel { animation-duration: 0.3s; }
  @keyframes panelRise {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .location-btn:nth-child(n) { animation-delay: 0s; }
}