/* ═══════════════════════════════════════════════════════════════════════════
   MiaoSense Brand-Lockup — die EINE Logo-Komponente fuer alle Web-Seiten.

   Geometrie 1:1 aus der App uebernommen (MiaoSenseAnimatedLogo.kt, StackedLogo):
   Ohren-Signet UEBER der Wortmarke, linke Ohrenspitze buendig mit dem M,
   rechte Ohrenspitze buendig mit dem o von "Miao". "Miao" gold W800,
   "Sense" hell W400. Kein horizontales Nebeneinander mehr.

   Die Prozentwerte stammen aus der gemessenen Pfad-Bbox von brand-signet.svg
   (im Browser per getBBox ermittelt, 2026-08-28):
       viewBox 0 0 218 60 · sichtbarer Pfad x = 15.19 .. 202.02 (span 186.84)
   Daraus, damit die SICHTBAREN Spitzen und nicht der Dateirand ausgerichtet
   werden — identische Rechnung wie in StackedLogo:
       Bildbreite  = 218    / 186.84 = 116.68 % der "Miao"-Breite
       Bildversatz = -15.19 / 186.84 =  -8.13 % der "Miao"-Breite
   ═══════════════════════════════════════════════════════════════════════════ */

.ms-lockup {
  --ms-ears-span:  116.68%;   /* 218 / 186.84  */
  --ms-ears-shift:  -8.13%;   /* -15.19 / 186.84 */
  --ms-overlap:    0.07em;    /* App: 2 dp Ueberlappung Ohren/Wortmarke */
  --ms-lift:       4.5px;     /* User 2026-08-28: die Ohren sassen dem Text zu
                                 nah. Bewusst in px und nicht in em -- die
                                 Ansage lautete "ca. 4,5 Pixel", und die App
                                 haelt ihren Abstand ebenfalls fest (2 dp),
                                 nicht schriftgradabhaengig. */

  display: inline-block;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  line-height: 1;
  letter-spacing: -0.02em;    /* App: -0.4sp bei 20sp */
  white-space: nowrap;
  text-decoration: none;
  /* Platz fuer die Ohren, die absolut nach oben ausbrechen.
     Hergeleitet, nicht geraten: "Miao" in DM Sans W800 misst rund 2,27 em;
     die Ohren sind 116,68 % davon breit und 60/218 davon hoch, also ~0,73 em.
     Benoetigt werden 0,73 em - Ueberlappung + Hub, dazu etwas Luft fuer die
     Drehung beim Zucken (±2,5 Grad auf 56 px sind gut 1 px).
     Mit 0,5 em ragten die Ohren 3,38 px oben heraus -- gemessen, nicht
     vermutet. */
  padding-top: calc(0.72em + var(--ms-lift));
}

.ms-lockup__miao {
  position: relative;
  display: inline-block;
  font-weight: 800;                       /* App: FontWeight.W800 */
  color: var(--brand, #c49a6c);           /* App: GoldBrand #c49a6c */
}

.ms-lockup__sense {
  font-weight: 400;                       /* App: FontWeight.W400 */
  color: var(--fg, #eef1f6);              /* App: TextPrimary #EEF1F6 */
}

.ms-lockup__ears {
  position: absolute;
  left: var(--ms-ears-shift);
  bottom: calc(100% - var(--ms-overlap) + var(--ms-lift));
  width: var(--ms-ears-span);
  height: auto;
  display: block;
  pointer-events: none;

  /* ── Das Ohrenzucken, 1:1 aus MiaoSenseAnimatedLogo.kt ──────────────────
     Die App faehrt Variant.EarTwitch als Standard: alle 8 s ein kurzes
     Zucken, Drehpunkt an der WURZEL der Ohren, nicht in ihrer Mitte.

     Keyframes aus dem Kotlin uebernommen, nicht nachempfunden:
        durationMillis = 8000
        0f at 0 · 0f at 7000 · -2.5f at 7200 · 2f at 7500 · 0f at 7800 · 0f at 8000
     Umgerechnet: 7000/8000 = 87,5 % · 7200 = 90 % · 7500 = 93,75 % · 7800 = 97,5 %.
     `linear`, weil Compose zwischen Keyframes ohne Angabe linear laeuft.
     ⚠️ Keine federnden Easings -- das bricht laut Kotlin-Kommentar die
     Markenstimme. */
  transform-origin: 50% 100%;          /* TransformOrigin(0.5f, 1.0f) */
  animation: ms-ear-twitch 8s linear infinite;
  will-change: transform;
}

@keyframes ms-ear-twitch {
  0%, 87.5%   { transform: rotate(0deg); }
  90%         { transform: rotate(-2.5deg); }
  93.75%      { transform: rotate(2deg); }
  97.5%, 100% { transform: rotate(0deg); }
}

/* MIA-380 in der App: das Zucken ist Zierde und der erste Kandidat zum
   Abschalten. Die Ruhestellung ist 0 Grad -- das Logo bleibt vollstaendig
   sichtbar, es bewegt sich nur nicht mehr. Hier genauso. */
@media (prefers-reduced-motion: reduce) {
  .ms-lockup__ears { animation: none; transform: rotate(0deg); }
}

/* Zwei Groessen, sonst nichts. Sie entsprechen den bisherigen Schriftgraden
   der beiden Kopfzeilen, damit sich am Seitenrhythmus nichts verschiebt. */
.ms-lockup--head  { font-size: 1.32rem; }   /* Landingpages */
.ms-lockup--legal { font-size: 1rem; }      /* Rechtstexte  */

/* Der Kopf der Rechtstexte ist ein Link. Der Lockup erbt dort keine
   Unterstreichung und keine Linkfarbe -- die Marke wird nicht eingefaerbt. */
a:hover > .ms-lockup, a:focus-visible > .ms-lockup { text-decoration: none; }