/* ==========================================================================
   animations.css – Premium-Animationslayer
   Nur transform/opacity → kein CLS. prefers-reduced-motion wird respektiert.
   ========================================================================== */

/* ---------- View Transitions (Chromium) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-fade-out .22s ease-out both; }
  ::view-transition-new(root) { animation: vt-fade-in .32s ease-out both; }
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Scroll-Reveal (nur mit .js) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--stagger, 0) * 90ms);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Hero-Text-Reveal ---------- */
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.7em);
  animation: word-in .8s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms + 120ms);
}
@keyframes word-in { to { opacity: 1; transform: translateY(0); } }

/* ---------- Button-Micro-Interactions ---------- */
.btn { transform: translateZ(0); }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(.98); }
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn.is-loading { pointer-events: none; opacity: .75; }
.btn .ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none;
}
@keyframes ripple { to { transform: scale(3); opacity: 0; } }

/* ---------- Card-Hover-Glow ---------- */
.card { transition: transform .2s, box-shadow .2s; }
@media (prefers-reduced-motion: no-preference) {
  .card:hover { transform: translateY(-3px); box-shadow: 0 14px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
}

/* ---------- Input-Focus-Glow (wird per JS getriggert) ---------- */
.input-wrap:focus-within .input-glow { opacity: 1; }

/* ---------- Ergebnis-Box: Einblenden ---------- */
.result-box { transition: opacity .28s ease, transform .28s ease; }
.result-box.result-enter { opacity: 0; transform: translateY(10px); }

/* ---------- Verlauf-Liste: Stagger ---------- */
.recent-item {
  opacity: 0;
  transform: translateY(14px);
  animation: item-in .5s ease forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes item-in { to { opacity: 1; transform: translateY(0); } }

/* ---------- Skeleton / Shimmer ---------- */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; min-height: 1em;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton-card { height: 56px; }

/* ---------- Honeypot ---------- */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero h1 .word, .recent-item { animation: none !important; opacity: 1 !important; transform: none !important; }
  .skeleton::after { animation: none !important; display: none; }
  .result-box, .star-rating span, .btn, .card { transition: none !important; }
  html { scroll-behavior: auto !important; }
  .bg-mesh, .hero-particles { animation: none !important; }
}