/* INOSYS Design-Effekte – Frontend
 * Farben kommen als CSS-Variablen aus den Einstellungen (--ppfx-a, --ppfx-b, --ppfx-glow …).
 * Jeder Effekt hängt an einer Klasse, die das Plugin automatisch setzt, wenn im
 * WPBakery-Tab „Effekte“ das Häkchen gesetzt ist.
 */

@property --ppfx-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

@keyframes ppfxAng     { to { --ppfx-ang: 360deg; } }
@keyframes ppfxReveal  { from { opacity: 0; transform: translateY(48px) scale(.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
/* Schweben der Glow-Box: eine Welle (--ppfx-wave) läuft mit, beim Hover wird nur
 * ihre Stärke (--ppfx-amp) weich auf- und abgeregelt → organisch, ohne Absatz. */
@property --ppfx-amp  { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --ppfx-wave { syntax: '<number>'; inherits: false; initial-value: -1; }
@keyframes ppfxWave    { 0%, 100% { --ppfx-wave: -1; } 50% { --ppfx-wave: 1; } }
@keyframes ppfxBreath  { 0%, 100% { opacity: .55; scale: 1; } 50% { opacity: 1; scale: 1.12; } }
@keyframes ppfxFloat   { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

/* ---------- 1. Einblenden beim Scrollen: unscharf → scharf ---------- */
@supports (animation-timeline: view()) {
	.ppfx-reveal {
		animation: ppfxReveal linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 85%;
	}
	.ppfx-reveal.ppfx-float {
		animation: ppfxReveal linear both, ppfxFloat 7s ease-in-out infinite;
		animation-timeline: view(), auto;
		animation-range: entry 5% entry 85%, normal;
	}
}

/* Ersatz für Browser ohne scroll-gesteuerte CSS-Animationen (Firefox, ältere Safari):
 * ppfx.js setzt html.ppfx-fallback und blendet per IntersectionObserver ein. */
html.ppfx-fallback .ppfx-reveal {
	opacity: 0;
	transform: translateY(48px) scale(.98);
	filter: blur(8px);
	transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), filter .9s cubic-bezier(.2, .7, .2, 1);
}
html.ppfx-fallback .ppfx-reveal.is-in,
html.ppfx-fallback body.ppfx-nomotion .ppfx-reveal { opacity: 1; transform: none; filter: none; }

/* ---------- 2. Leuchtende Außenkante (innen ruhig) ---------- */
.ppfx-edge { position: relative; transition: box-shadow .6s; }
.ppfx-edge::before {
	content: "";
	position: absolute; inset: 0; z-index: 2;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient(from var(--ppfx-ang), transparent 0deg 200deg, var(--ppfx-b) 265deg, var(--ppfx-a) 325deg, #fff 342deg, var(--ppfx-a) 352deg, transparent 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .6s;
	pointer-events: none;
	animation: ppfxAng 6s linear infinite;
}
.ppfx-edge:hover { box-shadow: 0 0 0 1px var(--ppfx-ring), 0 30px 90px -30px var(--ppfx-glow); }
.ppfx-edge:hover::before { opacity: 1; }

/* ---------- 3. Atmender Lichtschein im Hintergrund ---------- */
.ppfx-shine { position: relative; isolation: isolate; }
.ppfx-shine::after {
	content: "";
	position: absolute; z-index: -1;
	inset: 8% 6%;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--ppfx-glow), transparent);
	filter: blur(40px);
	pointer-events: none;
	animation: ppfxBreath 6s ease-in-out infinite;
}

/* ---------- 4. Sanftes Dauerschweben ---------- */
.ppfx-float { animation: ppfxFloat 7s cubic-bezier(.37, 0, .63, 1) infinite; }

/* ---------- 5. Glow-Box (Spalte) ----------
 * Außen (die Spalte): Shine + verschwommener umlaufender Glow
 * Innen (erstes Kind der Spalte): die eigentliche Box mit scharfem Lichtrand
 */
.ppfx-glowbox { position: relative; z-index: 0; isolation: auto; }
.ppfx-glowbox > :first-child {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	border-radius: var(--ppfx-radius, 24px);
	border: 1px solid rgba(120, 180, 255, .15);
	padding: clamp(24px, 3vw, 36px);
	background: var(--ppfx-card-dark);
	--ppfx-amp: 0;
	translate: 0 calc(var(--ppfx-amp) * (-12.5px - var(--ppfx-wave) * 5.5px));
	transition: --ppfx-amp 1.4s cubic-bezier(.37, 0, .63, 1), box-shadow .9s ease, border-color .7s ease;
	animation: ppfxWave 3.8s cubic-bezier(.37, 0, .63, 1) infinite paused;
}
.ppfx-card-light > :first-child { background: var(--ppfx-card-light); border-color: rgba(0, 50, 109, .13); }
.ppfx-card-none  > :first-child { background: transparent; border-color: transparent; }

.ppfx-glowbox > :first-child::before {
	content: "";
	position: absolute; inset: -1px;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient(from var(--ppfx-ang), transparent 0deg 200deg, var(--ppfx-b) 265deg, var(--ppfx-a) 325deg, #fff 342deg, var(--ppfx-a) 352deg, transparent 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .55s;
	pointer-events: none;
	animation: ppfxAng 3.2s linear infinite;
	display: block;
}
.ppfx-glowbox::before,
.ppfx-glowbox::after {
	content: "";
	position: absolute; z-index: -1;
	pointer-events: none;
	opacity: 0;
	--ppfx-amp: 0;
	translate: 0 calc(var(--ppfx-amp) * (-12.5px - var(--ppfx-wave) * 5.5px));
	transition: --ppfx-amp 1.4s cubic-bezier(.37, 0, .63, 1), opacity .7s ease;
}
.ppfx-glowbox::before {           /* Shine dahinter */
	inset: 4% 2%;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--ppfx-glow), transparent);
	filter: blur(34px);
	scale: calc(1 + var(--ppfx-amp) * .1);
	animation: ppfxWave 3.8s cubic-bezier(.37, 0, .63, 1) infinite paused;
}
.ppfx-glowbox::after {            /* verschwommener umlaufender Glow */
	inset: 0;
	border-radius: var(--ppfx-radius, 24px);
	background: conic-gradient(from var(--ppfx-ang), transparent 0deg 190deg, var(--ppfx-b) 255deg, var(--ppfx-a) 330deg, transparent 360deg);
	filter: blur(18px);
	animation: ppfxAng 3.2s linear infinite, ppfxWave 3.8s cubic-bezier(.37, 0, .63, 1) infinite;
	animation-play-state: running, paused;
}
.ppfx-glowbox:hover > :first-child {
	--ppfx-amp: 1;
	animation-play-state: running;
	border-color: transparent;
	box-shadow: 0 34px 80px -34px var(--ppfx-glow);
}
.ppfx-glowbox:hover > :first-child::before { opacity: 1; }
.ppfx-glowbox:hover::after  { --ppfx-amp: 1; opacity: .9; animation-play-state: running, running; }
.ppfx-glowbox:hover::before { --ppfx-amp: 1; opacity: 1;  animation-play-state: running; }

.ppfx-light .ppfx-glowbox > :first-child { border-color: var(--ppfx-line, rgba(0, 50, 109, .13)); }

/* ---------- Nacheinander einblenden ---------- */
.ppfx-stagger .ppfx-st {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--ppfx-i, 0) * 140ms + 120ms);
}
.ppfx-stagger.is-in .ppfx-st { opacity: 1; transform: none; }

/* ---------- Laufband ---------- */
@keyframes ppfxMarquee { to { transform: translateX(-50%); } }
.ppfx-marquee { overflow: hidden; }
.ppfx-marquee .ppfx-mq-track {
	display: flex; width: max-content; gap: 3.5rem;
	white-space: nowrap;
	animation: ppfxMarquee 38s linear infinite;
}
.ppfx-marquee .ppfx-mq-track > * { flex: none; margin: 0 !important; }
.ppfx-marquee:hover .ppfx-mq-track { animation-play-state: paused; }

/* ---------- Linie zeichnen ---------- */
@keyframes ppfxDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ppfx-draw :is(hr, .w-separator, .w-separator-h) { transform-origin: left center; }
@supports (animation-timeline: view()) {
	.ppfx-draw :is(hr, .w-separator, .w-separator-h) {
		animation: ppfxDraw linear both;
		animation-timeline: view();
		animation-range: entry 20% cover 45%;
	}
}
html.ppfx-fallback .ppfx-draw :is(hr, .w-separator, .w-separator-h) { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) .2s; }
html.ppfx-fallback .ppfx-draw.is-in :is(hr, .w-separator, .w-separator-h) { transform: scaleX(1); }

/* ---------- Hell/Dunkel-Umschalter ---------- */
.ppfx-theme-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	border-radius: 12px;
	border: 1px solid var(--color-content-border, rgba(120,180,255,.15));
	background: rgba(0, 186, 255, .08);
	color: inherit;
	cursor: pointer;
	transition: box-shadow .3s, border-color .3s;
}
.ppfx-theme-toggle:hover { border-color: var(--ppfx-a); box-shadow: 0 0 22px -6px var(--ppfx-glow); }
.ppfx-theme-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ppfx-theme-toggle .ppfx-ico-moon { display: none; }
html.ppfx-light .ppfx-theme-toggle .ppfx-ico-sun { display: none; }
html.ppfx-light .ppfx-theme-toggle .ppfx-ico-moon { display: block; }
html.ppfx-switching, html.ppfx-switching * { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }

/* ---------- 6. Formular: nur das Feld mit Cursor leuchtet ---------- */
.ppfx-focusglow :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], textarea, select) {
	transition: border-color .3s, box-shadow .35s;
}
.ppfx-focusglow :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], textarea, select):hover {
	border-color: var(--ppfx-ring);
}
.ppfx-focusglow :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], textarea, select):focus {
	outline: none;
	border-color: var(--ppfx-a) !important;
	box-shadow: 0 0 0 1px var(--ppfx-a), 0 0 22px -2px var(--ppfx-glow), 0 0 70px -12px var(--ppfx-glow) !important;
}

/* ---------- 6b. Auswahllisten im eigenen Design ---------- */
.ppfx-select-panel {
	--ppfx-sel-bg: #0C1A31;
	--ppfx-sel-text: #FFFFFF;
	--ppfx-sel-muted: rgba(255, 255, 255, .45);
	position: fixed; z-index: 100000;
	box-sizing: border-box;
	max-height: min(320px, 60vh);
	overflow-y: auto;
	padding: 6px;
	border-radius: 16px;
	background: var(--ppfx-sel-bg);
	border: 1px solid var(--ppfx-ring);
	box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .65), 0 0 30px -10px var(--ppfx-glow);
	opacity: 0;
	transform: translateY(-6px) scale(.98);
	transform-origin: top center;
	transition: opacity .16s ease, transform .16s ease;
	scrollbar-width: thin;
	scrollbar-color: var(--ppfx-ring) transparent;
}
.ppfx-select-panel.is-up { transform-origin: bottom center; transform: translateY(6px) scale(.98); }
.ppfx-select-panel.is-open { opacity: 1; transform: none; }
.ppfx-select-item {
	position: relative;
	padding: 11px 38px 11px 14px;
	border-radius: 10px;
	color: var(--ppfx-sel-text);
	line-height: 1.35;
	cursor: pointer;
	user-select: none;
	transition: background-color .2s ease, color .2s ease, text-shadow .3s ease, box-shadow .3s ease;
}
.ppfx-select-item + .ppfx-select-item { margin-top: 2px; }
.ppfx-select-item.is-active {
	background: rgba(0, 186, 255, .09);
	box-shadow: inset 0 0 0 1px var(--ppfx-ring), 0 0 18px -8px var(--ppfx-glow);
	text-shadow: 0 0 8px var(--ppfx-glow), 0 0 18px var(--ppfx-glow);
}
.ppfx-select-item.is-selected { color: var(--ppfx-a); }
.ppfx-select-item.is-selected::after {
	content: ""; position: absolute; right: 14px; top: 50%;
	width: 9px; height: 5px; margin-top: -4px;
	border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}
.ppfx-select-item.is-disabled { color: var(--ppfx-sel-muted); cursor: default; background: none; text-shadow: none; }
html.ppfx-light .ppfx-select-panel {
	--ppfx-sel-bg: #FFFFFF;
	--ppfx-sel-text: #00224A;
	--ppfx-sel-muted: rgba(0, 34, 74, .4);
	box-shadow: 0 18px 40px -16px rgba(0, 34, 74, .28), 0 0 24px -12px var(--ppfx-glow);
}
html.ppfx-light .ppfx-select-item.is-active { background: rgba(0, 122, 215, .07); box-shadow: inset 0 0 0 1px var(--ppfx-ring); text-shadow: 0 0 12px rgba(0, 186, 255, .35); color: #007AD7; }
html.ppfx-light .ppfx-select-item.is-selected { color: #007AD7; }
@media (prefers-reduced-motion: reduce) { .ppfx-select-panel { transition: none; } }

/* ---------- 7. Menü-Sprung: Überblendung ---------- */
.ppfx-veil {
	position: fixed; inset: 0; z-index: 99;
	opacity: 0;
	pointer-events: none;
	transition: opacity 120ms ease;
}
.ppfx-veil.is-on { opacity: 1; }

/* ---------- Ruhig: Animationen aus (Einstellung oder Betriebssystem) ---------- */
body.ppfx-nomotion .ppfx,
body.ppfx-nomotion .ppfx *,
body.ppfx-nomotion .ppfx::before,
body.ppfx-nomotion .ppfx::after,
body.ppfx-nomotion .ppfx *::before,
body.ppfx-nomotion .ppfx *::after { animation: none !important; }

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