/* ==========================================================================
   BRAWone – Logo-Animation
   --------------------------------------------------------------------------
   Ergänzt brawone-logo.css. Nach brawone-logo.css einbinden.

   Einschalten:   Klasse .bw-animate zum Logo hinzufügen
                  <span class="bw-logo bw-animate"> … </span>
                  Funktioniert auch mit .bw-logo--caps, --white, --no-icon
                  und mit dem Icon allein: <span class="bw-icon bw-animate">

   Ablauf (ca. 1,7 s, einmal beim Laden):
     1. Icon erscheint, der Stamm des «b» wächst, der Bauch rollt ein
     2. Der Goldpunkt im Icon springt auf
     3. «BRAW» wird von links aufgedeckt
     4. Der Ring fällt ein und federt, sein Goldpunkt springt auf
     5. «ne» gleitet herein
   Hover: Die Goldpunkte pulsieren kurz.

   Tempo:  --bw-speed (1 = normal, 0.5 = doppelt so schnell, 2 = halb so schnell)
   Nochmals abspielen: Klasse entfernen und wieder hinzufügen.
   Wer «Bewegung reduzieren» eingestellt hat, sieht das Logo sofort ohne Animation.
   ========================================================================== */

/* Grösse des Goldpunkts als animierbare Zahl (1 = normale Grösse) */
@property --bw-k {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

.bw-animate {
  --bw-speed: 1;
  --bw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --bw-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Goldpunkte über --bw-k skalierbar machen */
.bw-animate .bw-icon::after,
.bw-icon.bw-animate::after {
  background: radial-gradient(circle closest-side,
    var(--bw-gold) calc(43.9% * var(--bw-k)),
    transparent calc(45.4% * var(--bw-k)));
  transition: --bw-k 0.25s var(--bw-ease-back);
}
.bw-animate .bw-o {
  background: radial-gradient(circle closest-side,
    var(--bw-gold) calc(49.3% * var(--bw-k)),
    transparent calc(50.7% * var(--bw-k)));
  transition: --bw-k 0.25s var(--bw-ease-back);
}
.bw-animate.bw-logo--caps .bw-o {
  background: radial-gradient(circle closest-side,
    var(--bw-gold) calc(45% * var(--bw-k)),
    transparent calc(46.4% * var(--bw-k)));
}

/* Teile, die sich bewegen, brauchen inline-block */
.bw-animate .bw-braw,
.bw-animate .bw-ne {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {

  /* 1 · Icon */
  .bw-animate .bw-icon,
  .bw-icon.bw-animate {
    animation: bw-pop calc(0.5s * var(--bw-speed)) var(--bw-ease-back) backwards;
  }
  .bw-animate .bw-icon::before,
  .bw-icon.bw-animate::before {
    transform-origin: 50% 100%;
    animation: bw-grow calc(0.45s * var(--bw-speed)) var(--bw-ease-out) calc(0.12s * var(--bw-speed)) backwards;
  }
  .bw-animate .bw-icon::after,
  .bw-icon.bw-animate::after {
    animation:
      bw-roll calc(0.5s * var(--bw-speed)) var(--bw-ease-out) calc(0.25s * var(--bw-speed)) backwards,
      bw-dot calc(0.4s * var(--bw-speed)) var(--bw-ease-out) calc(0.65s * var(--bw-speed)) backwards;
  }

  /* 3 · «BRAW» von links aufdecken */
  .bw-animate .bw-braw {
    animation: bw-reveal calc(0.6s * var(--bw-speed)) var(--bw-ease-out) calc(0.45s * var(--bw-speed)) backwards;
  }

  /* 4 · Ring fällt ein, Goldpunkt springt auf */
  .bw-animate .bw-o {
    animation:
      bw-drop calc(0.55s * var(--bw-speed)) var(--bw-ease-back) calc(0.85s * var(--bw-speed)) backwards,
      bw-dot calc(0.4s * var(--bw-speed)) var(--bw-ease-out) calc(1.25s * var(--bw-speed)) backwards;
  }

  /* 5 · «ne» gleitet herein */
  .bw-animate .bw-ne {
    animation: bw-slide calc(0.45s * var(--bw-speed)) var(--bw-ease-out) calc(1.2s * var(--bw-speed)) backwards;
  }

  /* Hover: Goldpunkte pulsieren */
  .bw-animate:hover .bw-o,
  .bw-animate:hover .bw-icon::after,
  .bw-icon.bw-animate:hover::after {
    --bw-k: 1.4;
  }
}

@keyframes bw-pop {
  from { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes bw-grow {
  from { transform: scaleY(0); }
  to   { transform: none; }
}
@keyframes bw-roll {
  from { opacity: 0; transform: translateX(-0.25em) rotate(-180deg) scale(0.4); }
  to   { opacity: 1; transform: none; }
}
@keyframes bw-dot {
  0%   { --bw-k: 0; }
  70%  { --bw-k: 1.35; }
  100% { --bw-k: 1; }
}
@keyframes bw-reveal {
  from { clip-path: inset(-10% 100% -10% 0); transform: translateX(-0.08em); }
  to   { clip-path: inset(-10% 0 -10% 0); transform: none; }
}
@keyframes bw-drop {
  0%   { opacity: 0; transform: translateY(-0.9em); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes bw-slide {
  from { opacity: 0; transform: translateX(-0.2em); }
  to   { opacity: 1; transform: none; }
}