/* ============================================================
   AVISON — Hover-Effekte (gehört zu assets/js/magnetic.js)
   Liegt in einer eigenen Datei, weil beide Effekte auf ALLEN
   Seiten gebraucht werden — auch auf den Projektseiten, die
   style.css nicht laden.
   ============================================================ */

/* ---------- Haptischer Zug ---------- */
/* Elemente mit .magnetic folgen leicht dem Mauszeiger. */
.magnetic { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- Wimpern ---------- */
/* Über Links, Knöpfen und den Team-Fotos blitzen beim Hovern die drei
   Wimpern aus der Bildmarke auf. Sie liegen als CSS-Maske über einer
   Fläche in --wimpern-farbe; die steht standardmäßig auf currentColor,
   nimmt also die Schriftfarbe des Elements an. Bei gefüllten Knöpfen
   ist das falsch — dort zählt die Fläche, nicht die Schrift. Deshalb
   setzen die Knöpfe weiter unten ihre eigene Farbe. */
.avi-wimpern {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--wimpern-abstand, 0.22em));
  z-index: 5;
  width: var(--wimpern-groesse, clamp(20px, 2.3em, 44px));
  aspect-ratio: 667 / 174;   /* Seitenverhältnis der Bildmarke */
  background-color: var(--wimpern-farbe, currentColor);
  -webkit-mask: url("../brand/wimpern.svg") no-repeat center / contain;
  mask: url("../brand/wimpern.svg") no-repeat center / contain;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 7px) scale(0.55) rotate(-9deg);
  transform-origin: 50% 100%;
  transition: opacity 0.18s ease,
              transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Der Aufpopp-Moment — .avi-hat-wimpern sitzt auf jedem Träger,
   dadurch greift es auch bei den Team-Fotos (kein Link, kein Knopf). */
.avi-hat-wimpern:hover > .avi-wimpern,
.avi-hat-wimpern:focus-visible > .avi-wimpern {
  opacity: 1;
  transform: translate(-50%, 0) scale(1) rotate(0deg);
}

/* ---------- Knöpfe: größer und mit mehr Luft ---------- */
button,
.float-chip,
.pitch__cta,
.about__cta,
.contact__submit,
.ar-btn {
  --wimpern-groesse: clamp(30px, 3.4em, 64px);
  --wimpern-abstand: 0.75em;
}

/* ---------- Gefüllte Knöpfe: Farbe der Fläche, nicht der Schrift ----- */
/* Die Knöpfe wechseln beim Hovern keine Farbe mehr, die Wimpern sind
   der ganze Effekt. Sie tragen deshalb die Füllfarbe des Knopfs. */
.float-chip { --wimpern-farbe: var(--chip-bg); }
.about__cta { --wimpern-farbe: var(--panel-cta-bg); }
.contact__submit { --wimpern-farbe: var(--footer-fg); }

/* ---------- Team-Fotos ---------- */
/* Endrit und Simon bekommen sie eine Spur größer — die Fläche darunter
   ist ja auch deutlich größer als ein Link. */
.polaroid {
  --wimpern-groesse: clamp(38px, 26%, 96px);
  /* Dicht ueber dem Polaroid: mit mehr Luft reichten sie fast in die
     Ueberschrift „Hi, wir sind…" hinein. */
  --wimpern-abstand: 0.1rem;
  --wimpern-farbe: #be5e21;   /* Burnt Orange statt der grauen Schriftfarbe */
}

/* ---------- Knoepfe im Fuss ---------- */
/* „Schreib uns" und „Alle Projekte": dieselbe Groesse wie bei den
   uebrigen Knoepfen, und etwas hoeher ueber dem Knopf — direkt an der
   Kante wirkten sie angeklebt. */
.footer__btn {
  --wimpern-groesse: clamp(30px, 3.4em, 64px);
  --wimpern-abstand: 0.85em;
}

@media (prefers-reduced-motion: reduce) {
  .magnetic { transition: none; }
  .avi-wimpern { transition: opacity 0.18s ease; transform: translate(-50%, 0) scale(1); }
}