/* Effekte – Donaz Entertainment */

/* Scroll-Fortschritt */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:200;box-shadow:0 0 12px rgba(124,92,255,.6)}

/* Verlaufstext mit Glanz */
.grad{background:linear-gradient(120deg,#7c5cff 0%,#22d3ee 35%,#a78bfa 65%,#7c5cff 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:200% center}}

/* Navigation */
header{transition:background .3s,border-color .3s}
header.scrolled{background:rgba(11,13,18,.92);border-bottom-color:#2d3650}
nav ul a{position:relative;padding:4px 0;transition:color .25s}
nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
nav ul a:hover::after,nav ul a.active::after{transform:scaleX(1)}
nav ul a.active{color:var(--text)}

/* Hero */
.heroblock{position:relative;overflow:hidden}
.heroblock #particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.heroblock .glow{position:absolute;left:50%;top:38%;width:900px;height:900px;border-radius:50%;pointer-events:none;transform:translate(-50%,-55%);background:radial-gradient(circle,rgba(124,92,255,.22),rgba(34,211,238,.07) 45%,transparent 65%)}
.heroblock::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;pointer-events:none;background:linear-gradient(transparent,var(--bg))}
.heroblock .hero{position:relative;z-index:1}
.hero-inner{will-change:transform,opacity}
.scroll-hint{position:absolute;bottom:18px;left:50%;width:22px;height:36px;border:1.5px solid rgba(255,255,255,.28);border-radius:12px;transform:translateX(-50%)}
.scroll-hint::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:var(--accent2);transform:translateX(-50%);animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* Buttons: Puls + Lichtreflex */
.btn,.store{position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,opacity .2s,background .3s,border-color .3s}
.btn:not(.ghost){animation:pulse 2.8s infinite}
.btn:hover{transform:scale(1.04)}
.btn.ghost:hover{background:rgba(124,92,255,.12);border-color:var(--accent)}
.btn:not(.ghost)::after,.store::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:45%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-170%) skewX(-20deg);animation:btnsweep 4.5s ease-in-out infinite}
@keyframes btnsweep{0%,55%{transform:translateX(-170%) skewX(-20deg)}100%{transform:translateX(380%) skewX(-20deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(124,92,255,.5)}70%{box-shadow:0 0 0 16px rgba(124,92,255,0)}100%{box-shadow:0 0 0 0 rgba(124,92,255,0)}}

/* Chips */
.chips a{transition:border-color .25s,transform .25s,background .25s}
.chips a:hover{transform:translateY(-2px);background:#1b2132}

/* Zahlen */
.stats{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));padding:8px 0 64px}
.stat{position:relative;overflow:hidden;text-align:center;padding:36px 16px 30px;border-radius:20px;background:linear-gradient(180deg,#171c2b,var(--card) 75%);border:1px solid var(--line);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.stat::after{content:"";position:absolute;left:50%;top:-60px;width:220px;height:130px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(124,92,255,.3),transparent);pointer-events:none}
.stat:hover{transform:translateY(-6px);border-color:rgba(124,92,255,.55);box-shadow:0 24px 50px rgba(0,0,0,.45)}
.stat b{display:block;font-size:clamp(2.2rem,5vw,3rem);line-height:1.1;letter-spacing:-.02em}
.stat>span{display:block;margin-top:6px;color:var(--muted);font-size:.9rem}

/* Karten: Anheben + Spotlight */
.card,.app{position:relative;overflow:hidden}
.card>*,.app>*{position:relative}
.card::before,.app::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(124,92,255,.17),transparent 45%);opacity:0;transition:opacity .3s}
.card:hover::before,.app:hover::before{opacity:1}
.card:hover{transform:translateY(-6px);border-color:rgba(124,92,255,.55);box-shadow:0 26px 50px rgba(0,0,0,.45)}
.app:hover{box-shadow:0 26px 50px rgba(0,0,0,.45)}
.card .ask{transition:transform .25s}
.card .ask:hover{transform:translateX(4px);text-decoration:none}
.app img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.app:hover img{transform:scale(1.08) rotate(-3deg)}

/* Einblenden beim Scrollen */
.rv{opacity:0;translate:0 40px;transition:opacity 1s cubic-bezier(.2,.8,.2,1),translate 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.rv.visible{opacity:1;translate:none}
.card.rv,.app.rv,.stat.rv{transition:opacity 1s cubic-bezier(.2,.8,.2,1) var(--d,0s),translate 1s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}

/* Zeitleiste */
.timeline li.visible::before{animation:dot 2.6s ease-out 1}
@keyframes dot{0%{box-shadow:0 0 0 0 rgba(124,92,255,.7)}100%{box-shadow:0 0 0 14px rgba(124,92,255,0)}}
.pills span{transition:border-color .25s,transform .25s,background .25s}
.pills span:hover{border-color:var(--accent);transform:translateY(-2px);background:#222a40}

/* Formular */
input,textarea,select{transition:border-color .25s,box-shadow .25s,background .25s}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px rgba(124,92,255,.18)}

/* Weniger Bewegung */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;translate:none}
  .btn::after,.store::after,.scroll-hint,#particles{display:none}
}
@media(max-width:640px){
  .heroblock .glow{width:520px;height:520px}
  .scroll-hint{display:none}
}