/* ==========================================================================
   PIXEL+MORE — Motion: Scroll-Reveals & dezente Bewegung.
   1:1 aus dem Ofira-System übernommen, Farben auf Rot angepasst.
   Doppelt gegated: html.js (head.js) + prefers-reduced-motion.
   ========================================================================== */

/* ====================================================================== */
/* Reveal-System (.rv) — Standard sichtbar, JS blendet sanft ein          */
/* ====================================================================== */
.js .rv,
.js .fade-in {
  opacity: 0;
  transform: translateY(16px);
}
.js .rv.is-in,
.js .fade-in.is-in,
.js .fade-in.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-reveal) var(--easing-out),
              transform var(--motion-reveal) var(--easing-out);
  transition-delay: var(--rv-delay, 0ms);
}

/* Interaktive Karten: Nach dem Reveal soll der Hover-Lift greifen. Das Reveal
   fixiert sonst transform:none mit höherer Spezifität und blockiert den Lift;
   zudem fehlten Schatten und Rahmen in dessen Transition. */
.js .tile.rv.is-in,
.js .card.rv.is-in,
.js .pillar.rv.is-in {
  transition: opacity var(--motion-medium) var(--easing-out),
              transform var(--motion-medium) var(--easing),
              box-shadow var(--motion-medium) var(--easing),
              border-color var(--motion-medium) var(--easing);
}
.js .tile.rv.is-in:hover,
.js .card.rv.is-in:hover,
.js .pillar.rv.is-in:hover {
  transform: translateY(-4px);
}

/* ====================================================================== */
/* Micro-Motion & Loops (nur ohne Reduced-Motion)                         */
/* ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Aurora-Grund-Wash driftet langsam und subtil */
  .stage--aurora::after {
    animation: aurora-drift 26s var(--easing) infinite alternate;
  }
  @keyframes aurora-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -2%, 0); }
  }

  /* Dezenter Licht-Glint, der periodisch von rechts nach links durch den
     Link-Text läuft (heller Streifen wandert, dann kurze Pause).
     1:1 aus Ofira; Farbe des Streifens auf helles Rot angepasst. */
  .link-shimmer {
    background-image: linear-gradient(100deg,
      currentColor 0%, currentColor 42%,
      var(--teal-200) 50%,
      currentColor 58%, currentColor 100%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    background-position: 100% 0;
    animation: link-shimmer 4.5s linear infinite;
  }
  @keyframes link-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
  }
}

/* ====================================================================== */
/* Reduced Motion: alles statisch & sichtbar                              */
/* ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .rv,
  .js .fade-in {
    opacity: 1;
    transform: none;
  }
}