/*
 * Kickerbay Login – leichter animierter Stadionhintergrund
 * Reine CSS-Effekte: keine zusätzlichen Bilder, GIFs oder Videos.
 */

html{
  min-height:100%;
  background:#06101d;
}

body.kb-bg{
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
  min-height:100svh;
  padding:max(18px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom));
}

/* Das vorhandene Stadionbild bleibt statisch und damit schnell. */
body.kb-bg::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-5;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,8,18,.06) 0%,rgba(2,8,18,.14) 48%,rgba(2,8,18,.44) 100%),
    radial-gradient(ellipse at 50% 100%,rgba(16,185,129,.10),transparent 53%);
}

.kb-login-ambient{
  position:fixed;
  inset:0;
  z-index:-4;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
}

.kb-login-stadium,
.kb-login-stadium-overlay{
  position:absolute;
  inset:-4%;
  pointer-events:none;
  will-change:transform,opacity,filter;
}

.kb-login-stadium{
  background:url("/assets/img/kb_login_bg.png") center/cover no-repeat;
  opacity:.42;
  transform:scale(1.05) translate3d(0,0,0);
  animation:kb-login-stadium-pan 26s ease-in-out infinite alternate,
            kb-login-stadium-breathe 12s ease-in-out infinite;
}

.kb-login-stadium-overlay{
  inset:0;
  background:
    radial-gradient(ellipse at 50% 90%, rgba(73, 183, 92, .18), transparent 34%),
    linear-gradient(180deg, rgba(4,10,18,.12) 0%, rgba(5,12,22,.08) 32%, rgba(2,8,18,.24) 100%);
  opacity:.9;
  animation:kb-login-stadium-overlay 10s ease-in-out infinite;
}

/* Bewegte Lichtpunkte und sehr dezente Stadionluft. */
.kb-login-ambient::before{
  content:"";
  position:absolute;
  inset:-12%;
  opacity:.40;
  background-image:
    radial-gradient(circle at 8% 22%,rgba(255,255,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 28% 46%,rgba(147,197,253,.62) 0 1px,transparent 2px),
    radial-gradient(circle at 47% 18%,rgba(255,255,255,.60) 0 1px,transparent 2px),
    radial-gradient(circle at 66% 62%,rgba(96,165,250,.56) 0 1px,transparent 2px),
    radial-gradient(circle at 87% 30%,rgba(255,255,255,.66) 0 1px,transparent 2px),
    radial-gradient(circle at 74% 82%,rgba(52,211,153,.42) 0 1px,transparent 2px);
  background-size:180px 160px,240px 210px,290px 250px,210px 190px,260px 230px,320px 280px;
  animation:kb-login-particles 24s linear infinite;
  will-change:transform,opacity;
}

/* Vignette und sanfter grüner Lichtsaum am Spielfeld. */
.kb-login-ambient::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 88%,rgba(34,197,94,.13),transparent 42%),
    radial-gradient(ellipse at 50% 45%,transparent 38%,rgba(1,6,14,.38) 100%);
  animation:kb-login-field-pulse 8s ease-in-out infinite;
  will-change:opacity;
}

.kb-login-beam{
  position:absolute;
  top:-34vh;
  width:38vw;
  min-width:260px;
  height:150vh;
  opacity:.22;
  transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(191,219,254,.50),rgba(96,165,250,.13) 38%,transparent 76%);
  clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);
  will-change:transform,opacity;
}

.kb-login-beam--left{
  left:-14vw;
  animation:kb-login-beam-left 12s ease-in-out infinite alternate;
}

.kb-login-beam--right{
  right:-14vw;
  animation:kb-login-beam-right 14s ease-in-out infinite alternate;
}

.kb-login-glow{
  position:absolute;
  left:50%;
  bottom:-18vh;
  width:min(920px,120vw);
  height:42vh;
  transform:translate3d(-50%,0,0);
  border-radius:50%;
  opacity:.24;
  background:radial-gradient(ellipse,rgba(16,185,129,.54),rgba(59,130,246,.13) 45%,transparent 72%);
  animation:kb-login-glow 7s ease-in-out infinite;
  will-change:transform,opacity;
}

/* Karte bleibt stabil, bekommt aber einen sehr dezenten lebendigen Lichtreflex. */
.kb-login-card{
  z-index:2;
  overflow:hidden;
  transform:translateZ(0);
  box-shadow:
    0 18px 44px rgba(0,0,0,.52),
    0 0 42px rgba(59,130,246,.08);
}

.kb-login-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-55%;
  left:-75%;
  width:58%;
  height:220%;
  pointer-events:none;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  animation:kb-login-card-shine 10s ease-in-out infinite;
  will-change:transform;
}

.kb-logo-image{
  animation:kb-login-logo-breathe 5.8s ease-in-out infinite;
  will-change:filter,transform;
}

@keyframes kb-login-particles{
  0%{transform:translate3d(-1.5%,-1%,0);opacity:.34}
  50%{opacity:.58}
  100%{transform:translate3d(2.5%,3%,0);opacity:.34}
}

@keyframes kb-login-field-pulse{
  0%,100%{opacity:.70}
  50%{opacity:1}
}

@keyframes kb-login-beam-left{
  0%{transform:translate3d(-8vw,0,0) rotate(-20deg);opacity:.11}
  45%{opacity:.25}
  100%{transform:translate3d(38vw,0,0) rotate(17deg);opacity:.16}
}

@keyframes kb-login-beam-right{
  0%{transform:translate3d(8vw,0,0) rotate(20deg);opacity:.10}
  50%{opacity:.24}
  100%{transform:translate3d(-38vw,0,0) rotate(-17deg);opacity:.17}
}

@keyframes kb-login-glow{
  0%,100%{transform:translate3d(-50%,0,0) scale(.94);opacity:.18}
  50%{transform:translate3d(-50%,-2vh,0) scale(1.06);opacity:.30}
}

@keyframes kb-login-card-shine{
  0%,18%{transform:translate3d(-40%,0,0) rotate(18deg);opacity:0}
  34%{opacity:.75}
  52%,100%{transform:translate3d(390%,0,0) rotate(18deg);opacity:0}
}

@keyframes kb-login-logo-breathe{
  0%,100%{transform:translate3d(0,0,0) scale(1);filter:drop-shadow(0 0 14px rgba(88,166,255,.20))}
  50%{transform:translate3d(0,-1px,0) scale(1.012);filter:drop-shadow(0 0 19px rgba(88,166,255,.34))}
}


@keyframes kb-login-stadium-pan{
  0%{transform:scale(1.06) translate3d(-1.4%, -0.8%, 0)}
  50%{transform:scale(1.095) translate3d(1.2%, 0.6%, 0)}
  100%{transform:scale(1.075) translate3d(0.6%, -0.4%, 0)}
}

@keyframes kb-login-stadium-breathe{
  0%,100%{filter:brightness(.92) saturate(1);opacity:.38}
  50%{filter:brightness(1.02) saturate(1.06);opacity:.48}
}

@keyframes kb-login-stadium-overlay{
  0%,100%{opacity:.82}
  50%{opacity:1}
}

@media (max-width:640px){
  .kb-login-stadium{opacity:.34;animation-duration:30s, 12s}
  .kb-login-beam{width:58vw;min-width:210px;opacity:.16}
  .kb-login-ambient::before{opacity:.36}
  .kb-login-glow{height:34vh;bottom:-13vh}
  .kb-login-card::before{animation-duration:13s}
}

/* Systemeinstellung des Benutzers respektieren. */
@media (prefers-reduced-motion:reduce){
  .kb-login-stadium,
  .kb-login-stadium-overlay,
  .kb-login-ambient::before,
  .kb-login-ambient::after,
  .kb-login-beam,
  .kb-login-glow,
  .kb-login-card::before,
  .kb-logo-image{
    animation:none!important;
  }
  .kb-login-beam{opacity:.08}
  .kb-login-ambient::before{opacity:.22}
}