/* ==========================================================================
   Hero "Van detail naar geheel"
   Variabelen die hero.js zet: --p (scrollvoortgang), --tp/--tp2/--tp3 (tekst),
   --mp (monogramvlucht), --z (zoom), --tint en --tint-deep (kleur uit de steen).
   ========================================================================== */

.as-hero {
	--tint: var(--linnen);
	--tint-deep: var(--taupe);
	--p: 1;
	--tp: 1;
	--tp2: 1;
	--tp3: 1;
	position: relative;
	background: var(--tint);
	transition: background-color 1.6s var(--ease);
}
.as-hero__sticky {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	isolation: isolate;
}
.as-hero.is-scrolly .as-hero__track { height: 240vh; }
.as-hero.is-scrolly .as-hero__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; }

/* Opbouw van de eindstand: tekst links, medaillon met stenenbakje rechts */
.as-hero__layout {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: clamp(32px, 5vw, 96px);
	min-height: 100vh;
	min-height: 100svh;
	padding: calc(var(--header-h) + 24px) var(--edge) clamp(32px, 5vh, 64px);
	pointer-events: none;
}
.as-hero__text, .as-hero__tray { pointer-events: auto; }
.as-hero.is-scrolly:not(.is-text-on) .as-hero__text,
.as-hero.is-scrolly:not(.is-text-on) .as-hero__tray { pointer-events: none; }

.as-hero__mono-slot { display: block; width: clamp(110px, 10vw, 176px); aspect-ratio: 1164 / 969; margin-bottom: clamp(1.2rem, 3vh, 2.2rem); color: var(--taupe); }
.as-hero__mono-static { width: 100%; height: auto; }
.as-hero:not(.no-js) .as-hero__mono-static { visibility: hidden; }

.as-hero__title {
	max-width: 15ch;
	margin-bottom: .5em;
	font: 400 clamp(2.8rem, 4.8vw, 5.4rem)/.98 var(--f-h1);
	letter-spacing: .05em;
	color: var(--kop);
	opacity: var(--tp);
	transform: translateY(calc((1 - var(--tp)) * 34px));
}
.as-hero__lead {
	max-width: 38ch;
	margin-bottom: 2.2rem;
	font-size: clamp(1.12rem, 1.3vw, 1.3rem);
	color: var(--tekst);
	opacity: var(--tp2);
	transform: translateY(calc((1 - var(--tp2)) * 24px));
}
.as-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; opacity: var(--tp3); transform: translateY(calc((1 - var(--tp3)) * 18px)); }

.as-hero__frame-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3vh, 32px); }
.as-hero__frame-slot {
	--frame-shape: oval;
	position: relative;
	width: min(100%, 36vw, 54vh);
	aspect-ratio: 4 / 5;
	border-radius: 50%;
	overflow: hidden;
}
.as-hero__frame-slot img { width: 100%; height: 100%; object-fit: cover; }

/* Het beeld: begint schermvullend en ingezoomd, landt in het medaillon */
.as-hero__media {
	--z: 1;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--wit);
	will-change: left, top, width, height, border-radius;
	transform: translateZ(0);
}
.as-hero.no-js .as-hero__media,
.as-hero.no-js .as-hero__mono,
.as-hero.no-js .as-hero__cue,
.as-hero.no-js .as-hero__veil { display: none; }

.as-hero__piece { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.3s var(--ease-slow); }
.as-hero__piece.is-active { opacity: 1; z-index: 1; }
.as-hero__piece:not(.is-active) { pointer-events: none; }
.as-hero__piece img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--fx) var(--fy);
	transform: scale(var(--z));
	transform-origin: var(--fx) var(--fy);
}
.as-hero__media .as-loupe { display: none; }
.as-hero.is-settled .as-hero__media .as-loupe { display: block; }
.as-hero.is-settled .as-hero__media { cursor: zoom-in; }

/* Eén lichtreflectie bij elke wissel */
.as-hero__glint {
	position: absolute;
	inset: -10%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%);
	mix-blend-mode: soft-light;
	transform: translateX(-140%);
}
.as-hero__glint.is-on { animation: as-glint 1.5s var(--ease-slow) both; }
@keyframes as-glint { from { transform: translateX(-140%); } to { transform: translateX(140%); } }

.as-hero__hint {
	margin: -.4rem 0 0;
	font-size: .88rem;
	color: var(--taupe-diep);
	opacity: 0;
	transition: opacity .6s;
}
.as-hero.is-settled:not(.is-touched) .as-hero__hint { opacity: 1; }

/* Donkere sluier bovenin zolang het beeld schermvullend is (leesbaarheid menu) */
.as-hero__veil {
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	height: 34%;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(40, 34, 28, .5), rgba(40, 34, 28, 0));
	opacity: clamp(0, calc(1 - var(--p) * 3), 1);
}

/* Monogram: tekent zich wit over de close-up en vliegt naar de titel */
.as-hero__mono {
	--mp: 1;
	position: absolute;
	z-index: 4;
	left: 0;
	top: 0;
	width: 100px;
	height: auto;
	transform-origin: 0 0;
	color: color-mix(in srgb, var(--taupe) calc(var(--mp) * 100%), var(--wit));
	filter: drop-shadow(0 4px 24px rgba(40, 34, 28, calc((1 - var(--mp)) * .35)));
	pointer-events: none;
	will-change: transform;
}
.as-hero__mono.as-mono--draw path { stroke-width: 34; }

/* Scrollhint */
.as-hero__cue {
	position: absolute;
	left: 50%;
	bottom: clamp(20px, 4vh, 40px);
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
	margin: 0;
	padding: .75rem 1.3rem .7rem;
	white-space: nowrap;
	border-radius: 30px;
	background: rgba(40, 34, 28, .32);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: .95rem;
	letter-spacing: .04em;
	color: var(--wit);
	transform: translateX(-50%);
	opacity: clamp(0, calc(1 - var(--p) * 10), 1);
	pointer-events: none;
}
.as-hero__cue-line { position: relative; width: 1px; height: 34px; overflow: hidden; background: rgba(255, 255, 255, .35); }
.as-hero__cue-line::after { content: ""; position: absolute; inset: 0; background: var(--wit); transform: translateY(-100%); animation: as-cue 2.2s var(--ease-slow) infinite; }
@keyframes as-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
.as-hero:not(.is-scrolly) .as-hero__cue { display: none; }

/* Stenenbakje */
.as-hero__tray {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .8rem;
	opacity: var(--tp3);
	transform: translateY(calc((1 - var(--tp3)) * 18px));
}
.as-hero__stones {
	display: flex;
	gap: .9rem;
	padding: .55rem .8rem;
	border-radius: 40px;
	background: rgba(255, 255, 255, .55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 14px 34px -22px rgba(40, 34, 28, .6);
}
.as-stone {
	position: relative;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transition: transform .5s var(--ease);
}
.as-stone__gem {
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background-image: var(--img);
	background-size: auto 560%;
	background-position: var(--fx) var(--fy);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .55),
		inset -6px -9px 14px rgba(40, 34, 28, .28),
		inset 5px 6px 10px rgba(255, 255, 255, .35),
		0 6px 14px -6px rgba(40, 34, 28, .5);
	filter: saturate(.75) brightness(.96);
	transition: filter .4s, transform .5s var(--ease);
}
.as-stone__gem::after {
	content: "";
	position: absolute;
	left: 22%;
	top: 16%;
	width: 26%;
	height: 18%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
	transform: rotate(-30deg);
}
.as-stone:hover { transform: translateY(-3px); }
.as-stone:hover .as-stone__gem { transform: scale(1.08); filter: saturate(1.05) brightness(1.04); }
.as-stone.is-active .as-stone__gem { filter: saturate(1.1) brightness(1.04); }
.as-stone__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; pointer-events: none; }
.as-stone__ring circle { fill: none; stroke: var(--tint-deep); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: opacity .4s; }
.as-stone.is-active .as-stone__ring circle { opacity: 1; stroke-dashoffset: 0; }
.as-stone.is-running .as-stone__ring circle { animation: as-stone-progress var(--hold, 7s) linear forwards; }
@keyframes as-stone-progress { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.as-hero:not(.is-settled) .as-stone__ring circle,
.as-hero.is-paused .as-stone__ring circle,
.as-hero__tray:hover .as-stone__ring circle,
.as-hero__tray:focus-within .as-stone__ring circle { animation-play-state: paused; }

.as-hero__caption { margin: 0; min-height: 1.4em; font-size: 1rem; text-align: center; color: var(--kop); transition: opacity .35s; }
.as-hero__caption a { text-decoration: none; }
.as-hero__caption a:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.as-hero__caption.is-changing { opacity: 0; }

/* Header boven de hero: transparant, wit zolang het beeld schermvullend is */
body.hero-active .as-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
body.hero-immersed .as-header .as-nav__list > li > a,
body.hero-immersed .as-header .as-nav__toggle,
body.hero-immersed .as-header .as-burger,
body.hero-immersed .as-header .as-nav__wa { color: var(--wit); }
body.hero-immersed .as-header .as-nav__wa { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.as-header .as-nav__list > li > a, .as-header .as-nav__toggle, .as-header .as-burger, .as-header .as-nav__wa { transition: color .45s var(--ease), box-shadow .45s var(--ease); }

/* Mobiel: boog bovenin, tekst eronder, bakje over de onderrand van de boog */
@media (max-width: 899px) {
	.as-hero.is-scrolly .as-hero__track { height: 190vh; }
	.as-hero__layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-content: start;
		gap: 22px;
		padding: calc(var(--header-h) + 22px) var(--gutter) 24px;
	}
	.as-hero__frame-area { order: -1; position: relative; }
	.as-hero__frame-slot {
		--frame-shape: arch;
		width: min(100%, 40svh * .92);
		aspect-ratio: .92;
		border-radius: 999px 999px 4px 4px;
	}
	.as-hero__tray { position: absolute; left: 50%; bottom: -18px; transform: translate(-50%, calc((1 - var(--tp3)) * 18px)); }
	.as-hero__stones { gap: .5rem; padding: .4rem .55rem; background: rgba(255, 255, 255, .82); }
	.as-stone { width: 44px; height: 44px; }
	.as-hero__caption { display: none; }
	.as-hero__mono-slot { width: 96px; margin-bottom: .9rem; display: none; }
	.as-hero__title { font-size: clamp(2.1rem, 8.6vw, 2.9rem); max-width: none; margin-bottom: .4em; }
	.as-hero__lead { font-size: 1.05rem; margin-bottom: 1.2rem; }
	.as-hero__actions .as-btn { padding: .9rem 1.2rem; }
	.as-hero__hint { display: none; }
	.as-hero__cue { font-size: .88rem; }
}
@media (max-width: 899px) and (max-height: 720px) {
	.as-hero__lead { display: none; }
}