/*!
 * Liquid Reflect 62 – Frontend Styles
 */

.lr62-widget {
	position: relative;
	width: 100%;
	--lr62-water-color: #1e6fa8;
	--lr62-light-color: #fff3d1;
}

.lr62-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	width: 100%;
}

@media (max-width: 1024px) {
	.lr62-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.lr62-grid {
		grid-template-columns: 1fr;
	}
}

.lr62-item {
	position: relative;
	height: 400px;
	overflow: hidden;
	border-radius: 8px;
	background: #0a1a24;
	outline-offset: 3px;
	cursor: pointer;
	will-change: transform;
	transition: transform .4s ease;
}

.lr62-item:focus-visible {
	outline: 3px solid #4fc3f7;
	outline-offset: 3px;
}

.lr62-media-surface {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.lr62-source-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 62%;
	object-fit: cover;
	top: 0;
	display: block;
	z-index: 1;
}

.lr62-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	pointer-events: none;
}

.lr62-reflection {
	position: absolute;
	left: 0;
	right: 0;
	top: 62%;
	height: 38%;
	background-position: bottom;
	background-size: cover;
	transform: scaleY(-1);
	filter: blur(1px) brightness(.75);
	opacity: var(--lr62-reflection-strength, 0.55);
	z-index: 2;
}

.lr62-water-overlay {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		transparent 55%,
		color-mix(in srgb, var(--lr62-water-color) 35%, transparent) 62%,
		color-mix(in srgb, var(--lr62-water-color) 55%, transparent) 100%
	);
	mix-blend-mode: multiply;
}

/* Tiefen-Gradient-Modus: mischt zusätzlich in eine zweite (tiefere) Farbe ein */
.lr62-widget.lr62-gradient-water .lr62-water-overlay {
	background: linear-gradient(
		to bottom,
		transparent 50%,
		color-mix(in srgb, var(--lr62-water-color) 45%, transparent) 60%,
		color-mix(in srgb, var(--lr62-water-color-2, var(--lr62-water-color)) 80%, transparent) 100%
	);
}

/* Loading Skeleton (Wasser-Shimmer) */
.lr62-skeleton {
	position: absolute;
	inset: 0;
	z-index: 6;
	background: linear-gradient(
		120deg,
		#0a1a24 0%,
		#123244 20%,
		#1c4a63 40%,
		#123244 60%,
		#0a1a24 80%
	);
	background-size: 220% 220%;
	animation: lr62-shimmer 2.4s ease-in-out infinite;
	opacity: 1;
	transition: opacity .5s ease;
	pointer-events: none;
}

@keyframes lr62-shimmer {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.lr62-item.lr62-loaded .lr62-skeleton {
	opacity: 0;
	visibility: hidden;
}

/* Kaustik-Overlay (CSS-Ebene für den Fallback / zusätzliche visuelle Tiefe) */
.lr62-caustics {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	opacity: .25;
	mix-blend-mode: screen;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 0%, transparent 45%),
		radial-gradient(circle at 70% 60%, rgba(255,255,255,.35) 0%, transparent 40%),
		radial-gradient(circle at 45% 80%, rgba(255,255,255,.3) 0%, transparent 35%);
	background-size: 140% 140%;
	animation: lr62-caustics-move 9s ease-in-out infinite;
}

@keyframes lr62-caustics-move {
	0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
	50% { background-position: 30% 20%, 70% 80%, 40% 60%; }
}

/* Blasen-Partikel */
.lr62-bubbles {
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	pointer-events: none;
}

.lr62-bubble {
	position: absolute;
	bottom: -10%;
	left: var(--lr62-b-left, 50%);
	width: var(--lr62-b-size, 5px);
	height: var(--lr62-b-size, 5px);
	background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,.15) 70%);
	border-radius: 50%;
	opacity: 0;
	animation: lr62-bubble-rise var(--lr62-b-duration, 5s) ease-in var(--lr62-b-delay, 0s) infinite;
}

@keyframes lr62-bubble-rise {
	0% { transform: translate(0, 0); opacity: 0; }
	10% { opacity: .8; }
	90% { opacity: .5; }
	100% { transform: translate(var(--lr62-b-drift, 10px), -320%); opacity: 0; }
}

/* Sequenz-Modus: aktives Medium hervorheben, andere leicht "abtauchen" lassen */
.lr62-widget.lr62-sequence-mode .lr62-item {
	transition: transform .8s ease, filter .8s ease, opacity .8s ease;
}

.lr62-widget.lr62-sequence-mode .lr62-item.lr62-active {
	transform: scale(1.04);
	filter: none;
	z-index: 2;
}

.lr62-widget.lr62-sequence-mode .lr62-item.lr62-submerging {
	transform: scale(0.94) translateY(2%);
	filter: blur(2px) brightness(.75);
	opacity: .8;
}

/* Medien-Formen / Masken */
.lr62-shape-circle .lr62-item {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	height: auto;
}

.lr62-shape-wave .lr62-item {
	clip-path: polygon(
		0% 0%, 100% 0%, 100% 92%,
		92% 96%, 84% 90%, 76% 97%, 68% 91%, 60% 98%,
		52% 90%, 44% 97%, 36% 91%, 28% 98%, 20% 90%,
		12% 97%, 4% 91%, 0% 96%
	);
}

.lr62-shape-blob .lr62-item {
	border-radius: 62% 38% 55% 45% / 45% 55% 42% 58%;
}

.lr62-shape-custom .lr62-item {
	-webkit-mask-image: var(--lr62-mask-url, none);
	mask-image: var(--lr62-mask-url, none);
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	border-radius: 0;
}

/* Regen-Layer */
.lr62-rain {
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	pointer-events: none;
}

.lr62-raindrop {
	position: absolute;
	top: -12%;
	left: var(--lr62-r-left, 50%);
	width: 1px;
	height: var(--lr62-r-length, 22px);
	background: linear-gradient(to bottom, transparent, var(--lr62-rain-color, rgba(210,230,255,0.55)));
	animation: lr62-rain-fall var(--lr62-r-duration, 0.9s) linear forwards;
	opacity: var(--lr62-r-opacity, 0.7);
}

@keyframes lr62-rain-fall {
	0% { transform: translateY(0); }
	100% { transform: translateY(560%); }
}

/* Übergangs-Stile: Whirlpool-Swirl */
.lr62-widget.lr62-transition-whirlpool.lr62-sequence-mode .lr62-item.lr62-submerging {
	transform: scale(0.85) rotate(160deg);
	filter: blur(3px) saturate(1.3) brightness(.7);
	opacity: .6;
	transition: transform 1s cubic-bezier(.55,0,.35,1), filter 1s ease, opacity 1s ease;
}

.lr62-widget.lr62-transition-whirlpool.lr62-sequence-mode .lr62-item.lr62-active {
	transform: scale(1.04) rotate(0deg);
	transition: transform 1s cubic-bezier(.2,0,.2,1), filter 1s ease;
}

.lr62-widget.lr62-transition-whirlpool .lr62-lightbox.is-open .lr62-lightbox-media-wrap {
	animation: lr62-whirlpool-in .6s cubic-bezier(.2,0,.2,1);
}

@keyframes lr62-whirlpool-in {
	0% { transform: scale(0.4) rotate(-220deg); opacity: 0; filter: blur(6px); }
	100% { transform: scale(1) rotate(0deg); opacity: 1; filter: blur(0); }
}

/* Übergangs-Stile: Tropfen-Reveal */
.lr62-widget.lr62-transition-droplet.lr62-sequence-mode .lr62-item.lr62-submerging {
	clip-path: circle(0% at 50% 50%);
	transition: clip-path .9s ease-in;
}

.lr62-widget.lr62-transition-droplet.lr62-sequence-mode .lr62-item.lr62-active {
	clip-path: circle(75% at 50% 50%);
	transition: clip-path .9s ease-out;
}

.lr62-widget.lr62-transition-droplet .lr62-lightbox.is-open .lr62-lightbox-media-wrap {
	animation: lr62-droplet-in .6s ease-out;
}

@keyframes lr62-droplet-in {
	0% { clip-path: circle(0% at 50% 50%); }
	100% { clip-path: circle(75% at 50% 50%); }
}

.lr62-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px 14px;
	background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
	color: #fff;
	font-size: 14px;
	z-index: 5;
	pointer-events: none;
}

/* Toolbar (Pause + Randomize) */
.lr62-toolbar {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 20;
	display: flex;
	gap: 8px;
}

.lr62-toolbar:empty {
	display: none;
}

/* Pause Button */
.lr62-pause-btn,
.lr62-randomize-btn,
.lr62-export-preset-btn {
	position: static;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(0,0,0,.55);
	border: 1px solid rgba(255,255,255,.4);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.lr62-pause-btn:focus-visible,
.lr62-randomize-btn:focus-visible,
.lr62-export-preset-btn:focus-visible {
	outline: 3px solid #4fc3f7;
}

.lr62-randomize-btn {
	background: rgba(0, 80, 60, .55);
}

.lr62-randomize-btn:hover {
	background: rgba(0, 120, 90, .7);
}

.lr62-export-preset-btn {
	background: rgba(30, 60, 110, .55);
	font-size: 15px;
}

.lr62-export-preset-btn:hover {
	background: rgba(40, 90, 160, .7);
}

.lr62-export-preset-btn.lr62-copied {
	background: rgba(20, 160, 100, .85);
}

.lr62-pause-icon {
	width: 12px;
	height: 12px;
	background: #fff;
	display: inline-block;
	clip-path: polygon(0 0, 40% 0, 40% 100%, 0 100%, 0 100%, 60% 100%, 60% 0, 100% 0, 100% 100%, 60% 100%);
}

.lr62-pause-btn[aria-pressed="true"] .lr62-pause-icon {
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Lightbox */
.lr62-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(2, 10, 20, .92);
	display: none;
	align-items: center;
	justify-content: center;
}

.lr62-lightbox.is-open {
	display: flex;
}

.lr62-lightbox-stage {
	position: relative;
	max-width: 92vw;
	max-height: 88vh;
	width: 900px;
	aspect-ratio: 16 / 10;
}

.lr62-lightbox-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

.lr62-lightbox-media-wrap {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 6px;
}

.lr62-lightbox-media-wrap img,
.lr62-lightbox-media-wrap video {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.lr62-lightbox-close,
.lr62-lightbox-prev,
.lr62-lightbox-next {
	position: absolute;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.35);
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	width: 46px;
	height: 46px;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.lr62-lightbox-close:focus-visible,
.lr62-lightbox-prev:focus-visible,
.lr62-lightbox-next:focus-visible {
	outline: 3px solid #4fc3f7;
}

.lr62-lightbox-close { top: 20px; right: 20px; }
.lr62-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lr62-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* High contrast mode */
.lr62-high-contrast .lr62-reflection {
	filter: none;
	opacity: .35;
}

.lr62-high-contrast .lr62-water-overlay {
	mix-blend-mode: normal;
	opacity: .25;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.lr62-item,
	.lr62-canvas,
	.lr62-caustics,
	.lr62-bubble,
	.lr62-skeleton {
		transition: none !important;
		animation: none !important;
	}

	.lr62-bubble {
		display: none;
	}
}

.lr62-widget.lr62-motion-paused .lr62-canvas,
.lr62-widget.lr62-motion-paused .lr62-caustics,
.lr62-widget.lr62-motion-paused .lr62-bubble {
	animation-play-state: paused;
}

/* CSS fallback wave animation (no WebGL) */
.lr62-widget.lr62-css-fallback .lr62-media-surface {
	animation: lr62-css-wave 4s ease-in-out infinite;
}

@keyframes lr62-css-wave {
	0%, 100% { filter: none; }
	50% { filter: blur(.5px) saturate(1.05); }
}

.lr62-widget.lr62-css-fallback .lr62-source-media {
	animation: lr62-css-wobble 3.5s ease-in-out infinite;
}

@keyframes lr62-css-wobble {
	0%, 100% { transform: translateY(0) scaleY(1); }
	50% { transform: translateY(1.5%) scaleY(1.01); }
}

.lr62-editor-warning,
.lr62-editor-hint {
	padding: 16px;
	background: #fff3cd;
	border: 1px solid #ffe69c;
	color: #664d03;
	border-radius: 4px;
	font-size: 13px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Mobile: single focused item, simplified waves handled via JS quality flag */
@media (max-width: 480px) {
	.lr62-item { height: 320px; }
}