/* ============================================================
   Lyzio — Motion & Depth layer (ADDITIV, vollständig reversibel)
   Entfernen: die zwei Zeilen motion.css + motion.js aus der Seite
   nehmen — der Rest bleibt exakt wie vorher.
   ============================================================ */

/* ---- Scroll-Reveal ------------------------------------------------ */
.reveal-init{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.reveal-in{ opacity:1; transform:none; }

/* ---- Hero: lebendiger Hintergrund + gestaffelte Einblendung ------- */
.heroB{ position:relative; overflow:hidden; isolation:isolate; }
.heroB::before{
  content:""; position:absolute; inset:-25% -12% auto -12%; height:150%; z-index:-2;
  background:
    radial-gradient(42% 55% at 16% 18%, color-mix(in oklab, var(--primary) 18%, transparent), transparent 70%),
    radial-gradient(38% 52% at 86% 12%, color-mix(in oklab, var(--primary) 13%, transparent), transparent 70%),
    radial-gradient(46% 60% at 72% 92%, rgba(20,184,166,.12), transparent 72%);
  animation:auroraDrift 20s ease-in-out infinite alternate;
}
.heroB::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(15,23,42,.055) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
          mask-image:linear-gradient(180deg,#000,transparent 78%);
  opacity:.55;
}
.heroB .container{ position:relative; z-index:1; }
@keyframes auroraDrift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-3%,2%,0) scale(1.07); }
}
.heroB .inner > *{ animation:heroUp .72s var(--ease-out) both; }
.heroB .inner > *:nth-child(1){ animation-delay:.04s; }
.heroB .inner > *:nth-child(2){ animation-delay:.11s; }
.heroB .inner > *:nth-child(3){ animation-delay:.18s; }
.heroB .inner > *:nth-child(4){ animation-delay:.25s; }
.heroB .inner > *:nth-child(5){ animation-delay:.32s; }
@keyframes heroUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ---- Karten-Tiefe & Icon-Mikrointeraktion ------------------------- */
.card-hover{
  transition:transform .26s var(--ease-out), box-shadow .26s var(--ease-out), border-color .26s var(--ease-out);
  will-change:transform;
}
.icon-tile{ transition:transform .28s var(--ease-out); }
@media (hover: hover) and (pointer: fine){
  .card-hover:hover{ transform:translateY(-5px); }
  .tile:hover .icon-tile,
  .card-hover:hover .icon-tile{ transform:translateY(-2px) scale(1.08); }
}

/* ---- Buttons: Glanz-Sweep (Press-Feedback kommt aus shared.css) ---- */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; top:0; left:-150%; width:65%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn-primary:hover::after{ animation:btnSheen .85s var(--ease-in-out); }
@keyframes btnSheen{ to{ left:160%; } }

/* ---- Statband: Zahlen bekommen Präsenz ---------------------------- */
.statband .n{ transition:color .3s var(--ease); }

/* ---- Nav-Links: animierter Unterstrich ---------------------------- */
.nav-links a{ position:relative; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--primary); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .24s var(--ease-out);
}
.nav-links a:hover::after{ transform:scaleX(1); }

/* ---- Barrierefrei: Bewegung respektieren -------------------------- */
@media (prefers-reduced-motion: reduce){
  .heroB::before{ animation:none; }
  .heroB .inner > *{ animation:none; }
  .reveal-init{ opacity:1 !important; transform:none !important; }
  .card-hover:hover{ transform:none; }
}