/* ==========================================================
   MirrorShards56 / ShatterMirror56 - Frontend Styles
   ========================================================== */

.msh-wrapper {
	--msh-lightbox-bg: rgba(8, 10, 16, 0.88);
	position: relative;
	width: 100%;
}

.msh-empty {
	padding: 40px 20px;
	text-align: center;
	border: 1px dashed rgba(120, 120, 140, 0.4);
	border-radius: 12px;
	color: rgba(120, 120, 140, 0.9);
	font-size: 14px;
}

.msh-grid {
	--msh-cols: 3;
	--msh-gap: 18px;
	display: grid;
	grid-template-columns: repeat(var(--msh-cols), 1fr);
	gap: var(--msh-gap);
	width: 100%;
}

.msh-tile {
	--msh-tint: rgba(190, 210, 255, 0.08);
	--msh-reflect: 45;
	--msh-edge: rgba(255, 255, 255, 0.35);
	--msh-radius: 14px;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--msh-radius);
	-webkit-user-select: none;
	user-select: none;
	touch-action: none;
	cursor: pointer;
}

.msh-tile-perspective {
	--msh-depth: 900px;
	position: absolute;
	inset: 0;
	perspective: var(--msh-depth);
	border-radius: inherit;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px var(--msh-edge);
}

.msh-tile-inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	will-change: transform;
	background: var(--msh-tint);
}

.msh-mirror-layer {
	position: absolute;
	inset: -6%;
	background-size: 132% auto;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	filter: saturate(1.05);
}

/* Bewegliches Glanzlicht - simuliert Lichtreflexion einer Spiegelflaeche */
.msh-sheen {
	position: absolute;
	inset: -30%;
	background: linear-gradient(
		var(--msh-tilt-angle, 125deg),
		rgba(255, 255, 255, calc(var(--msh-reflect) / 180)) 0%,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0) 60%,
		rgba(255, 255, 255, calc(var(--msh-reflect) / 260)) 100%
	);
	mix-blend-mode: screen;
	pointer-events: none;
	opacity: var(--msh-sheen-opacity, 0.4);
	transition: opacity 0.15s ease-out;
}

.msh-shards {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	pointer-events: none;
}

.msh-shard {
	position: absolute;
	inset: -6%;
	background-repeat: no-repeat;
	will-change: transform, opacity;
}

.msh-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	opacity: 1;
	pointer-events: none;
}

.msh-wrapper.msh-ready .msh-fallback {
	opacity: 0;
}

/* ==========================================================
   Lightbox - Bild bricht wie durch zersplitterndes Glas hindurch
   ========================================================== */

.msh-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--msh-lightbox-bg, rgba(8, 10, 16, 0.88));
	backdrop-filter: blur(16px) saturate(115%);
	-webkit-backdrop-filter: blur(16px) saturate(115%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.msh-lightbox.msh-open {
	opacity: 1;
	pointer-events: auto;
}

.msh-lightbox-figure {
	position: relative;
	max-width: min(92vw, 1200px);
	max-height: 88vh;
	transform: scale(0.25) rotateZ(-4deg);
	opacity: 0;
	filter: blur(5px);
	clip-path: circle(0% at var(--msh-origin-x, 50%) var(--msh-origin-y, 50%));
	transition:
		transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15),
		opacity 0.35s ease,
		filter 0.4s ease,
		clip-path 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.msh-lightbox.msh-open .msh-lightbox-figure {
	transform: scale(1) rotateZ(0deg);
	opacity: 1;
	filter: blur(0);
	clip-path: circle(140% at var(--msh-origin-x, 50%) var(--msh-origin-y, 50%));
}

.msh-lightbox.msh-closing .msh-lightbox-figure {
	transform: scale(0.25) rotateZ(4deg);
	opacity: 0;
	filter: blur(6px);
	clip-path: circle(0% at var(--msh-origin-x, 50%) var(--msh-origin-y, 50%));
}

.msh-lightbox-img {
	display: block;
	max-width: min(92vw, 1200px);
	max-height: 88vh;
	border-radius: 8px;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.msh-lightbox-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.92);
	color: #0b0e14;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s ease;
}

.msh-lightbox-close:hover {
	transform: scale(1.08);
}

/* Kleine Glas-Glint-Partikel beim Zersplittern/Oeffnen */
.msh-glint {
	position: fixed;
	width: 7px;
	height: 7px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.1));
	pointer-events: none;
	z-index: 999998;
	opacity: 0;
}

.msh-motion-btn {
	position: absolute;
	bottom: 14px;
	right: 14px;
	z-index: 6;
	padding: 6px 12px;
	font-size: 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
	.msh-lightbox-figure,
	.msh-lightbox,
	.msh-tile-inner {
		transition-duration: 0.01ms !important;
	}
}

@media (max-width: 767px) {
	.msh-grid {
		--msh-cols: 1;
	}
}