/*
 * gfx-tilt.css — Standalone CSS, kein SCSS
 * 1:1 Original codepen.io/Cubiq-ish/pen/RNrwdBW
 * Einzige Änderungen: nav → nav.gfx-tilt
 *                     .img → .gfx-tilt__img
 *                     .hover-zone → .gfx-tilt__zone
 *                     label → .gfx-tilt__debug-label
 *                     #dbg → #gfx-tilt-dbg
 *                     body { nav... } → body { nav.gfx-tilt... }
 */

nav.gfx-tilt {
	--r:   calc(var(--max-z) * (var(--p) - 1) + var(--z));
	--r-n: calc(
			(var(--r) - 1) / (var(--max-z) * var(--max-p) - 1)
	);

	block-size:      500px;
	inline-size:     100%;
	display:         flex;
	align-items:     flex-end;
	position:        relative;
	perspective:     var(--perspective, 2000px);
	transform-style: preserve-3d;
	--dir:           0deg;

	@media (max-width: 40rem) {
		writing-mode: sideways-rl;
		--dir: -90deg;
	}
}

nav.gfx-tilt a {
	flex:            1;
	block-size:      100%;
	position:        relative;
	display:         flex;
	justify-content: center;
	align-items:     center;
	color:           inherit;
	font-size:       1rem;
	cursor:          pointer;
	transform-style: preserve-3d;
	text-decoration: none;

	--ts: calc(
			var(--hover-smoothness, 70ms) * var(--falloff) +
			var(--fall-smoothness, 250ms) * (1 - var(--falloff))
	);
	--fs: calc(
			.1s * var(--falloff, 0) +
			.8s * (1 - var(--falloff, 0))
	);

	transition:
			scale     var(--op, .15s),
			filter    var(--fs),
			transform var(--ts, var(--fall-smoothness, 250ms)),
			flex      .3s;

	--p-n:    calc(var(--i) / (var(--max-p) - 1));
	--diff:   calc(var(--p-n) - var(--r-n));
	--u:      calc(abs(var(--diff)) / var(--w));
	--w:      .4;
	--falloff: clamp(calc(0.5 * (1 + cos(min(var(--u), 1) * 180deg))), 0, 1);
	--tilt:   calc(clamp(-1, var(--diff) * 5, 1) * var(--falloff) * 70deg);

	transform:
			translateZ(calc(var(--falloff) * var(--hover-intensity, 10rem)))
			rotateY(calc(var(--tilt) * cos(var(--dir, 0deg))))
			rotateX(calc(var(--tilt) * sin(var(--dir, 0deg))));

	filter:
			brightness(max(.5, var(--falloff, 0) * 1.2))
			saturate(var(--falloff, 0));
}

.gfx-tilt__img {
	background:          var(--img);
	background-color:    #fff3;
	background-size:     cover;
	background-position: center;
	width:               100%;
	height:              100%;
	margin-inline:       0.1em;
}

.gfx-tilt__zone {
	position:     absolute;
	inset:        0;
	inset-inline: -3px;
	display:      flex;
	z-index:      999;

	> i {
		flex:       1;
		transition: .3s;
	}

	&::after {
		position: absolute;
		inset:    0;
	}

	&:active,
	&:hover:not(:has(> i:hover)),
	a:focus-visible & {
		&::after {
			content:        '';
			pointer-events: all;
			--o:            1;
		}
	}
}

nav.gfx-tilt:has(.gfx-tilt__zone:hover):not(:has(i:hover)),
nav.gfx-tilt:has(a:focus-visible) {
	--z: calc((var(--max-z) + 1) / 2);

	a:hover, a:focus-visible {
		flex: 4;
	}
}

/* ── DEBUG LABEL ─────────────────────────────────────────── */

.gfx-tilt__debug-label {
	position:    fixed;
	bottom:      1em;
	cursor:      pointer;
	user-select: none;
	transition:  var(--h, .3s);
	opacity:     .3;
	display:     inline-flex;
	color:       #fff;

	&:hover { opacity: .5; letter-spacing: 5px; --h: .1s; }

	&::after {
		content:          'ing..';
		max-width:        var(--ing, 0px);
		overflow:         hidden;
		display:          inherit;
		interpolate-size: allow-keywords;
		transition:       .3s;
	}

	&:has(> :focus-visible) { outline: solid 1px currentColor; }

	&:has(> :checked) {
		opacity: 1;
		--ing:   max-content;
	}
}

#gfx-tilt-dbg {
	position:       absolute;
	opacity:        0;
	pointer-events: none;
}

/* ── DEBUG MODE ──────────────────────────────────────────── */

body {
	nav.gfx-tilt::before {
		counter-set:
				pic         var(--p)
				zone        var(--z)
				region      var(--r)
				region-norm calc(var(--r-n) * 100);
		tab-size:        12;
		content:
				'debug:'
				"\a r: " counter(region) "\9(" counter(region-norm) "%)"
				"\ap: "  counter(pic)
				"\9z: "  counter(zone);
		white-space:     pre-wrap;
		writing-mode:    horizontal-tb;
		position:        fixed;
		inset-block-end: -1em;
		transform:       translateY(100%);
		opacity:         0;
		font-size:       .5em;
		transition:      opacity .3s;
		pointer-events:  none;
		color:           #fff;
	}

	.gfx-tilt__img::before {
		counter-set:
				item    var(--i)
				falloff calc(var(--falloff, 0) * 100)
				diff    calc(var(--diff, 0) * 100);
		content:
				"\a i: " counter(item)
				"\a d:"  counter(diff)
				"\a f: " counter(falloff) "%";
		font-size:        .5em;
		white-space:      pre;
		position:         fixed;
		inset-block-end:  100%;
		opacity:          0;
		transition:       .3s;
		transition-delay: calc(var(--i) * 25ms);
		pointer-events:   none;
		block-size:       0px;
		interpolate-size: allow-keywords;
		overflow:         hidden;
	}

	.gfx-tilt__zone::after {
		font-size:     0.5em;
		text-align:    center;
		align-content: center;
		background:    #0005;
		transition:    opacity .5s, letter-spacing var(--h, .3s);
		opacity:       0;
		overflow:      hidden;
		writing-mode:  sideways-lr;
		pointer-events: none;
	}

	.gfx-tilt__zone:active::after {
		letter-spacing: 5px;
		--h: 50ms;
	}

	&:has(#gfx-tilt-dbg:checked) nav.gfx-tilt {
		&::before, .gfx-tilt__img::before { opacity: .3; }
		.gfx-tilt__img::before            { block-size: auto; }
		i:nth-child(odd)                   { background: #0003; }
		i:hover                            { background: #fff5; transition: 0ms; }
		a:hover                            { outline: #fff5 solid 3px; }
		.gfx-tilt__zone::after             { opacity: var(--o, 0); content: 'clicked'; }
	}
}

/* ── nth-child SELEKTOREN (natives CSS nesting, & bleibt &) ─ */

a {
	nav.gfx-tilt:has(:nth-child(01 of &):is(:hover,:focus-visible)) { --p: 01; }
	nav.gfx-tilt:has(:nth-child(02 of &):is(:hover,:focus-visible)) { --p: 02; }
	nav.gfx-tilt:has(:nth-child(03 of &):is(:hover,:focus-visible)) { --p: 03; }
	nav.gfx-tilt:has(:nth-child(04 of &):is(:hover,:focus-visible)) { --p: 04; }
	nav.gfx-tilt:has(:nth-child(05 of &):is(:hover,:focus-visible)) { --p: 05; }
	nav.gfx-tilt:has(:nth-child(06 of &):is(:hover,:focus-visible)) { --p: 06; }
	nav.gfx-tilt:has(:nth-child(07 of &):is(:hover,:focus-visible)) { --p: 07; }
	nav.gfx-tilt:has(:nth-child(08 of &):is(:hover,:focus-visible)) { --p: 08; }
	nav.gfx-tilt:has(:nth-child(09 of &):is(:hover,:focus-visible)) { --p: 09; }
	nav.gfx-tilt:has(:nth-child(10 of &):is(:hover,:focus-visible)) { --p: 10; }
	nav.gfx-tilt:has(:nth-child(11 of &):is(:hover,:focus-visible)) { --p: 11; }
	nav.gfx-tilt:has(:nth-child(12 of &):is(:hover,:focus-visible)) { --p: 12; }
	nav.gfx-tilt:has(:nth-child(13 of &):is(:hover,:focus-visible)) { --p: 13; }
	nav.gfx-tilt:has(:nth-child(14 of &):is(:hover,:focus-visible)) { --p: 14; }
}

i {
	nav.gfx-tilt:has(:nth-child(1 of &):hover) { --z: 1; }
	nav.gfx-tilt:has(:nth-child(2 of &):hover) { --z: 2; }
	nav.gfx-tilt:has(:nth-child(3 of &):hover) { --z: 3; }
	nav.gfx-tilt:has(:nth-child(4 of &):hover) { --z: 4; }
	nav.gfx-tilt:has(:nth-child(5 of &):hover) { --z: 5; }
	nav.gfx-tilt:has(:nth-child(6 of &):hover) { --z: 6; }
	nav.gfx-tilt:has(:nth-child(7 of &):hover) { --z: 7; }
	nav.gfx-tilt:has(:nth-child(8 of &):hover) { --z: 8; }
	nav.gfx-tilt:has(:nth-child(9 of &):hover) { --z: 9; }
}

nav.gfx-tilt a {
	will-change: transform, filter;
}