/* =========================================================
   VORTEE MOTION DESIGN SYSTEM  (motion.css)
   ---------------------------------------------------------
   Gemeinsames, seitenübergreifendes Bewegungssystem für
   Startseite, AIVATAR-Blog, VORTEE PICKS und künftige
   Artikel. Wird NACH dem jeweiligen Seiten-Stylesheet
   geladen (style.css / blog.css / picks.css) und ergänzt
   nur -- überschreibt keine bestehenden Regeln.

   Enthält:
   1) Animierte Cyan-Headerlinie (reines CSS, kein JS nötig)
   2) Scroll-Reveal-Zustände (Basiszustand = sichtbar; erst
      motion.js schaltet den "versteckt vor dem Reveal"-
      Zustand frei -- ohne JS bleibt alles sofort sichtbar)
   3) Dezente Hover-Effekte für Karten und Buttons

   Voraussetzung aus style.css: --black, --white, --grey,
   --grey-dark, --line, --accent, --page-width, --page-gutter.
   ========================================================= */


/* =========================================================
   1) ANIMIERTE CYAN-HEADERLINIE
   Sitzt als eigene Zeile direkt unter dem Header, bewegt sich
   mit dem Sticky-Header mit, verändert die Header-Höhe nicht.
   ========================================================= */

.header {
  position: relative; /* Anker für die absolut positionierte Linie */
}

.header-glowline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;

  height: 1px;

  background: rgba(66, 224, 211, 0.35);

  overflow: hidden;
  pointer-events: none;
}

.header-glowline::after {
  content: "";

  position: absolute;
  top: 0;
  left: -120px;

  width: 90px;
  height: 100%;

  background: linear-gradient(
    90deg,
    rgba(66, 224, 211, 0) 0%,
    rgba(66, 224, 211, 0.55) 50%,
    rgba(66, 224, 211, 0) 100%
  );

  animation: vortee-glowline-sweep 7s linear infinite;
  will-change: transform;
}

@keyframes vortee-glowline-sweep {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 100vw deckt jede Headerbreite ab; die Linie selbst
       ist per overflow:hidden auf ihre Zeile begrenzt. */
    transform: translateX(calc(100vw + 120px));
  }
}


/* =========================================================
   2) SCROLL-REVEAL
   ---------------------------------------------------------
   WICHTIG (Barrierefreiheit / kein JS): Der HIER definierte
   "versteckte" Ausgangszustand gilt NUR, wenn motion.js
   geladen hat und der Klasse <html> "js-motion" hinzugefügt
   hat. Ohne JavaScript -- oder bevor das Skript läuft --
   bleiben [data-reveal]-Elemente vollständig sichtbar, weil
   dieser Selektor sonst nicht greift.
   ========================================================= */

html.js-motion [data-reveal] {
  opacity: 0;
  transition:
    opacity 650ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.js-motion [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

html.js-motion [data-reveal="left"] {
  transform: translateX(-32px);
}

html.js-motion [data-reveal="right"] {
  transform: translateX(32px);
}

html.js-motion [data-reveal="up"] {
  transform: translateY(20px);
}

/* Leichte zeitliche Staffelung für Gruppen (z. B. Kategorie-Karten,
   Eigenschaften-Listen). Auf das jeweils äußere Raster legen. */

html.js-motion [data-reveal-group] > [data-reveal]:nth-child(1) { transition-delay: 0ms;   }
html.js-motion [data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: 80ms;  }
html.js-motion [data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: 160ms; }
html.js-motion [data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: 240ms; }


/* =========================================================
   3) HOVER-EFFEKTE
   Ergänzt vorhandene Hover-Zustände um ein leichtes Anheben
   und einen dezenten Türkis-Rand. Keine Skalierung, kein
   Layout-Sprung (nur transform, das den Fluss nicht ändert).
   ========================================================= */

.category-card,
.post-card,
.pick-card,
.pick-button,
.button-primary,
.affiliate-button,
.aivatar-button {
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    background 200ms ease;
}

a.category-card:hover,
.post-card:hover,
.pick-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.pick-button:hover:not(.is-pending),
.button-primary:hover,
.affiliate-button:hover,
.aivatar-button:hover {
  transform: translateY(-2px);
}


/* =========================================================
   ACCESSIBILITY / PERFORMANCE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .header-glowline::after {
    animation: none;
    /* Grundlinie bleibt sichtbar, nur der wandernde Impuls entfällt. */
  }

  html.js-motion [data-reveal] {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .category-card,
  .post-card,
  .pick-card,
  .pick-button,
  .button-primary,
  .affiliate-button,
  .aivatar-button {
    transition: none;
  }

  a.category-card:hover,
  .post-card:hover,
  .pick-card:hover,
  .pick-button:hover:not(.is-pending),
  .button-primary:hover,
  .affiliate-button:hover,
  .aivatar-button:hover {
    transform: none;
  }
}

/* Mobil zurückhaltender: kürzere Distanz, kein Hover-Lift
   (Touch-Geräte haben ohnehin keinen echten Hover-Zustand). */

@media (max-width: 760px) {

  html.js-motion [data-reveal="left"] {
    transform: translateX(-16px);
  }

  html.js-motion [data-reveal="right"] {
    transform: translateX(16px);
  }

  html.js-motion [data-reveal="up"] {
    transform: translateY(14px);
  }

  html.js-motion [data-reveal] {
    transition-duration: 550ms;
  }
}


/* Nie Formulare oder Rechtstexte animieren, auch nicht,
   falls versehentlich ein data-reveal dort landet. */

.legal-content [data-reveal],
form [data-reveal],
.kontakt-form [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* =========================================================
   OVERFLOW-SCHUTZ FÜR REVEAL-ANIMATIONEN
   ---------------------------------------------------------
   [data-reveal="left"/"right"] verschiebt Elemente per
   translateX(), bevor sie eingeblendet werden. Ist das
   verschobene Element genauso breit wie sein Container (z. B.
   ein volles Produktbild auf Mobil), ragt es im Vorzustand
   kurzzeitig über den Viewport hinaus und würde ohne diese
   Regel einen echten horizontalen Scrollbalken erzeugen.
   overflow-x: hidden kappt nur diesen Vorzustand optisch --
   das Layout selbst bleibt unverändert.
   ========================================================= */

html, body {
  overflow-x: hidden;
}