/* ===== aischweiz.io — Visuelle Effekte (3D, Glass, Animationen) ===== */

/* Animierter Hintergrund-Canvas */
#bg-canvas{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:-2;pointer-events:none;
}
/* Aurora-Verlauf-Layer hinter dem Canvas */
body::before{
  content:'';position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(60% 50% at 20% 10%,rgba(59,130,246,.18),transparent 60%),
    radial-gradient(50% 50% at 85% 20%,rgba(139,92,246,.16),transparent 60%),
    radial-gradient(60% 60% at 50% 100%,rgba(6,182,212,.12),transparent 60%);
  animation:auroraShift 18s ease-in-out infinite alternate;
}
@keyframes auroraShift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(0,-30px,0) scale(1.1)}
}

/* Cards: 3D-ready + Glassmorphism */
.card{
  transform-style:preserve-3d;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,border-color .2s;
  background:rgba(22,31,51,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.card > *{transform:translateZ(20px)}
.card h3{transform:translateZ(35px)}
.card .card-actions{transform:translateZ(45px)}

/* Glow-Rand bei Hover */
.card::after{
  content:'';position:absolute;inset:0;border-radius:var(--radius);
  padding:1px;background:linear-gradient(135deg,var(--brand),var(--brand2),transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.card:hover::after{opacity:1}

/* Header glass */
header{backdrop-filter:blur(16px) saturate(160%)}

/* Hero-Titel mit Glow-Pulse */
.hero h1 span{
  filter:drop-shadow(0 0 24px rgba(99,102,241,.5));
  animation:glowPulse 4s ease-in-out infinite alternate;
}
@keyframes glowPulse{
  0%{filter:drop-shadow(0 0 16px rgba(99,102,241,.35))}
  100%{filter:drop-shadow(0 0 32px rgba(139,92,246,.65))}
}

/* Buttons: Shine-Sweep */
.btn{position:relative;overflow:hidden}
.btn::before{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s;
}
.btn:hover::before{left:130%}

/* Scroll-Reveal */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.revealed{opacity:1;transform:none}

/* Floating-Badges sanft schweben */
.badge-best{animation:floaty 3s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Category-Pills hover */
#kategorien .card-cat{transition:transform .2s,box-shadow .2s;cursor:default}
#kategorien .card-cat:hover{transform:translateY(-3px) scale(1.05);
  box-shadow:0 6px 20px rgba(59,130,246,.3)}

/* Hero parallax braucht will-change */
.hero{will-change:transform,opacity}

/* Sektionen mit halbtransparentem BG, damit Canvas durchscheint */
.section{position:relative;z-index:1}
#kategorien{background:rgba(17,24,39,.55)!important;backdrop-filter:blur(8px)}
footer{background:rgba(10,14,26,.7);backdrop-filter:blur(10px)}

@media(prefers-reduced-motion:reduce){
  body::before,.hero h1 span,.badge-best{animation:none}
  .reveal{opacity:1;transform:none}
}