/* ==========================================================================
   LIGHTMAGICFX.CSS - CSS3 Visual Effects & Animations
   Effekte:
   1. 3D-Perspektive (Horizontale Raumtiefe)
   2. Organisches Atmen & Schwebepuls (Bio-Breathe)
   3. Glassmorphism Lichtreflex (Shimmer / Light Sweep)
   4. Kybernetischer Ambient-Glow & Hover-Leuchten
   ========================================================================== */

/* 1. Einblenden beim Laden */
@keyframes fadeInBio {
	from {
		opacity: 0;
		transform: perspective(1000px) rotateY(4.5deg) translateY(10px);
	}
	to {
		opacity: 1;
		transform: perspective(1000px) rotateY(4.5deg) translateY(0);
	}
}

/* 2. Organisches Atmen + Kybernetisches Randglimmen */
@keyframes bioBreatheGlow {
	0%, 100% {
		transform: perspective(1000px) rotateY(4.5deg) scaleX(1) scaleY(1) translateY(0);
		border-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16), 0 0 0 rgba(236, 207, 174, 0);
	}
	50% {
		transform: perspective(1000px) rotateY(4.5deg) scaleX(1.015) scaleY(1.002) translateY(-1px);
		border-color: rgba(236, 207, 174, 0.55);
		box-shadow: 0 6px 22px rgba(0, 0, 0, 0.19), 0 0 12px rgba(236, 207, 174, 0.25);
	}
}

/* 3. Diagonale Lichtreflexion (Shimmer / Light Sweep) */
@keyframes shimmerLight {
	0% {
		transform: translateX(-150%) rotate(25deg);
		opacity: 0;
	}
	8% {
		opacity: 0.75;
	}
	28% {
		transform: translateX(250%) rotate(25deg);
		opacity: 0;
	}
	100% {
		transform: translateX(250%) rotate(25deg);
		opacity: 0;
	}
}

/* Anwenden der Effekte auf die Biografie-Box */
#biografie {
	overflow: hidden;
	transform-origin: right center;
	transform: perspective(1000px) rotateY(4.5deg);
	animation: fadeInBio 2s ease-out forwards, bioBreatheGlow 8.5s ease-in-out 2s infinite alternate;
	transition: filter .4s ease;
}

/* Hover-Leuchten per filter: transform/border/box-shadow gehören der Animation und lassen sich nicht überschreiben */
#biografie:hover {
	filter: drop-shadow(0 0 14px rgba(236, 207, 174, 0.55));
}

/* Shimmer-Pseudoelement */
#biografie::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		115deg,
		transparent 30%,
		rgba(255, 255, 255, 0.35) 50%,
		transparent 70%
	);
	pointer-events: none;
	animation: shimmerLight 8.5s ease-in-out infinite;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	#biografie,
	#biografie::after {
		animation: none;
	}
}