/* Animiertes Logo oben links auf focustrend.de (mu-plugin ft-logo.php, Quelle ~/Desktop/Focustrend_Logo).
   Das Original-Bild bleibt im Fluss (nur unsichtbar) und bestimmt Größe und Lage – die Ebenen liegen absolut darüber,
   Menü und Kopfzeile verschieben sich dadurch nicht. Bilder kommen als CSS-Variablen aus ftlogo.js (mit ?v=). */

/* Bis das Skript die Ebenen gebaut hat (nur beim ersten Aufruf je Sitzung, höchstens 3 s) */
html.ftlogo-warte .top_panel .sc_layouts_logo img,
html.ftlogo-warte .menu_mobile .sc_layouts_logo img { opacity: 0 !important; }

.ftlogo { position: relative; display: inline-block; vertical-align: middle; line-height: 0; }
.ftlogo > img.ftlogo-basis { opacity: 0 !important; }
.ftlogo-ebene { position: absolute; inset: 0; pointer-events: none; }
.ftlogo-ebene span { position: absolute; display: block; }

/* Schein um den Strich – atmet ruhig */
.ftlogo-glut {
	left: -1.7399%; top: -17.6923%; width: 29.4118%; height: 135.3846%;
	background: var(--ftlogo-glut) 0 0 / 100% 100% no-repeat;
	opacity: .22; animation: ftlogo-atmen 5.2s ease-in-out infinite;
}
.ftlogo-glut::after { content: ""; position: absolute; inset: 0; background: inherit; opacity: 0; }

/* Der blaue Strich (Originalfarben) + Lichtimpuls, der ihn hochläuft */
.ftlogo-strich { left: 2.0713%; top: 0; width: 21.7896%; height: 100%; background: var(--ftlogo-strich) 0 0 / 100% 100% no-repeat; }
.ftlogo-ebene .ftlogo-strahl {
	inset: 0;
	-webkit-mask: var(--ftlogo-strich) 0 0 / 100% 100% no-repeat; mask: var(--ftlogo-strich) 0 0 / 100% 100% no-repeat;
}
.ftlogo-strahl i, .ftlogo-glanz i { position: absolute; top: -40%; bottom: -40%; left: 50%; will-change: transform; }
.ftlogo-strahl i {
	width: 34%; margin-left: -17%;
	background: linear-gradient(90deg, rgba(160,215,250,0), rgba(170,222,255,.75) 38%, #fff 50%, rgba(170,222,255,.75) 62%, rgba(160,215,250,0));
	transform: translateX(-420%) skewX(45deg);
}

/* Buchstaben: zehn Ausschnitte desselben Bildes, damit jeder einzeln tanzen kann */
.ftlogo-b { inset: 0; background: var(--ftlogo-schrift) 0 0 / 100% 100% no-repeat; transform-origin: 50% 85%; }

/* Blauer Glanz, der schräg (parallel zum Strich) über die Schrift fährt */
.ftlogo-ebene .ftlogo-glanz {
	inset: 0;
	-webkit-mask: var(--ftlogo-schrift) 0 0 / 100% 100% no-repeat; mask: var(--ftlogo-schrift) 0 0 / 100% 100% no-repeat;
}
.ftlogo-glanz i {
	width: 11%; margin-left: -5.5%;
	background: linear-gradient(90deg, rgba(75,144,193,0), rgba(75,144,193,.92) 34%, #9fd2f3 50%, rgba(75,144,193,.92) 66%, rgba(75,144,193,0));
	transform: translateX(-820%) skewX(-45deg);
}

/* Funke an der Spitze des Strichs */
.ftlogo-ebene .ftlogo-funke {
	left: 23.53%; top: .77%; width: 13%; aspect-ratio: 1;
	transform: translate(-50%, -50%) scale(0); opacity: 0;
	background: radial-gradient(closest-side, rgba(170,222,255,.85), rgba(75,144,193,.35) 45%, rgba(75,144,193,0));
}
.ftlogo-funke svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Fokus-Rahmen (wie beim Scharfstellen einer Kamera) */
.ftlogo-ebene .ftlogo-rahmen { inset: -17% -3.2%; opacity: 0; transform: scale(1.14); }
.ftlogo-rahmen b { position: absolute; width: 4.2%; height: 17%; border: 0 solid #4b90c1; }
.ftlogo-rahmen b:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; border-top-left-radius: 3px; }
.ftlogo-rahmen b:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; border-top-right-radius: 3px; }
.ftlogo-rahmen b:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; border-bottom-left-radius: 3px; }
.ftlogo-rahmen b:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; border-bottom-right-radius: 3px; }

/* ---------- Auftritt (erster Seitenaufruf je Sitzung) ---------- */
.ftlogo.ist-intro .ftlogo-strich { animation: ftlogo-schnitt .62s cubic-bezier(.65,0,.25,1) both; }
.ftlogo.ist-intro .ftlogo-strahl i { animation: ftlogo-strahl .62s cubic-bezier(.65,0,.25,1) both; }
.ftlogo.ist-intro .ftlogo-glut { animation: ftlogo-glut-rein 2.3s ease-out .3s both; }
.ftlogo.ist-intro .ftlogo-funke { animation: ftlogo-funke .9s cubic-bezier(.2,.7,.3,1) .5s both; }
.ftlogo.ist-intro .ftlogo-b { animation: ftlogo-rein .85s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 55ms + 160ms); }
.ftlogo.ist-intro .ftlogo-glanz i { animation: ftlogo-glanz 1.25s cubic-bezier(.45,0,.2,1) 1.05s both; }
.ftlogo.ist-intro .ftlogo-rahmen { animation: ftlogo-rahmen-intro 2s cubic-bezier(.2,.9,.3,1.2) .05s both; }

/* ---------- Lichtimpuls (alle paar Sekunden + beim Darüberfahren) ---------- */
.ftlogo.ist-puls .ftlogo-strahl i { animation: ftlogo-strahl .9s cubic-bezier(.45,0,.25,1) both; }
.ftlogo.ist-puls .ftlogo-glut::after { animation: ftlogo-blitz 1.1s ease-out .1s both; }
.ftlogo.ist-puls .ftlogo-funke { animation: ftlogo-funke .85s cubic-bezier(.2,.7,.3,1) .55s both; }
.ftlogo.ist-puls .ftlogo-glanz i { animation: ftlogo-glanz 1.2s cubic-bezier(.45,0,.2,1) .5s both; }

/* ---------- Welle beim Darüberfahren ---------- */
.ftlogo.ist-welle .ftlogo-b { animation: ftlogo-welle .66s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(var(--i) * 36ms); }
.ftlogo.ist-welle .ftlogo-strich { animation: ftlogo-hoch .7s cubic-bezier(.3,.7,.3,1) both; }
@media (hover: hover) {
	.ftlogo-rahmen { transition: opacity .25s ease, transform .4s cubic-bezier(.2,.9,.3,1.25); }
	.sc_layouts_logo:hover .ftlogo:not(.ist-intro) .ftlogo-rahmen { opacity: 1; transform: none; }
}

@keyframes ftlogo-atmen { 0%, 100% { opacity: .22; } 50% { opacity: .55; } }
@keyframes ftlogo-glut-rein { 0% { opacity: 0; } 20% { opacity: .9; } 100% { opacity: .22; } }
@keyframes ftlogo-blitz { 0% { opacity: 0; } 30% { opacity: .85; } 100% { opacity: 0; } }
@keyframes ftlogo-schnitt { from { clip-path: inset(100% 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ftlogo-strahl { from { transform: translateX(-420%) skewX(45deg); } to { transform: translateX(420%) skewX(45deg); } }
@keyframes ftlogo-glanz { from { transform: translateX(-820%) skewX(-45deg); } to { transform: translateX(820%) skewX(-45deg); } }
@keyframes ftlogo-funke {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(-45deg); }
	35% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(20deg); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(90deg); }
}
@keyframes ftlogo-rein {
	0% { opacity: 0; transform: translateY(34%) scale(.86); filter: blur(5px); }
	60% { opacity: 1; filter: blur(0); }
	100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes ftlogo-welle { 0%, 100% { transform: none; } 38% { transform: translateY(-10%); } 70% { transform: translateY(2%); } }
@keyframes ftlogo-hoch { 0%, 100% { transform: none; } 40% { transform: translate(3%, -5%); } }
@keyframes ftlogo-rahmen-intro {
	0% { opacity: 0; transform: scale(1.3); }
	22% { opacity: 1; transform: scale(.98); }
	32%, 72% { opacity: 1; transform: none; }
	100% { opacity: 0; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ftlogo *, .ftlogo *::after { animation: none !important; transition: none !important; }
}