/* ============================================================
   Aviros — Motion & 3D Layer (nach style.css einbinden)
   Geschmackvoll, GPU-schonend (nur transform/opacity), abschaltbar.
   ============================================================ */

/* ---------- Cineastischer Hero-Einstieg (gestaffelt) ---------- */
@keyframes ff-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
html.js .hero-copy>*{opacity:0;animation:ff-rise .9s cubic-bezier(.2,.8,.2,1) forwards}
html.js .hero-copy>.eyebrow{animation-delay:.05s}
html.js .hero-copy>h1{animation-delay:.16s}
html.js .hero-copy>.lead{animation-delay:.30s}
html.js .hero-copy>.hero-actions{animation-delay:.44s}
html.js .hero-copy>.risk-badges{animation-delay:.56s}
html.js .hero-visual{opacity:0;animation:ff-rise 1s cubic-bezier(.2,.8,.2,1) .5s forwards}

/* ---------- Aurora: langsam wabernde Farbflächen im Hero ---------- */
.hero::before{animation:ff-aurora1 16s ease-in-out infinite alternate}
.hero::after{animation:ff-aurora2 20s ease-in-out infinite alternate}
@keyframes ff-aurora1{from{transform:translate(0,0) scale(1)}to{transform:translate(-40px,30px) scale(1.12)}}
@keyframes ff-aurora2{from{transform:translate(0,0) scale(1)}to{transform:translate(50px,-30px) scale(1.15)}}

/* ---------- Chat-Demo: 3D-Schräglage, richtet sich auf ---------- */
.hero-visual{perspective:1400px}
html.js .chat-mock{transform:rotateY(-9deg) rotateX(3deg);transform-origin:right center;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
html.js .chat-mock.settled{transform:rotateY(0) rotateX(0)}

/* Chat-Nachrichten erscheinen nacheinander */
html.js .chat-body .msg,html.js .chat-body .chat-pill{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
html.js .chat-body .msg.show,html.js .chat-body .chat-pill.show{opacity:1;transform:none}

/* Tipp-Indikator (drei pulsierende Punkte) */
.typing{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-radius:15px;border-bottom-left-radius:4px;padding:13px 16px;display:none;gap:5px}
.typing.show{display:inline-flex}
.typing.out{align-self:flex-end;background:var(--brand);border-bottom-right-radius:4px;border-bottom-left-radius:15px;border-color:transparent}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5;animation:ff-typing 1.2s infinite}
.typing.out span{background:var(--accent-2)}
.typing span:nth-child(2){animation-delay:.18s}
.typing span:nth-child(3){animation-delay:.36s}
@keyframes ff-typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* ---------- 3D-Tilt auf Karten (per Maus, via JS-Variablen) ---------- */
.prod-grid,.price-grid,.pain-grid{perspective:1100px}
html.js .prod,html.js .pricebox,html.js .pain{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;transform-style:preserve-3d;will-change:transform}
html.js .prod.tilt,html.js .pricebox.tilt,html.js .pain.tilt{transform:perspective(1100px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(-6px)}
html.js .prod .ic,html.js .prod h3{transform:translateZ(28px)}
html.js .pain .em,html.js .pain h3{transform:translateZ(22px)}

/* ---------- Zahlen-Count-up: kein Layout-Sprung ---------- */
.proof .n{font-variant-numeric:tabular-nums}

/* ---------- Glanz-Wisch über den Haupt-Button ---------- */
.btn-accent{position:relative;overflow:hidden}
.btn-accent::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg)}
html.js .btn-accent:hover::after{animation:ff-shine .9s ease}
@keyframes ff-shine{to{left:130%}}

/* ---------- Sanftes Schweben der Float-/Stamp-Elemente bleibt ---------- */

/* ---------- Respektiere Nutzerwunsch: keine Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html.js .hero-copy>*,html.js .hero-visual{opacity:1;animation:none}
  .hero::before,.hero::after{animation:none}
  html.js .chat-mock{transform:none;transition:none}
  html.js .chat-body .msg,html.js .chat-body .chat-pill{opacity:1;transform:none}
  html.js .prod.tilt,html.js .pricebox.tilt,html.js .pain.tilt{transform:translateY(-6px)}
  .btn-accent::after{display:none}
  .typing{display:none !important}
}