/**
 * FluidGallery01 – style.css  v2.0
 *
 * Enthält:
 *  • Container & Canvas
 *  • CSS-Fallback (Hover bleibt auf Bild B – kein Zurücksetzen)
 *  • Navigationspfeile
 *  • Punkt-Indikatoren
 *  • Text-Overlay (Titel & Beschreibung)
 *  • Autoplay-Fortschrittsbalken
 *  • Responsive Breakpoints
 *  • Accessibility (prefers-reduced-motion)
 */

/* ═══════════════════════════════════════════════════════════════
   CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════ */
:root {
	--fg-transition-speed: 0.65s;
	--fg-ease:             cubic-bezier(0.77, 0, 0.175, 1);
	--fg-spinner-color:    rgba(255, 255, 255, 0.85);
	--fg-loader-bg:        rgba(0, 0, 0, 0.28);
	--fg-nav-bg:           rgba(0, 0, 0, 0.42);
	--fg-nav-bg-hover:     rgba(0, 0, 0, 0.68);
	--fg-dot-inactive:     rgba(255, 255, 255, 0.38);
	--fg-dot-active:       rgba(255, 255, 255, 0.92);
	--fg-overlay-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, transparent 100%);
	--fg-progress-bg:      rgba(255, 255, 255, 0.18);
	--fg-progress-fill:    rgba(255, 255, 255, 0.82);
}

/* ═══════════════════════════════════════════════════════════════
   WRAPPER & CONTAINER
   ═══════════════════════════════════════════════════════════════ */
.fg-wrapper {
	display:  block;
	width:    100%;
	position: relative;
	/* Fokusring für Keyboard-Navigation sichtbar machen */
	outline: none;
}

.fg-wrapper:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
	border-radius: 4px;
}

.fg-container {
	position:   relative;
	width:      100%;
	height:     500px;
	overflow:   hidden;
	background: #0a0a14;
	cursor:     crosshair;
	/* GPU-Layer für smooth compositing */
	will-change: transform;
	transform:  translateZ(0);
	/* Verhindert Text-Selektion beim schnellen Klicken */
	user-select: none;
	-webkit-user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   WebGL-CANVAS
   ═══════════════════════════════════════════════════════════════ */
.fg-canvas {
	display:  none;
	position: absolute;
	inset:    0;
	width:    100%  !important;
	height:   100% !important;
	image-rendering: auto;
}

/* ═══════════════════════════════════════════════════════════════
   FALLBACK-BILDER
   CSS-Only-Übergang wenn WebGL nicht verfügbar ist.

   v2 ÄNDERUNG: Hover bleibt dauerhaft auf Bild B.
   Die Klasse .fg--hover wird beim mouseenter gesetzt und
   NICHT mehr beim mouseleave entfernt.
   ═══════════════════════════════════════════════════════════════ */
.fg-fallback-img {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: opacity var(--fg-transition-speed) var(--fg-ease);
	pointer-events: none;
}

.fg-fallback-img--a { opacity: 1; z-index: 1; }
.fg-fallback-img--b { opacity: 0; z-index: 2; }

/* Hover abgeschlossen – Bild B dauerhaft sichtbar */
.fg--fallback.fg--hover .fg-fallback-img--b { opacity: 1; }
.fg--fallback.fg--hover .fg-fallback-img--a { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════
   NAVIGATIONSPFEILE
   ═══════════════════════════════════════════════════════════════ */
.fg-nav {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	z-index:         20;
	width:           46px;
	height:          46px;
	padding:         0;
	border:          none;
	border-radius:   50%;
	background:      var(--fg-nav-bg);
	color:           #fff;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
	/* Glasmorphism-Effekt */
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow:      0 2px 12px rgba(0, 0, 0, 0.35);
}

.fg-nav:hover {
	background:  var(--fg-nav-bg-hover);
	transform:   translateY(-50%) scale(1.12);
}

.fg-nav:focus-visible {
	outline:        3px solid rgba(255, 255, 255, 0.7);
	outline-offset: 2px;
}

/* Deaktiviert (kein Loop + erster/letzter Slide) */
.fg-nav:disabled {
	opacity:        0.28;
	cursor:         default;
	pointer-events: none;
}

.fg-nav--prev { left:  16px; }
.fg-nav--next { right: 16px; }

.fg-nav svg {
	width:  20px;
	height: 20px;
	flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PUNKT-INDIKATOREN
   ═══════════════════════════════════════════════════════════════ */
.fg-dots {
	position:        absolute;
	bottom:          18px;
	left:            50%;
	transform:       translateX(-50%);
	display:         flex;
	align-items:     center;
	gap:             8px;
	z-index:         20;
	padding:         6px 10px;
	border-radius:   20px;
	background:      rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.fg-dot {
	display:       block;
	width:         8px;
	height:        8px;
	padding:       0;
	border:        none;
	border-radius: 50%;
	background:    var(--fg-dot-inactive);
	cursor:        pointer;
	transition:    background 0.25s ease, transform 0.25s ease;
	/* Klickbereich vergrößern ohne Optik zu ändern */
	outline:       none;
}

.fg-dot--active,
.fg-dot:hover {
	background: var(--fg-dot-active);
	transform:  scale(1.35);
}

.fg-dot:focus-visible {
	outline:        2px solid rgba(255, 255, 255, 0.8);
	outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   TEXT-OVERLAY (Titel & Beschreibung)
   ═══════════════════════════════════════════════════════════════ */
.fg-text-overlay {
	position:       absolute;
	bottom:         0;
	left:           0;
	right:          0;
	padding:        48px 22px 52px;   /* oben Raum für Gradient, unten Raum für Dots */
	background:     var(--fg-overlay-gradient);
	z-index:        10;
	pointer-events: none;
}

/* Transition beim Slide-Wechsel */
.fg-text-overlay .fg-slide-title,
.fg-text-overlay .fg-slide-desc {
	margin:      0;
	line-height: 1.4;
	transition:  opacity 0.4s ease;
}

.fg-slide-title {
	color:       #fff;
	font-size:   clamp(0.95rem, 1.5vw + 0.5rem, 1.3rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
	margin-bottom: 4px !important;
}

.fg-slide-desc {
	color:      rgba(255, 255, 255, 0.78);
	font-size:  clamp(0.78rem, 1vw + 0.4rem, 0.95rem);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* ═══════════════════════════════════════════════════════════════
   AUTOPLAY-FORTSCHRITTSBALKEN
   ═══════════════════════════════════════════════════════════════ */
.fg-progress-bar {
	position:   absolute;
	bottom:     0;
	left:       0;
	right:      0;
	height:     3px;
	background: var(--fg-progress-bg);
	z-index:    25;
}

.fg-progress-bar__fill {
	height:     100%;
	width:      0%;
	background: var(--fg-progress-fill);
	/* Transition wird per JS dynamisch gesetzt */
}

/* ═══════════════════════════════════════════════════════════════
   LADE-INDIKATOR
   ═══════════════════════════════════════════════════════════════ */
.fg-loader {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      var(--fg-loader-bg);
	z-index:         30;
	transition:      opacity 0.4s ease;
	pointer-events:  none;
}

.fg-loader__spinner {
	display:       block;
	width:         38px;
	height:        38px;
	border:        3px solid rgba(255, 255, 255, 0.18);
	border-top:    3px solid var(--fg-spinner-color);
	border-radius: 50%;
	animation:     fg-spin 0.85s linear infinite;
}

@keyframes fg-spin {
	to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   KURSOR-INDIKATOR (Hover-Hinweis)
   ═══════════════════════════════════════════════════════════════ */
.fg-container::after {
	content:        '';
	position:       absolute;
	bottom:         14px;
	right:          16px;
	width:          9px;
	height:         9px;
	border-radius:  50%;
	background:     rgba(255, 255, 255, 0.5);
	opacity:        0;
	transition:     opacity 0.3s ease;
	pointer-events: none;
	z-index:        5;
}

.fg-container:hover::after {
	opacity:   1;
	animation: fg-pulse 1.5s ease-in-out infinite;
}

@keyframes fg-pulse {
	0%, 100% { transform: scale(1);   opacity: 0.5; }
	50%       { transform: scale(1.9); opacity: 0.15; }
}

/* ═══════════════════════════════════════════════════════════════
   ELEMENTOR-EDITOR: Hilfstext
   ═══════════════════════════════════════════════════════════════ */
.elementor-editor-active .fg-container::before {
	content:         '⬡ Fluid Gallery — Hover / Touch im Frontend';
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-family:     system-ui, sans-serif;
	font-size:       13px;
	color:           rgba(255, 255, 255, 0.78);
	background:      rgba(5, 5, 28, 0.55);
	letter-spacing:  0.04em;
	z-index:         50;
	pointer-events:  none;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
	.fg-container { height: 400px; }
	.fg-nav { width: 40px; height: 40px; }
	.fg-nav svg { width: 18px; height: 18px; }
}

/* Mobil */
@media (max-width: 767px) {
	.fg-container {
		height:  280px;
		cursor:  pointer;
	}

	/* Pfeile auf Mobile etwas kleiner & näher am Rand */
	.fg-nav        { width: 36px; height: 36px; }
	.fg-nav--prev  { left:  10px; }
	.fg-nav--next  { right: 10px; }
	.fg-nav svg    { width: 16px; height: 16px; }

	/* Kein Pseudo-Element-Indikator auf Touch */
	.fg-container::after { display: none; }

	.fg-text-overlay { padding: 36px 14px 44px; }
	.fg-dots { bottom: 14px; }
}

/* Klein-Mobil */
@media (max-width: 480px) {
	.fg-container { height: 220px; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY: Reduced Motion
   Keine Animationen für Nutzer, die das bevorzugen.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

	.fg-fallback-img {
		transition: none;
	}

	.fg-loader__spinner {
		animation:    none;
		border-color: var(--fg-spinner-color);
	}

	.fg-container::after,
	.fg-container:hover::after {
		animation: none;
		opacity:   0;
	}

	.fg-nav {
		transition: none;
	}

	.fg-dot {
		transition: none;
	}

	.fg-progress-bar__fill {
		transition: none !important;
	}
}