/* Wow-Effekte der Startseite: Überschriften bauen sich auf, Partysticker24 im Gerät,
   Lichtkegel und leuchtende Kartenränder am Computer. Gesteuert von wow.js. */

/* 1. Überschriften: Wort für Wort aus einer Maske (nur wenn JavaScript läuft) */
.rw-ready .rw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.rw-ready .rwi{display:inline-block;transform:translateY(108%);transition:transform .9s cubic-bezier(.16,.84,.24,1) calc(var(--i) * 60ms)}
.rw-ready .rw-in .rwi{transform:none}

/* 2. Partysticker24 im Laptop und Handy, der Shop scrollt von selbst */
#start .shop-devices{position:relative;padding:26px 26px 34px;background:radial-gradient(120% 90% at 50% 0%,#fbf8f2 0%,#efe8dc 100%);overflow:hidden}
#start .shop-laptop{position:relative;width:88%;margin:0 auto;filter:drop-shadow(0 26px 30px #3a2f2240)}
#start .shop-laptop-lid{position:relative;padding:3.2% 3.2% 2.6%;border-radius:14px 14px 4px 4px;background:linear-gradient(#2a2d31,#17191c);box-shadow:inset 0 0 0 1px #ffffff1c}
#start .shop-laptop-lid::before{content:"";position:absolute;top:1.25%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#3d4247}
#start .shop-laptop-base{height:12px;margin:0 -6%;border-radius:0 0 14px 14px;background:linear-gradient(#d9dce0,#a9adb3);box-shadow:inset 0 2px 0 #fff8}
#start .shop-laptop-base::after{content:"";display:block;width:16%;height:5px;margin:0 auto;border-radius:0 0 6px 6px;background:#8e9399}
#start .shop-screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:#f3efe7;container-type:size}
#start .shop-screen img{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:auto;object-fit:initial;will-change:transform}
#start .shop-phone{position:absolute;right:5%;bottom:22px;width:24%;padding:2.2% 1.8%;border-radius:22px;background:linear-gradient(#24272b,#111316);box-shadow:0 22px 40px #2a201640,inset 0 0 0 1px #ffffff20;z-index:2}
#start .shop-phone .shop-screen{aspect-ratio:9/19;border-radius:14px}
#start .shop-phone::before{content:"";position:absolute;top:3.4%;left:50%;width:26%;height:2.4%;margin-left:-13%;border-radius:9px;background:#000;z-index:3}
@keyframes shop-scroll{0%,8%{transform:translateY(0)}46%,56%{transform:translateY(calc(-100% + 100cqh))}94%,100%{transform:translateY(0)}}
#start .shop-devices.is-playing .shop-screen img{animation:shop-scroll 22s cubic-bezier(.45,.05,.35,1) infinite}
#start .shop-devices.is-playing .shop-phone .shop-screen img{animation-duration:18s;animation-delay:-3s}
#start .shop-project-cover:hover .shop-screen img{animation-play-state:paused}
#start .shop-live-badge{position:absolute;left:26px;top:22px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:#fff;color:#2c3a2f;font-size:11px;font-weight:750;box-shadow:0 6px 16px #3a2f2224}
#start .shop-live-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#2fb36d;box-shadow:0 0 0 0 #2fb36d88;animation:live-dot 1.8s infinite}
@keyframes live-dot{70%{box-shadow:0 0 0 7px #2fb36d00}100%{box-shadow:0 0 0 0 #2fb36d00}}
@media(max-width:650px){#start .shop-devices{padding:18px 14px 26px}#start .shop-phone{right:3%;bottom:16px;width:28%;border-radius:16px}#start .shop-live-badge{left:14px;top:12px;font-size:10px}}

/* 4. Lichtkegel in dunklen Bereichen und leuchtende Kartenränder (nur mit Maus) */
.has-spot{position:relative;isolation:isolate}
.spot-light{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(520px circle at var(--sx,50%) var(--sy,50%),#4aa3ff26,transparent 65%)}
.has-spot:hover>.spot-light{opacity:1}
.has-glow{position:relative}
.glow-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;padding:1.5px;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),#5fb4ffee,#5fb4ff00 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);z-index:2}
.glow-ring::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),#5fb4ff14,transparent 70%)}
.has-glow:hover>.glow-ring{opacity:1}

@media(prefers-reduced-motion:reduce){
  .rw-ready .rwi{transform:none;transition:none}
  #start .shop-devices.is-playing .shop-screen img{animation:none}
  #start .shop-live-badge::before{animation:none}
}