/*
 * gfx-stripes.css
 * Basis: Ismoil00 / YouTube 3D Hover Effect
 * BEM: .gfx-stripes, .gfx-stripes__item, .gfx-stripes__item--open
 * <img> statt background-image → SEO-freundlich
 */

.gfx-stripes__scene {
	--gfx-transition: cubic-bezier(0.1, 0.7, 0, 1);
}

/* ============================================================
   SCENE WRAPPER
============================================================ */

.gfx-stripes__scene {
	display:         flex;
	align-items:     center;
	justify-content: center;
	min-height:      500px;
	padding:         2em;
	background:      linear-gradient(90deg, #020617, #1a1a2e);
}

/* ============================================================
   CONTAINER
============================================================ */

.gfx-stripes {
	display:     flex;
	gap:         0.4rem;
	perspective: 60rem;
}

/* ============================================================
   ITEM
============================================================ */

.gfx-stripes__item {
	position:    relative;
	width:       5.4rem;
	height:      21rem;
	cursor:      pointer;
	flex-shrink: 0;
	filter:      grayscale(1) brightness(0.5);
	transition:
			transform 1.25s var(--gfx-transition),
			filter    3s    var(--gfx-transition),
			width     0.3s  var(--gfx-transition);
	will-change: transform, filter, width;
}

.gfx-stripes__img {
	position:        absolute;
	inset:           0;
	width:           100% !important;
	height:          100% !important;
	max-width:       none !important;
	object-fit:      cover;
	object-position: center;
	display:         block !important;
	pointer-events:  none;
	clip-path:       inset(0);
}

/* Hover-Helfer — verhindert Lücken zwischen Items */
.gfx-stripes__item::before,
.gfx-stripes__item::after {
	content:  '';
	position: absolute;
	width:    1.25rem;
	height:   100%;
	right:    -1.25rem;
	z-index:  1;
}
.gfx-stripes__item::after {
	left:  -1.25rem;
	right: auto;
}

/* ============================================================
   HOVER — gehovertes Item
============================================================ */

.gfx-stripes__item:hover {
	transform: translateZ(17.375rem);
	filter:    inherit;
}

/* ============================================================
   HOVER — Nachbarn RECHTS
============================================================ */

.gfx-stripes__item:hover + .gfx-stripes__item {
	transform: translateZ(14.77rem) rotateY(35deg);
	filter:    grayscale(0.2) brightness(0.9);
	z-index:   -1;
}
.gfx-stripes__item:hover + .gfx-stripes__item + .gfx-stripes__item {
	transform: translateZ(9.73rem) rotateY(40deg);
	filter:    grayscale(0.4) brightness(0.8);
	z-index:   -2;
}
.gfx-stripes__item:hover + .gfx-stripes__item + .gfx-stripes__item + .gfx-stripes__item {
	transform: translateZ(4.17rem) rotateY(35deg);
	filter:    grayscale(0.6) brightness(0.7);
	z-index:   -3;
}
.gfx-stripes__item:hover + .gfx-stripes__item + .gfx-stripes__item + .gfx-stripes__item + .gfx-stripes__item {
	transform: translateZ(1.1rem) rotateY(25deg);
	filter:    grayscale(0.8) brightness(0.6);
	z-index:   -4;
}

/* ============================================================
   HOVER — Nachbarn LINKS
============================================================ */

.gfx-stripes__item:has(+ .gfx-stripes__item:hover) {
	transform: translateZ(14.77rem) rotateY(-35deg);
	filter:    grayscale(0.2) brightness(0.9);
}
.gfx-stripes__item:has(+ .gfx-stripes__item + .gfx-stripes__item:hover) {
	transform: translateZ(9.73rem) rotateY(-40deg);
	filter:    grayscale(0.4) brightness(0.8);
}
.gfx-stripes__item:has(+ .gfx-stripes__item + .gfx-stripes__item + .gfx-stripes__item:hover) {
	transform: translateZ(4.17rem) rotateY(-35deg);
	filter:    grayscale(0.6) brightness(0.7);
}
.gfx-stripes__item:has(+ .gfx-stripes__item + .gfx-stripes__item + .gfx-stripes__item + .gfx-stripes__item:hover) {
	transform: translateZ(1.1rem) rotateY(-25deg);
	filter:    grayscale(0.8) brightness(0.6);
}

/* ============================================================
   OPEN — angeklicktes Item expandiert
============================================================ */

.gfx-stripes__item--open {
	width:     25vw;
	transform: translateZ(17.375rem);
	filter:    inherit;
	z-index:   1;
	margin:    0 0.45vw;
}