/* SK Intocht Onthulling – Ling Media
   Eindstand is de standaard: zonder JavaScript, zonder GSAP of bij
   verminderde beweging zie je direct het volle beeld met tekst. */

.sk-rv {
	--sk-bg: #1E060B;
	--sk-messing: #B8925A;
	--sk-messing-l: #D4B47F;
	--sk-creme: #ECE4D3;
	--sk-offset: 78px;
	--sk-fx: 62%;
	--sk-fy: 30%;
	position: relative;
	background: var(--sk-bg);
	color: var(--sk-creme);
	width: 100%;
}
.sk-rv *, .sk-rv *::before, .sk-rv *::after { box-sizing: border-box; }

.sk-rv-pin {
	position: relative;
	height: calc(100svh - var(--sk-offset));
	min-height: 640px;
	overflow: hidden;
}

/* Beeld */
.sk-rv-window { position: absolute; inset: 0; overflow: hidden; z-index: 1; will-change: clip-path; }
.sk-rv-window picture { display: block; width: 100%; height: 100%; }
.sk-rv-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--sk-fx) var(--sk-fy); transform-origin: 62% 40%; }
.sk-rv-leeg { position: absolute; inset: 0; display: grid; place-items: center; background: #3A0F17; color: var(--sk-messing-l); font: 500 14px/1.4 'Montserrat', sans-serif; text-align: center; padding: 24px; }
.sk-rv-dim { position: absolute; inset: 0; background: #12040A; opacity: 0; pointer-events: none; }
.sk-rv-sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 200, .28) 50%, transparent 62%); transform: translateX(-130%); mix-blend-mode: screen; }

/* Boogvenster-kader (alleen in de animatie zichtbaar) */
.sk-rv-frame { position: absolute; z-index: 2; left: 40%; right: 40%; top: 20%; bottom: 12%; border: 1px solid var(--sk-messing-l); border-bottom: 0; border-radius: 10vw 10vw 0 0; opacity: 0; pointer-events: none; }
.sk-rv-frame::before { content: ""; position: absolute; inset: -12px -12px 0; border: 1px solid var(--sk-messing); opacity: .55; border-bottom: 0; border-radius: 11vw 11vw 0 0; }
.sk-rv-frame::after { content: ""; position: absolute; left: -24px; right: -24px; bottom: -1px; border-top: 1px solid var(--sk-messing-l); }

/* Stralenkrans */
.sk-rv-rays { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; }
.sk-rv-rays line { stroke: var(--sk-messing); stroke-width: 1; }

/* Titel boven het venster */
.sk-rv-big { position: absolute; left: 0; right: 0; top: clamp(28px, 7%, 64px); z-index: 2; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 22px); font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 500; font-size: clamp(1.5rem, 3.6vw, 3.2rem); line-height: 1.1; letter-spacing: .14em; color: var(--sk-messing-l); text-shadow: 0 0 18px var(--sk-bg), 0 0 36px var(--sk-bg), 0 0 60px var(--sk-bg); pointer-events: none; opacity: 0; white-space: nowrap; }
.sk-rv-big::before, .sk-rv-big::after { content: ""; width: clamp(36px, 8vw, 110px); height: 5px; border-top: 1px solid var(--sk-messing); border-bottom: 1px solid var(--sk-messing); }
.sk-rv-big .ch { display: inline-block; }

/* Leesbaarheidsverloop */
.sk-rv-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--sk-bg) 97%, transparent) 0%,
		color-mix(in srgb, var(--sk-bg) 90%, transparent) 34%,
		color-mix(in srgb, var(--sk-bg) 55%, transparent) 52%,
		transparent 72%); }

/* Dubbel kader met hoekornamenten */
.sk-rv-edge { position: absolute; inset: clamp(12px, 2vw, 28px); z-index: 3; border: 1px solid var(--sk-messing-l); pointer-events: none; }
.sk-rv-edge::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--sk-messing); opacity: .5; }
.sk-rv-edge svg { position: absolute; width: 44px; height: 44px; color: var(--sk-messing-l); }
.sk-rv-edge .tl { left: -1px; top: -1px; }
.sk-rv-edge .tr { right: -1px; top: -1px; transform: scaleX(-1); }
.sk-rv-edge .bl { left: -1px; bottom: -1px; transform: scaleY(-1); }
.sk-rv-edge .br { right: -1px; bottom: -1px; transform: scale(-1, -1); }

/* Tekst */
.sk-rv-text { position: relative; z-index: 4; height: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(36px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.sk-rv-date { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; font-family: 'Cinzel', 'Times New Roman', serif; color: var(--sk-messing-l); }
.sk-rv-date b { font-weight: 500; font-size: clamp(4.6rem, 9vw, 8.4rem); line-height: .85; }
.sk-rv-date span { letter-spacing: .16em; font-size: 1rem; color: var(--sk-creme); }
.sk-rv-rule { width: 120px; height: 5px; border-top: 1px solid var(--sk-messing); border-bottom: 1px solid var(--sk-messing); margin-bottom: 26px; transform-origin: left; }
.sk-rv-kop { margin: 0 0 22px; max-width: 16ch; font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.12; letter-spacing: .04em; color: var(--sk-creme); text-shadow: 0 2px 24px color-mix(in srgb, var(--sk-bg) 70%, transparent); }
.sk-rv-kop .w { display: inline-block; }
.sk-rv-lead { margin: 0 0 32px; max-width: 44ch; font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-size: 1.05rem; line-height: 1.75; color: var(--sk-creme); text-shadow: 0 1px 12px color-mix(in srgb, var(--sk-bg) 60%, transparent); }
.sk-rv-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sk-rv-logo { height: 44px; width: auto; }
.sk-rv-note { position: absolute; right: 36px; bottom: 34px; z-index: 4; font: 400 .72rem/1.4 'Montserrat', sans-serif; color: color-mix(in srgb, var(--sk-creme) 60%, transparent); }

/* Deco-knop met afgesneden hoeken */
.sk-rv-btn {
	--hoek: 10px;
	display: inline-flex; align-items: center; padding: 1em 1.7em;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: .02em;
	text-decoration: none; background: #B8925A; color: #1D1B18; border: 0; border-radius: 0;
	clip-path: polygon(var(--hoek) 0, calc(100% - var(--hoek)) 0, 100% var(--hoek), 100% calc(100% - var(--hoek)), calc(100% - var(--hoek)) 100%, var(--hoek) 100%, 0 calc(100% - var(--hoek)), 0 var(--hoek));
	transition: background-color .2s ease, color .2s ease;
}
.sk-rv-btn:hover { background: #D4B47F; color: #1D1B18; }
.sk-rv-btn:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }

/* Melding in de editor */
.sk-rv-editor-melding { background: #A32D2D; color: #fff; font: 600 14px/1.5 'Montserrat', sans-serif; padding: 12px 18px; text-align: center; }

/* Mobiel */
@media (max-width: 760px) {
	.sk-rv-shade { background: linear-gradient(0deg,
		color-mix(in srgb, var(--sk-bg) 97%, transparent) 0%,
		color-mix(in srgb, var(--sk-bg) 88%, transparent) 58%,
		color-mix(in srgb, var(--sk-bg) 20%, transparent) 85%); }
	.sk-rv-text { justify-content: flex-end; padding-bottom: 56px; }
	.sk-rv-kop { font-size: 1.9rem; }
	.sk-rv-frame { left: 22%; right: 22%; border-radius: 28vw 28vw 0 0; }
	.sk-rv-frame::before { border-radius: 30vw 30vw 0 0; }
	.sk-rv-note { right: 24px; bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.sk-rv-btn { transition: none; }
}