/* ==========================================================================
   Ofira.app — Motion: Scroll-Reveals & dezente Bewegung.
   Prinzip: ein Eintritts-Muster, konsequent; Micro-Motion <= 200ms;
   nichts loopt außer Float und Scroll-Hint. 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 hoeherer Spezifitaet und blockiert den Lift;
   zudem fehlten Schatten und Rahmen in dessen Transition. */
.js .tile.rv.is-in,
.js .card.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 {
  transform: translateY(-4px);
}

/* Mockup/Produkt-UI: zusätzlich leichte Skalierung */
.js .rv--scale { transform: translateY(16px) scale(0.97); }
.js .rv--scale.is-in { transform: none; }

/* Bild-Reveal (Foto blendet mit sanftem Zoom ein) */
.js .reveal-img { opacity: 0; transform: scale(1.04); }
.js .reveal-img.is-in,
.js .reveal-img.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--motion-slow) var(--easing-out),
              transform 700ms var(--easing-out);
  transition-delay: var(--rv-delay, 0ms);
}

/* ====================================================================== */
/* Scroll-getriebene Extras (rein CSS, progressiv)                        */
/* ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .stage-hero:not(.stage--aurora)::after {
      animation: beam-drift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes beam-drift {
      to { transform: translateY(-48px); }
    }
  }

  /* Aurora-Grund-Wash driftet langsam und subtil (kontinuierlich, ruhig) */
  .stage--aurora::before {
    animation: aurora-drift 26s var(--easing-in-out) infinite alternate;
  }
  @keyframes aurora-drift {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1.04); }
    to   { transform: translate3d(1.5%, 2%, 0) scale(1.10); }
  }

  /* Die beiden Lichtkreise steigen gegenläufig auf und ab: einer hebt sich,
     während der andere sinkt — wirkt lebendig und plastisch */
  .aurora-orb--a { animation: orb-rise 15s var(--easing-in-out) infinite alternate; }
  .aurora-orb--b { animation: orb-fall 15s var(--easing-in-out) infinite alternate; }
  @keyframes orb-rise {
    from { transform: translate3d(0, 8%, 0); }
    to   { transform: translate3d(0, -8%, 0); }
  }
  @keyframes orb-fall {
    from { transform: translate3d(0, -8%, 0); }
    to   { transform: translate3d(0, 8%, 0); }
  }

  /* Lichthof des Siegel-Medaillons hebt und senkt sich im Takt der Kreise */
  .seal-emblem::before {
    animation: seal-glow 15s var(--easing-in-out) infinite alternate;
  }
  @keyframes seal-glow {
    from { opacity: 0.65; transform: translate3d(0, -8%, 0) scale(1); }
    to   { opacity: 1;    transform: translate3d(0, 8%, 0) scale(1.14); }
  }

  /* Dezenter Licht-Glint, der periodisch von rechts nach links durch den
     Link-Text läuft (heller Streifen wandert, dann kurze Pause) */
  .link-shimmer {
    background-image: linear-gradient(100deg,
      currentColor 0%, currentColor 42%,
      var(--orange-300) 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 .rv--scale,
  .js .fade-in,
  .js .reveal-img {
    opacity: 1;
    transform: none;
  }
}