/* ---------- Scanlines (reference: Avoloch slideshow) ---------- */
.scanlines {
	position: fixed; inset: 0; z-index: 50; pointer-events: none;
	background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(125, 249, 255, 0.035) 2px 4px);
	animation: scanline-move 0.1s linear infinite;
}
@keyframes scanline-move { to { transform: translateY(4px); } }

/* ---------- Logo mark (reference: konstantindenerz) ---------- */
.mark { overflow: visible; }
.mark__base { stroke: var(--primary); filter: drop-shadow(0 0 6px rgba(63, 169, 255, 0.8)); }
.mark__tilt { stroke: var(--secondary); filter: drop-shadow(0 0 6px rgba(125, 249, 255, 0.8)); transform-origin: 62px 54px; }
.mark--animated .mark__tilt { animation: mark-glitch 6s steps(1, end) infinite; }
@keyframes mark-glitch {
	0%, 92%, 100% { transform: none; stroke: var(--secondary); }
	93% { transform: translate(-3px, 1px) skewX(-8deg); stroke: var(--glitch); }
	94.5% { transform: translate(3px, -2px); stroke: var(--secondary); }
	96% { transform: translate(-1px, 2px) skewX(6deg); stroke: var(--glitch); }
	97.5% { transform: none; stroke: var(--secondary); }
}

/* ---------- Glitch hover (reference: cubeghost) ---------- */
.glitch-hover {
	text-shadow: 1px 1px rgba(255, 43, 214, 0.75), -1px -1px rgba(125, 249, 255, 0.75);
	transition: text-shadow 0.15s;
}
.glitch-hover:hover, a:hover .glitch-hover {
	animation: wiggle 0.25s 2;
	text-shadow: 14px 6px rgba(255, 43, 214, 0.8), -18px -3px rgba(125, 249, 255, 0.8), -2px -4px rgba(63, 169, 255, 1);
}
@keyframes wiggle {
	0% { transform: skewX(24deg); } 10% { transform: skewX(-8deg); } 20% { transform: skewX(55deg); }
	30% { transform: skewX(-90deg); } 40% { transform: skewX(29deg); } 50% { transform: skewX(-90deg); }
	60% { transform: skewX(3deg); } 70% { transform: skewX(-2deg); } 80% { transform: skewX(1deg); }
	90% { transform: skewX(10deg); } 100% { transform: skewX(0deg); }
}

/* ---------- Glitch headline (reference: acupoftee) ---------- */
.glitch {
	position: relative; display: inline-block;
	color: #fff; text-shadow: 0 0 24px rgba(63, 169, 255, 0.55);
	animation: glitch-skew 5s 5s infinite;
}
.glitch::before, .glitch::after {
	content: attr(data-text); position: absolute; inset: 0; overflow: hidden;
	background: var(--bg); color: #fff; text-shadow: none;
}
.glitch::before { left: -2px; text-shadow: -4px 0 var(--glitch); animation: noise-1 3s linear infinite alternate-reverse, glitch-skew 5s 5.05s infinite; }
.glitch::after { left: 2px; text-shadow: -4px 0 var(--secondary); animation: noise-2 3s linear infinite alternate-reverse, glitch-skew 5s 5s infinite; }
@keyframes glitch-skew { 1% { transform: rotateX(10deg) skewX(90deg); } 2% { transform: none; } }
/* Percent-based clip so it works at any font size */
@keyframes noise-1 {
	0% { clip-path: inset(87% 0 6% 0); } 5% { clip-path: inset(31% 0 21% 0); } 10% { clip-path: inset(84% 0 9% 0); }
	15% { clip-path: inset(76% 0 17% 0); } 20% { clip-path: inset(57% 0 4% 0); } 25% { clip-path: inset(4% 0 72% 0); }
	30% { clip-path: inset(92% 0 4% 0); } 35% { clip-path: inset(55% 0 20% 0); } 40% { clip-path: inset(51% 0 14% 0); }
	45% { clip-path: inset(96% 0 3% 0); } 50% { clip-path: inset(90% 0 6% 0); } 55% { clip-path: inset(44% 0 40% 0); }
	60% { clip-path: inset(94% 0 4% 0); } 65% { clip-path: inset(65% 0 7% 0); } 70% { clip-path: inset(77% 0 17% 0); }
	75% { clip-path: inset(97% 0 1% 0); } 80% { clip-path: inset(7% 0 26% 0); } 85% { clip-path: inset(72% 0 3% 0); }
	90% { clip-path: inset(16% 0 18% 0); } 95% { clip-path: inset(77% 0 18% 0); } 100% { clip-path: inset(15% 0 26% 0); }
}
@keyframes noise-2 {
	0% { clip-path: inset(97% 0 1% 0); } 5% { clip-path: inset(62% 0 9% 0); } 10% { clip-path: inset(4% 0 38% 0); }
	15% { clip-path: inset(86% 0 6% 0); } 20% { clip-path: inset(2% 0 92% 0); } 25% { clip-path: inset(58% 0 31% 0); }
	30% { clip-path: inset(22% 0 24% 0); } 35% { clip-path: inset(29% 0 68% 0); } 40% { clip-path: inset(83% 0 18% 0); }
	45% { clip-path: inset(99% 0 1% 0); } 50% { clip-path: inset(17% 0 9% 0); } 55% { clip-path: inset(21% 0 13% 0); }
	60% { clip-path: inset(52% 0 29% 0); } 65% { clip-path: inset(66% 0 25% 0); } 70% { clip-path: inset(28% 0 27% 0); }
	75% { clip-path: inset(60% 0 17% 0); } 80% { clip-path: inset(3% 0 18% 0); } 85% { clip-path: inset(10% 0 90% 0); }
	90% { clip-path: inset(97% 0 4% 0); } 95% { clip-path: inset(93% 0 6% 0); } 100% { clip-path: inset(83% 0 10% 0); }
}

/* ---------- Preloader (inspired by mirai1337, no flashing) ---------- */
.preloader {
	position: fixed; inset: 0; z-index: 90;
	display: grid; place-content: center; justify-items: center; gap: 1.5rem;
	background: var(--bg);
	transition: opacity 0.5s ease, visibility 0.5s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__mark .mark { width: clamp(120px, 26vw, 220px); height: auto; }
.preloader__mark .mark__base { animation: pre-jitter 1s linear infinite; }
.preloader__mark .mark__tilt { animation: pre-jitter 1s linear infinite 0.3s, mark-glitch 2s steps(1, end) infinite; }
.preloader__text {
	margin: 0; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.6em; text-transform: uppercase; color: var(--secondary);
	animation: pre-glitch 0.7s steps(1, end) 0.5s 1;
}
@keyframes pre-jitter {
	10% { transform: translateX(6px); filter: blur(2px); } 20% { transform: translateX(3px); filter: blur(0); }
	30% { transform: translateX(-4px); filter: blur(2px); } 40% { transform: translateX(5px); filter: blur(0); }
	60% { transform: translateX(2px); filter: blur(3px); } 70% { transform: translateX(-2px); filter: blur(0); }
	80% { transform: translateX(3px); filter: blur(1px); } 90% { transform: translateX(-3px); } 100% { transform: translateX(2px); }
}
/* One stretched-thin glitch, same shape as the headline glitch */
@keyframes pre-glitch {
	0%, 100% { transform: none; filter: none; }
	20% { transform: rotateX(10deg) skewX(90deg); }
	35% { transform: scaleY(0.15) scaleX(1.4); filter: brightness(1.8); }
	50% { transform: none; filter: none; }
	65% { transform: skewX(-60deg) scaleY(0.5); filter: brightness(1.8); }
	80% { transform: none; filter: none; }
}

/* ---------- Slideshow (reference: Avoloch) ---------- */
.slideshow {
	position: relative; margin: 0 calc(-1 * var(--pad)); padding: clamp(3rem, 8vw, 6rem) var(--pad) 6rem;
	min-height: min(88vh, 780px); overflow: hidden; border-bottom: 1px solid var(--line);
}
.slideshow__radio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.slideshow__intro { position: relative; z-index: 3; max-width: 52%; }
.slideshow__slides { position: absolute; inset: 0; pointer-events: none; perspective: 1000px; }
.slide {
	position: absolute; inset: 0; margin: 0;
	opacity: 0; transform: scale(0.8) rotateX(-45deg);
	animation: slide-seq 25s infinite;
}
.slide picture { display: contents; }
.slide img {
	position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%);
	height: 82%; width: auto; max-width: 42%; object-fit: contain;
	border: 3px solid rgba(125, 249, 255, 0.5); border-radius: 0 2.5rem 0 2.5rem;
	box-shadow: 0 0 40px rgba(63, 169, 255, 0.35), 0.3em 0.3em 0.6em rgba(125, 249, 255, 0.25);
}
.slide__caption {
	position: absolute; left: var(--pad); bottom: 3rem; font-family: var(--font-display); font-weight: 700;
	font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; color: #fff;
	text-shadow: 0 0 10px var(--secondary), 0 0 20px var(--secondary), 0 0 40px var(--primary);
	animation: caption-glitch 4s infinite; white-space: nowrap;
}
.slide:nth-child(1) { animation-delay: 0s; } .slide:nth-child(2) { animation-delay: 5s; }
.slide:nth-child(3) { animation-delay: 10s; } .slide:nth-child(4) { animation-delay: 15s; } .slide:nth-child(5) { animation-delay: 20s; }
@keyframes slide-seq {
	0%, 16% { opacity: 1; transform: scale(1) rotateX(0); filter: none; }
	20% { opacity: 0; transform: scale(1.1) rotateX(15deg); filter: contrast(1.5) saturate(2) hue-rotate(180deg); }
	80%, 100% { opacity: 0; transform: scale(0.8) rotateX(-45deg); }
}
@keyframes caption-glitch {
	0%, 30%, 70%, 100% { text-shadow: 0 0 10px var(--secondary), 0 0 20px var(--secondary), 0 0 40px var(--primary); transform: none; }
	10% { text-shadow: 2px 0 var(--glitch), -2px 0 var(--secondary); transform: translateX(-2px); }
	20% { text-shadow: 2px 0 var(--glitch), -2px 0 var(--secondary); transform: translateX(2px); }
	80% { text-shadow: -2px 0 var(--glitch), 2px 0 var(--secondary); transform: translateX(2px); }
	90% { text-shadow: -2px 0 var(--glitch), 2px 0 var(--secondary); transform: translateX(-2px); }
}
/* Manual selection stops the sequence */
.slideshow__radio:checked ~ .slideshow__slides .slide { opacity: 0; transform: scale(0.8) rotateX(-45deg); animation: none; }
#slide-plan:checked ~ .slideshow__slides .slide:nth-child(1),
#slide-skema:checked ~ .slideshow__slides .slide:nth-child(2),
#slide-alarm:checked ~ .slideshow__slides .slide:nth-child(3),
#slide-timer:checked ~ .slideshow__slides .slide:nth-child(4),
#slide-paamindelse:checked ~ .slideshow__slides .slide:nth-child(5) { opacity: 1; transform: none; z-index: 2; }

.slideshow__nav { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: flex; gap: 1.1rem; z-index: 4; }
.slideshow__dot {
	width: 12px; height: 12px; border: 2px solid var(--secondary); transform: rotate(45deg); cursor: pointer;
	animation: dot-seq 25s infinite; transition: background 0.3s, box-shadow 0.3s;
}
.slideshow__dot:nth-child(1) { animation-delay: 0s; } .slideshow__dot:nth-child(2) { animation-delay: 5s; }
.slideshow__dot:nth-child(3) { animation-delay: 10s; } .slideshow__dot:nth-child(4) { animation-delay: 15s; } .slideshow__dot:nth-child(5) { animation-delay: 20s; }
@keyframes dot-seq { 0%, 16% { background: var(--secondary); box-shadow: 0 0 10px var(--secondary); transform: rotate(45deg) scale(1.2); } 20%, 100% { background: transparent; box-shadow: none; transform: rotate(45deg); } }
.slideshow__radio:checked ~ .slideshow__nav .slideshow__dot { animation: none; background: transparent; box-shadow: none; }
#slide-plan:checked ~ .slideshow__nav .slideshow__dot:nth-child(1),
#slide-skema:checked ~ .slideshow__nav .slideshow__dot:nth-child(2),
#slide-alarm:checked ~ .slideshow__nav .slideshow__dot:nth-child(3),
#slide-timer:checked ~ .slideshow__nav .slideshow__dot:nth-child(4),
#slide-paamindelse:checked ~ .slideshow__nav .slideshow__dot:nth-child(5) { background: var(--secondary); box-shadow: 0 0 10px var(--secondary); transform: rotate(45deg) scale(1.2); }

#slide-plan:focus-visible ~ .slideshow__nav .slideshow__dot:nth-child(1),
#slide-skema:focus-visible ~ .slideshow__nav .slideshow__dot:nth-child(2),
#slide-alarm:focus-visible ~ .slideshow__nav .slideshow__dot:nth-child(3),
#slide-timer:focus-visible ~ .slideshow__nav .slideshow__dot:nth-child(4),
#slide-paamindelse:focus-visible ~ .slideshow__nav .slideshow__dot:nth-child(5) { outline: 2px solid #fff; outline-offset: 4px; }

.slideshow__corner { position: absolute; width: 48px; height: 48px; border: 2px solid var(--secondary); pointer-events: none; z-index: 4; animation: corner-pulse 3s infinite; }
.slideshow__corner--tl { top: 1rem; left: 1rem; border-right: 0; border-bottom: 0; }
.slideshow__corner--tr { top: 1rem; right: 1rem; border-left: 0; border-bottom: 0; animation-delay: 0.5s; }
.slideshow__corner--bl { bottom: 1rem; left: 1rem; border-right: 0; border-top: 0; animation-delay: 1s; }
.slideshow__corner--br { bottom: 1rem; right: 1rem; border-left: 0; border-top: 0; animation-delay: 1.5s; }
@keyframes corner-pulse { 0%, 80%, 100% { opacity: 0.3; filter: none; } 40% { opacity: 1; filter: drop-shadow(0 0 8px var(--secondary)); } }

.slideshow__bar { position: absolute; left: 0; width: 100%; height: 2px; opacity: 0; pointer-events: none; z-index: 4;
	background: linear-gradient(90deg, transparent, var(--glitch), var(--secondary), transparent); animation: glitch-bar 8s infinite; }
.slideshow__bar--1 { top: 25%; } .slideshow__bar--2 { top: 50%; animation-delay: 2.7s; } .slideshow__bar--3 { top: 75%; animation-delay: 5.3s; }
@keyframes glitch-bar { 0%, 90%, 100% { opacity: 0; transform: scaleX(0); } 1%, 3%, 5% { opacity: 1; transform: scaleX(1); } 2%, 4% { opacity: 0; transform: scaleX(0.5); } }

@media (max-width: 820px) {
	.slideshow { min-height: 100vh; padding-top: 5.5rem; padding-bottom: 5rem; }
	.slideshow__intro { max-width: none; }
	.slide img { height: 46%; max-width: 60%; top: auto; bottom: 5rem; transform: none; }
	.slide__caption { font-size: clamp(2rem, 11vw, 3.5rem); bottom: 6rem; }
}

/* ---------- 404 (reference: ZonFire99) ---------- */
.error404 { display: grid; place-items: center; min-height: 70vh; padding: 3rem 0; animation: noise-3 1s linear infinite; }
.error404__wrap { position: relative; }
.error404__code {
	margin: 0; font-family: var(--font-mono); font-size: clamp(0.72rem, 2.4vw, 1rem); line-height: 1.55; color: var(--text);
	overflow-x: auto; max-width: 100%;
}
.error404__code::before, .error404__code::after {
	position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; font-weight: 700;
	font-family: var(--font-display); font-size: clamp(3rem, 12vw, 8rem); text-transform: uppercase; color: #fff; opacity: 0;
}
.error404__code::before { content: attr(data-line-1); top: 20%; animation: noise-1 0.2s linear infinite; }
.error404__code::after { content: attr(data-line-2); top: 50%; font-size: clamp(1.4rem, 5vw, 3.5rem); animation: noise-2 0.2s linear infinite; }
.error404__title { font-weight: 700; color: #fff; font-size: 1.4em; }
.error404__link { color: var(--secondary); }
.c-green { color: #4ade80; } .c-orange { color: #f39c12; } .c-blue { color: var(--secondary); } .c-comment { color: var(--muted); }
@keyframes noise-3 { 0%, 3%, 5%, 42%, 44%, 100% { transform: scaleY(1); } 4.3% { transform: scaleY(1.7); } 43% { transform: scaleX(1.5) skewX(-20deg); } }