/* === Hauptmenü: App-Icon statt Schriftzug bei Hover/Fokus (Desktop & Tablet) === */
@media (min-width: 600px) {
  header .wp-block-navigation a[href$="/elasticosc/"]    { --ei-app-icon: url(/wp-content/uploads/menu-icons/elastic-osc.webp); }
  header .wp-block-navigation a[href$="/elasticmelody/"] { --ei-app-icon: url(/wp-content/uploads/menu-icons/elastic-melody.webp); }
  header .wp-block-navigation a[href$="/elasticdrums/"]  { --ei-app-icon: url(/wp-content/uploads/menu-icons/elastic-drums.webp); }
  header .wp-block-navigation a[href$="/elasticfx/"]     { --ei-app-icon: url(/wp-content/uploads/menu-icons/elastic-fx.webp); }
  header .wp-block-navigation a[href$="/mollilooper/"]   { --ei-app-icon: url(/wp-content/uploads/menu-icons/molli-looper.webp); }

  header .wp-block-navigation a:is([href$="/elasticosc/"], [href$="/elasticmelody/"], [href$="/elasticdrums/"], [href$="/elasticfx/"], [href$="/mollilooper/"]) {
    position: relative;
    outline: none; /* kein Fokus-Rechteck beim Klicken – das Icon zeigt den Fokus an */
  }
  header .wp-block-navigation a:is([href$="/elasticosc/"], [href$="/elasticmelody/"], [href$="/elasticdrums/"], [href$="/elasticfx/"], [href$="/mollilooper/"]) .wp-block-navigation-item__label {
    display: inline-block; transition: opacity .2s ease, transform .3s ease;
  }
  header .wp-block-navigation a:is([href$="/elasticosc/"], [href$="/elasticmelody/"], [href$="/elasticdrums/"], [href$="/elasticfx/"], [href$="/mollilooper/"])::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px;
    background: var(--ei-app-icon) center / cover no-repeat; border-radius: 22%;
    opacity: 0; pointer-events: none;
    transform: translate(-50%, -50%) scale(.3) rotate(-14deg);
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
  }
  header .wp-block-navigation a:is([href$="/elasticosc/"], [href$="/elasticmelody/"], [href$="/elasticdrums/"], [href$="/elasticfx/"], [href$="/mollilooper/"]):is(:hover, :focus, :active) .wp-block-navigation-item__label {
    opacity: 0; transform: translateY(-6px) scale(.9);
  }
  header .wp-block-navigation a:is([href$="/elasticosc/"], [href$="/elasticmelody/"], [href$="/elasticdrums/"], [href$="/elasticfx/"], [href$="/mollilooper/"]):is(:hover, :focus, :active)::after {
    opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0);
  }

  @media (prefers-reduced-motion: reduce) {
    header .wp-block-navigation a::after, header .wp-block-navigation .wp-block-navigation-item__label { transition: opacity .15s ease; }
  }
}