/**
 * Lyor Core – zentrale globale Variablen und Vibe-Preset-Basis.
 * Wird von allen Lyor-Widgets genutzt; Werte pro Widget überschreibbar via Inline-Styles.
 */

/* ─── Fallback-Variablen (werden durch Widget-Inline oder Panel überschrieben) ─── */
:root {
	--lyor-accent: #c9a227;
	--lyor-accent-secondary: #8b7355;
	--lyor-obsidian: #0d0d0d;
	--lyor-glass-opacity: 0.12;
	--lyor-ease: cubic-bezier(0.19, 1, 0.22, 1);
	--lyor-reveal-dur: 0.8s;
	--lyor-font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--lyor-font-secondary: Georgia, "Times New Roman", serif;
}

/* ─── Vibe-Preset-Basis (Klassen: .lyor-vibe-hotel, .lyor-vibe-luxury, …) ─── */
.lyor-vibe-hotel {
	--lyor-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--lyor-reveal-dur: 1.5s;
}

.lyor-vibe-luxury {
	--lyor-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

.lyor-vibe-wild {
	--lyor-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.lyor-vibe-clean {
	--lyor-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.lyor-vibe-minimal {
	--lyor-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ─── Zentrale Reveal-Animationen (alle Widgets nutzen gleichen Rhythmus) ─── */
.lyor-reveal-masked {
	transition: transform var(--lyor-reveal-dur, 0.8s) var(--lyor-ease), opacity var(--lyor-reveal-dur, 0.8s) var(--lyor-ease);
}

.lyor-reveal-fade {
	transition: opacity var(--lyor-reveal-dur, 0.8s) var(--lyor-ease);
}

.lyor-reveal-liquid {
	transition: transform var(--lyor-reveal-dur, 0.8s) var(--lyor-ease), opacity var(--lyor-reveal-dur, 0.8s) var(--lyor-ease), filter var(--lyor-reveal-dur, 0.8s) var(--lyor-ease);
}

@keyframes lyor-reveal-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes lyor-reveal-slide-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes lyor-reveal-blur-in {
	from {
		opacity: 0;
		filter: blur(8px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}

/* ─── Lyor Portfolio Card (Lyor Studio OS) – GPU-optimiert, Lyor-Variablen ─── */
.lyor-portfolio-card-wrap {
	position: relative;
	overflow: hidden;
	padding: 20px;
	background: transparent;
	box-sizing: border-box;
}
.lyor-portfolio-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.lyor-card-inner {
	position: relative;
	z-index: 1;
}
.lyor-card-bg-shape {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 120%;
	height: 120%;
	background: var(--p-color-1, var(--lyor-obsidian, #0d0d0d));
	filter: blur(40px);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.8);
	transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), border-radius 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	border-radius: 50%;
	z-index: -1;
	will-change: transform;
	backface-visibility: hidden;
}
.lyor-portfolio-card--hover-morph:hover .lyor-card-bg-shape {
	opacity: 0.4;
	transform: translate(-50%, -50%) scale(1.1);
	border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
.lyor-card-image {
	overflow: hidden;
	border-radius: 8px;
}
.lyor-card-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	transition: transform 0.8s var(--lyor-ease, cubic-bezier(0.19, 1, 0.22, 1));
	will-change: transform;
	backface-visibility: hidden;
}
.lyor-portfolio-card--hover-morph:hover .lyor-card-image img {
	transform: scale(1.05);
}
.lyor-card-content {
	padding: 16px 0 0;
}
.lyor-portfolio-card-wrap .lyor-sub {
	display: block;
	font-family: var(--p-font-secondary, var(--lyor-font-secondary));
	font-weight: var(--p-sub-weight, 500);
	letter-spacing: var(--p-sub-spacing, 0.08em);
	text-transform: var(--p-sub-transform, uppercase);
	font-size: 12px;
	line-height: 1.3;
	color: var(--p-color-2, var(--lyor-accent-secondary, #8b7355));
	margin-bottom: 8px;
}
.lyor-portfolio-card-wrap .lyor-title {
	font-family: var(--p-font-primary, var(--lyor-font-primary));
	font-size: clamp(1.25rem, 2.5vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
	color: inherit;
}
@media (max-width: 767px) {
	.lyor-portfolio-card-wrap {
		padding: 12px;
	}
	.lyor-portfolio-card-wrap .lyor-card-content {
		padding-top: 12px;
	}
	.lyor-portfolio-card-wrap .lyor-sub {
		margin-bottom: 6px;
		font-size: 11px;
	}
}