/* Tach! Songkarte: Animationen
   Alle Animationen nutzen nur transform und opacity und werden bei
   "Bewegung reduzieren" im Betriebssystem automatisch abgeschaltet. */

:root{
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Inhalte nur verstecken, wenn JavaScript läuft (sonst bleibt alles sichtbar) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--d,0ms)}
.js .rv.pop{transform:translateY(14px) scale(.94)}
.js .rv.in{opacity:1;transform:none}

/* Hero beim Laden */
.js .hero-in{opacity:0;transform:translateY(18px);animation:heroIn .8s var(--ease-out) forwards;animation-delay:var(--d,0ms)}
.js .hero-img{opacity:0;transform:scale(.94) rotate(-2deg);animation:heroImg 1s var(--ease-out) .25s forwards}
@keyframes heroIn{to{opacity:1;transform:none}}
@keyframes heroImg{to{opacity:1;transform:none}}

/* Dekorative Hände wackeln leicht */
.deco{animation:wiggle 4.5s ease-in-out infinite;transform-origin:50% 70%}
.deco:nth-of-type(2n){animation-duration:5.2s;animation-delay:-1.3s}
@keyframes wiggle{0%,100%{rotate:-4deg;translate:0 0}50%{rotate:5deg;translate:0 -6px}}

/* Herz im Label schlägt */
.beat{animation:beat 1.6s ease-in-out infinite;transform-origin:center}
@keyframes beat{0%,60%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(.96)}45%{transform:scale(1.12)}}

/* Buttons und Links */
.btn{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.btn svg{transition:transform .25s var(--ease-out)}
.btn:active{transform:scale(.97)}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(5,95,239,.35)}
  .btn:hover svg{transform:translateX(4px)}
  .lift{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),translate .35s var(--ease-out),box-shadow .35s var(--ease-out)}
  .lift:hover{translate:0 -4px;box-shadow:0 18px 40px rgba(11,27,63,.10)}
  .chip{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),translate .25s var(--ease-spring),rotate .25s var(--ease-spring)}
  .chip:hover{translate:0 -2px;rotate:-1.5deg}
}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .hero-in,.js .hero-img{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .deco,.beat{animation:none!important}
  .btn,.lift,.chip,.btn svg{transition:none!important}
}