/* ============================================================
   Autismus & ich — Animationen & Mikrointeraktionen
   ============================================================ */

/* Page enter / smooth transition */
.page-enter{animation:pageIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Scroll reveal (Intersection Observer toggelt .in) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}
.reveal.d2{transition-delay:.12s}
.reveal.d3{transition-delay:.18s}
.reveal.d4{transition-delay:.24s}
.reveal.d5{transition-delay:.30s}

/* 3D hover for module cards */
.mod-card{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.mod-card.tilt{transition:transform .08s linear,box-shadow .3s}

/* Button micro animation shimmer */
.btn-cta{position:relative;overflow:hidden}
.btn-cta::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .6s}
.btn-cta:hover::after{left:140%}

/* Floating hero blobs */
.hero::before{animation:float1 11s ease-in-out infinite}
.hero::after{animation:float2 13s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}

/* Pulse for unlock/lock */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,51,154,.4)}70%{box-shadow:0 0 0 14px rgba(232,51,154,0)}100%{box-shadow:0 0 0 0 rgba(232,51,154,0)}}
.pulse{animation:pulse 2.2s infinite}

/* Spinner */
.spin{width:42px;height:42px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--pink);
  animation:spin .8s linear infinite;margin:0 auto 1rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* Confetti pieces */
.confetti-piece{position:fixed;top:-12px;width:10px;height:14px;z-index:9999;border-radius:2px;
  will-change:transform,opacity;animation:confettiFall linear forwards;pointer-events:none}
@keyframes confettiFall{
  0%{transform:translateY(-10px) rotateZ(0);opacity:1}
  100%{transform:translateY(105vh) rotateZ(720deg);opacity:.9}
}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(30px);
  background:#12122a;color:#fff;padding:.9rem 1.4rem;border-radius:14px;box-shadow:var(--shadow-lg);
  font-weight:700;z-index:9998;opacity:0;transition:.35s cubic-bezier(.2,.8,.2,1)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Checkmark pop */
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.pop{animation:pop .4s cubic-bezier(.34,1.56,.64,1) both}

/* Count-up subtle */
.hero-stat b{animation:pop .5s both}

/* Modal */
.modal-back{position:fixed;inset:0;background:rgba(18,18,40,.55);backdrop-filter:blur(4px);z-index:200;
  display:none;align-items:center;justify-content:center;padding:1rem}
.modal-back.show{display:flex;animation:pageIn .3s both}
.modal{background:#fff;border-radius:var(--radius-lg);padding:1.8rem;max-width:440px;width:100%;box-shadow:var(--shadow-lg)}