/* Alle Bewegungen an einem Ort. Minecraft kennt kein Easing -> steps()/linear. */

/* ---------- Hintergrund ---------- */

.bg-scroll { animation: bg-scroll 60s linear infinite; }

@keyframes bg-scroll {
  from { background-position: 0 0, 8px 8px; }
  to   { background-position: 0 512px, 8px 520px; }
}

/* ---------- Statusblock ---------- */

.cube { animation: cube-spin 9s linear infinite, cube-bob 2.4s ease-in-out infinite alternate; }

@keyframes cube-spin {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to   { transform: rotateX(-18deg) rotateY(360deg); }
}

@keyframes cube-bob {
  from { translate: 0 -6px; }
  to   { translate: 0 6px; }
}

.cube-shadow { animation: shadow-pulse 2.4s ease-in-out infinite alternate; }

@keyframes shadow-pulse {
  from { opacity: .5; scale: .88 1; }
  to   { opacity: .3; scale: 1 1; }
}

/* Fuenfstufige Bruchanimation beim Zustandswechsel. */
.cube-break.is-breaking { animation: block-break .5s steps(5) forwards; }

@keyframes block-break {
  from { opacity: 0; }
  to   { opacity: .9; }
}

.cube.is-placing {
  animation:
    cube-spin 9s linear infinite,
    cube-bob 2.4s ease-in-out infinite alternate,
    block-place .4s steps(4) 1;
}

@keyframes block-place {
  0%   { scale: .55; filter: brightness(3); }
  50%  { scale: 1.12; filter: brightness(1.6); }
  100% { scale: 1; filter: brightness(1); }
}

/* ---------- Fackeln ---------- */

.torch--left .torch__flame  { animation: flame 420ms steps(3) infinite alternate; }
.torch--right .torch__flame { animation: flame 530ms steps(3) infinite alternate; }

@keyframes flame {
  from { scale: 1 .82; opacity: .85; box-shadow: 0 0 14px 5px rgba(255, 170, 40, .35); }
  to   { scale: 1.1 1.1; opacity: 1; box-shadow: 0 0 24px 11px rgba(255, 170, 40, .5); }
}

/* ---------- Ofen / Fortschritt ---------- */

[data-block="furnace"] .furnace-face i { animation: furnace-fire 620ms steps(3) infinite alternate; }
[data-block="furnace"] .furnace-face i:last-child { animation-duration: 780ms; }

@keyframes furnace-fire {
  from { height: 12%; }
  to   { height: 62%; }
}

.smelt__arrow i { animation: smelt 2.4s steps(8) infinite; }

@keyframes smelt {
  from { width: 0; }
  to   { width: 100%; }
}

.smelt__fire { transform-origin: bottom center; animation: flame-scale 620ms steps(3) infinite alternate; }

@keyframes flame-scale {
  from { scale: 1 .55; opacity: .8; }
  to   { scale: 1.05 1; opacity: 1; }
}

/* ---------- Verzauberungsglanz auf dem Start-Button ---------- */

.mc-btn--primary:not(:disabled)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(196, 132, 255, .55) 50%, transparent 65%);
  background-size: 300% 100%;
  animation: glint 3s linear infinite;
}

@keyframes glint {
  from { background-position: 150% 0; }
  to   { background-position: -150% 0; }
}

/* ---------- Treffer-Feedback ---------- */

.damage-flash.is-hit { animation: damage .45s steps(3) 1; }

@keyframes damage {
  0%   { opacity: 0; }
  30%  { opacity: .45; }
  100% { opacity: 0; }
}

.layout.is-shaking { animation: shake .3s steps(2) 2; }

@keyframes shake {
  0%   { translate: 0 0; }
  25%  { translate: -6px 2px; }
  50%  { translate: 5px -3px; }
  75%  { translate: -3px -2px; }
  100% { translate: 0 0; }
}

/* ---------- Fortschritts-Toast ---------- */

.toast { animation: toast-in .5s steps(6) 1; }
.toast.is-leaving { animation: toast-out .4s steps(5) forwards; }

@keyframes toast-in {
  from { translate: 0 -140%; opacity: 0; }
  to   { translate: 0 0; opacity: 1; }
}

@keyframes toast-out {
  from { translate: 0 0; opacity: 1; }
  to   { translate: 0 -140%; opacity: 0; }
}

.chat__line { animation: chat-in .25s steps(3) 1; }
.chat__line.is-leaving { animation: chat-out .5s linear forwards; }

@keyframes chat-in {
  from { translate: -20px 0; opacity: 0; }
  to   { translate: 0 0; opacity: 1; }
}

@keyframes chat-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ---------- Spielerliste ---------- */

.player { animation: player-in .3s steps(4) both; }

@keyframes player-in {
  from { translate: -24px 0; opacity: 0; }
  to   { translate: 0 0; opacity: 1; }
}

.player__head { animation: head-bob 2.6s ease-in-out infinite alternate; }

@keyframes head-bob {
  from { translate: 0 -1px; }
  to   { translate: 0 2px; }
}

.heart.is-beating { animation: heartbeat .45s steps(3) 2; }

@keyframes heartbeat {
  0%   { scale: 1; }
  50%  { scale: 1.35; }
  100% { scale: 1; }
}

.players__empty { animation: slow-blink 3s steps(2) infinite; }

@keyframes slow-blink {
  0%, 60% { opacity: .85; }
  61%, 100% { opacity: .4; }
}

/* ---------- Zeitplan ---------- */

.week__cell { animation: block-place .35s steps(4) 1; }
.week__cell.is-breaking { animation: block-break-out .35s steps(5) forwards; }

@keyframes block-break-out {
  from { opacity: 1; scale: 1; }
  to   { opacity: 0; scale: .4; }
}

/* ---------- Dialoge & Sprachwechsel ---------- */

.modal { animation: fade-in .2s linear 1; }
.modal__box { animation: modal-in .2s steps(3) 1; }

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-in {
  from { scale: .9; opacity: 0; }
  to   { scale: 1; opacity: 1; }
}

.layout.is-switching-lang,
.topbar.is-switching-lang { animation: lang-fade .2s linear 1; }

@keyframes lang-fade {
  0%   { opacity: 1; }
  50%  { opacity: .35; }
  100% { opacity: 1; }
}

/* ---------- Barrierefreiheit ---------- */

@media (prefers-reduced-motion: reduce) {
  .bg-scroll,
  .cube,
  .cube-shadow,
  .torch__flame,
  .smelt__arrow i,
  .smelt__fire,
  .furnace-face i,
  .player__head,
  .players__empty,
  .mc-btn--primary::after,
  .layout.is-shaking,
  .week__cell {
    animation: none !important;
  }

  .cube { transform: rotateX(-18deg) rotateY(-30deg); }
  .smelt__arrow i { width: 50%; }
  .smelt__fire { scale: 1 1; }
  .furnace-face i { height: 40%; }
  .mc-btn--primary::after { display: none; }
  .particles { display: none; }

  .toast,
  .chat__line,
  .modal__box {
    animation-name: fade-in;
    animation-duration: .15s;
  }

  /* Der gestaffelte animation-delay wuerde die Zeilen sonst unsichtbar lassen. */
  .player {
    animation: none !important;
    opacity: 1;
  }
}