/**
 * ============================================================================
 *  ANIMATIONS.CSS – Alle Bewegungen & Keyframes
 * ============================================================================
 *  Inhaltsverzeichnis:
 *   1. Logo-Effekte (pulse / glow / flicker)
 *   2. Button-Reveal & Schweben
 *   3. Nebel
 *   4. Partikel
 *   5. Kettenschwingung
 * ============================================================================
 */

/* -------------------------------------------------------------------------
 * 1. LOGO-EFFEKTE
 *    Aktiviert über CONFIG.brand.logoEffect in config.js.
 * ---------------------------------------------------------------------- */
.logo-frame--pulse {
  animation: logoPulse 3.2s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(161, 21, 21, 0); }
  50% { box-shadow: 0 0 32px rgba(161, 21, 21, 0.55); }
}

.logo-frame--glow {
  animation: logoGlow 4s ease-in-out infinite;
}

@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(161, 21, 21, 0.25)); }
  50% { filter: drop-shadow(0 0 22px rgba(161, 21, 21, 0.6)); }
}

.logo-frame--flicker {
  animation: logoFlicker 6s ease-in-out infinite;
}

@keyframes logoFlicker {
  0%, 19%, 21%, 23%, 100% { opacity: 1; }
  20%, 22% { opacity: 0.72; }
}

/* -------------------------------------------------------------------------
 * 2. BUTTON-REVEAL & SCHWEBEN
 * ---------------------------------------------------------------------- */
@keyframes linkReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.link-item {
  animation-delay: var(--delay, 0ms);
}

/* Sehr dezentes Schweben nach dem Einblenden, wirkt "lebendig" */
.btn {
  animation: btnFloat 6s ease-in-out infinite;
  animation-delay: var(--delay, 0ms);
}

@keyframes btnFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.btn:hover,
.btn:focus-visible {
  animation-play-state: paused;
}

/* -------------------------------------------------------------------------
 * 3. NEBEL
 * ---------------------------------------------------------------------- */
.fog--1 { top: 8%;  animation: fogDrift 42s linear infinite; }
.fog--2 { top: 45%; animation: fogDrift 60s linear infinite reverse; opacity: 0.5; }
.fog--3 { top: 78%; animation: fogDrift 50s linear infinite; opacity: 0.4; }

@keyframes fogDrift {
  0%   { transform: translateX(-8%) translateY(0); }
  50%  { transform: translateX(8%) translateY(-2%); }
  100% { transform: translateX(-8%) translateY(0); }
}

/* -------------------------------------------------------------------------
 * 4. PARTIKEL
 *    Jeder Partikel startet unten und steigt langsam mit leichtem
 *    seitlichem Schweben nach oben, versetzt über --i (siehe index.html).
 * ---------------------------------------------------------------------- */
.particle {
  bottom: -4%;
  animation-name: particleRise;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: calc(14s + var(--i) * 2.4s);
  animation-delay: calc(var(--i) * -1.6s);
}

@keyframes particleRise {
  0%   { transform: translate(0, 0);        opacity: 0; }
  10%  { opacity: 0.3; }
  50%  { transform: translate(14px, -50vh); opacity: 0.22; }
  90%  { opacity: 0; }
  100% { transform: translate(-10px, -100vh); opacity: 0; }
}

/* -------------------------------------------------------------------------
 * 5. KETTENSCHWINGUNG
 *    Physikalisch inspiriertes Pendel: asymmetrisches Timing (langsamer
 *    Ausschlag, schnellerer Rückschwung) statt starrer ease-in-out-Loop.
 * ---------------------------------------------------------------------- */
.chain__pivot {
  animation: chainSwing 8s var(--chain-ease, cubic-bezier(0.45, 0, 0.55, 1)) infinite;
}

.chain--left .chain__pivot {
  animation-name: chainSwingLeft;
}

.chain--right .chain__pivot {
  animation-name: chainSwingRight;
  animation-duration: 8.6s; /* leicht versetzte Dauer -> wirkt organischer, nie synchron */
}

@keyframes chainSwingLeft {
  0%   { transform: rotate(1.6deg); }
  50%  { transform: rotate(-2.2deg); }
  100% { transform: rotate(1.6deg); }
}

@keyframes chainSwingRight {
  0%   { transform: rotate(-1.8deg); }
  50%  { transform: rotate(2deg); }
  100% { transform: rotate(-1.8deg); }
}