/* KFK-Website – Logo-Intro bei jedem Seitenstart.
   Ablauf: Spielfeldlinien zeichnen sich, ein Floorball fliegt in die Mitte, aus dem Aufprall fächern die
   fünf Kastanienblätter auf (fünf Feldspieler), КФК springt ein, Glanz, Schriftzug, dann fliegt das Logo
   in die Kopfzeile. Farben kommen aus den Seitenfarben (--board, --board-gold); das Wappen selbst bleibt
   in seinem Original-Gold. Eingebunden mit kfk-intro.js, das alles Weitere selbst aufbaut. */

/* Vorhang, solange das Intro startet: deckt die Seite ab, bevor das erste Bild gemalt wird */
html.kfki-an{overflow:hidden}
html.kfki-an::before{content:'';position:fixed;inset:0;z-index:2147483000;background:var(--board,#0A0907)}
html.kfki-laeuft::before{display:none}

.kfki{
  --kfki-logo:min(270px, max(34vmin, 46vw), 42vh);
  --kfki-wappen:#B09B40;
  position:fixed;inset:0;z-index:2147483001;color:var(--board-ink,#F4EFE4);
  font-family:var(--f-body,'Golos Text','Segoe UI',system-ui,sans-serif);
  -webkit-font-smoothing:antialiased;pointer-events:auto;contain:layout paint;
}
.kfki-grund{position:absolute;inset:0;background:
  radial-gradient(70vmax 52vmax at 50% 46%, color-mix(in srgb, var(--board-gold,#C9A24A) 9%, var(--board,#0A0907)) 0%, var(--board,#0A0907) 62%),
  var(--board,#0A0907)}
.kfki-feld,.kfki-funken{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kfki-feld{color:var(--board-gold,#C9A24A)}
.kfki-feld path,.kfki-feld circle,.kfki-feld rect{fill:none;stroke:currentColor;vector-effect:non-scaling-stroke}

.kfki-buehne{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 16px}
.kfki-logo{position:relative;width:var(--kfki-logo);aspect-ratio:390/498;max-width:100%;transform-origin:0 0;will-change:transform}
.kfki-logo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kfki-ball{position:fixed;left:0;top:0;width:calc(var(--kfki-logo) * .13);height:calc(var(--kfki-logo) * .13);
  margin:calc(var(--kfki-logo) * -.065) 0 0 calc(var(--kfki-logo) * -.065);opacity:0;will-change:transform,opacity;pointer-events:none}
.kfki-ball svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 10px rgba(255,248,225,.45))}

/* Logo genau in der Bildschirmmitte (= Mittelpunkt von Mittelkreis und Spielfeld); der Schriftzug hängt darunter und
   verschiebt das Logo nicht. 0.6385 = halbe Logohöhe (498/390/2) */
.kfki-name{position:absolute;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 32px);top:calc(50% + var(--kfki-logo) * .6385 + var(--kfki-logo) * .12);display:grid;justify-items:center;gap:10px;text-align:center}
.kfki-wort{margin:0;font:700 clamp(14px, min(3.6vw, 4.2vh), 24px)/1 var(--f-num,'Oswald','Arial Narrow',sans-serif);
  letter-spacing:.34em;padding-left:.34em;text-transform:uppercase;white-space:nowrap;color:var(--board-ink,#F4EFE4)}
.kfki-wort span{display:inline-block;opacity:0;will-change:transform,opacity}
.kfki-linie{display:block;height:1px;width:100%;background:var(--board-gold,#C9A24A);transform:scaleX(0)}
.kfki-unter{margin:0;font-size:clamp(12px, 3vw, 14px);letter-spacing:.06em;color:var(--board-muted,#A09888);opacity:0}

.kfki-blitz{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--bx,50%) var(--by,60%), rgba(255,250,232,.9) 0%, color-mix(in srgb, var(--board-gold,#C9A24A) 35%, transparent) 16%, transparent 48%)}

/* Kopfzeilen-Logo wartet unsichtbar, bis das Intro-Logo dort landet */
html.kfki-warten .marke img{visibility:hidden}

/* Startseite tritt nach dem Intro auf (ruhend sichtbar, nur die Bewegung kommt dazu) */
@keyframes kfki-auftritt{from{opacity:0;transform:translateY(18px)}}
html.kfki-auftritt .held-text > *{animation:kfki-auftritt .7s cubic-bezier(.2,.7,.2,1) both}
html.kfki-auftritt .held-text > :nth-child(2){animation-delay:.06s}
html.kfki-auftritt .held-text > :nth-child(3){animation-delay:.12s}
html.kfki-auftritt .held-text > :nth-child(4){animation-delay:.18s}
html.kfki-auftritt .held .tafel{animation:kfki-auftritt .8s .22s cubic-bezier(.2,.7,.2,1) both}

@media (prefers-reduced-motion: reduce){
  html.kfki-auftritt .held-text > *,html.kfki-auftritt .held .tafel{animation:none}
}