/* ==========================================================================
   Van steen tot sieraad "Aan de werkbank"
   proces.js zet: .is-active op laag/stap, --p (0..1) voor de lijntekening.
   ========================================================================== */

.as-proces {
	--p: 0;
	position: relative;
	background: var(--taupe-diep);
	color: var(--wit);
}
.as-proces .as-h2 { color: var(--wit); }
.as-proces__defs { position: absolute; width: 0; height: 0; }

.as-proces__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }

/* Grote foto in een boog, sticky aan de linkerkant */
.as-proces__visual { position: relative; }
.as-proces__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding: clamp(28px, 5vh, 56px) clamp(24px, 3vw, 56px) 0 0; }
.as-proces__stage {
	position: relative;
	height: 100%;
	border-radius: 999px 999px 0 0;
	overflow: hidden;
	background: var(--taupe);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
	margin-left: var(--edge);
}

/* Een laag per stap */
.as-fx { position: absolute; inset: 0; overflow: hidden; }
.as-fx__img, .as-fx__heat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-fx .as-ph { position: absolute; inset: 0; }

.as-proces__layer { opacity: 0; transition: opacity 1.1s var(--ease-slow); }
.as-proces__layer.is-active { opacity: 1; z-index: 1; }
.as-proces__layer .as-fx__img { transform: scale(calc(var(--fz, 1) * 1.06)); transition: transform 2.2s var(--ease); }
.as-proces__layer.is-active .as-fx__img { transform: scale(var(--fz, 1)); }

/* Inrollen van boven, als metaal door de wals */
.as-proces__layer.as-fx--roll { opacity: 1; clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(.7, 0, .2, 1); }
.as-proces__layer.as-fx--roll.is-active { clip-path: inset(0 0 0 0); }
.as-proces__layer.as-fx--roll .as-fx__img { transform: scale(calc(var(--fz, 1) * 1.04)) translateY(-6%); transition: transform 1.6s var(--ease); }
.as-proces__layer.as-fx--roll.is-active .as-fx__img { transform: scale(var(--fz, 1)) translateY(0); }

/* Twinkelende lichtpuntjes op de stenen */
.as-fx__sparkles { position: absolute; inset: 0; pointer-events: none; }
.as-fx__star {
	position: absolute;
	width: clamp(16px, 2.2vw, 30px);
	height: auto;
	fill: var(--wit);
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9));
	transform: translate(-50%, -50%) scale(0) rotate(0deg);
	opacity: 0;
}
.is-active > .as-fx__sparkles .as-fx__star,
.is-active .as-fx__sparkles .as-fx__star { animation: as-twinkle 2.6s var(--ease) infinite; }
@keyframes as-twinkle {
	0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); }
	45% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); }
	70% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(90deg); }
}

/* Vlam: warme gloed en hitte-trillen boven de vlam */
.as-fx__heat {
	filter: url(#as-heat);
	-webkit-mask-image: radial-gradient(ellipse 18% 24% at var(--bx, var(--fx)) calc(var(--by, var(--fy)) - 14%), #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse 18% 24% at var(--bx, var(--fx)) calc(var(--by, var(--fy)) - 14%), #000 30%, transparent 75%);
	opacity: 0;
	transition: opacity 1s var(--ease);
}
.is-active .as-fx__heat { opacity: 1; }
.as-fx__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at var(--bx, var(--fx)) var(--by, var(--fy)), rgba(255, 176, 92, .55), rgba(255, 128, 48, .22) 14%, rgba(255, 110, 40, 0) 34%);
	mix-blend-mode: screen;
	opacity: 0;
	transition: opacity 1s var(--ease);
}
.is-active .as-fx__glow { opacity: 1; animation: as-flicker 2.2s steps(1, end) infinite, as-breathe 3.4s ease-in-out infinite; }
@keyframes as-flicker { 0% { filter: brightness(1); } 23% { filter: brightness(1.18); } 41% { filter: brightness(.92); } 62% { filter: brightness(1.1); } 80% { filter: brightness(.97); } }
@keyframes as-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Afwerking: glansstreep en het meesterteken */
.as-fx__sheen {
	position: absolute;
	inset: -10%;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .75) 50%, transparent 62%);
	mix-blend-mode: soft-light;
	transform: translateX(-140%);
}
.is-active .as-fx__sheen { animation: as-sheen 1.6s var(--ease-slow) .3s both; }
@keyframes as-sheen { from { transform: translateX(-140%); } to { transform: translateX(140%); } }
.as-fx__stamp {
	position: absolute;
	right: 9%;
	bottom: 7%;
	width: clamp(80px, 11vw, 150px);
	color: var(--wit);
	mix-blend-mode: soft-light;
	opacity: 0;
	filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25));
	transform: scale(1.8) rotate(-6deg);
}
.as-fx__stamp .as-mono { width: 100%; height: auto; }
.is-active .as-fx__stamp { animation: as-stamp .7s cubic-bezier(.3, 1.4, .5, 1) 1.5s both; }
@keyframes as-stamp {
	0% { opacity: 0; transform: scale(1.8) rotate(-6deg); filter: blur(6px); }
	60% { opacity: 1; transform: scale(.94) rotate(-6deg); filter: blur(0); }
	100% { opacity: .95; transform: scale(1) rotate(-6deg); filter: blur(0); }
}

/* Badge met lijntekening en teller, onderin de boog */
.as-proces__badge {
	position: absolute;
	left: calc(var(--edge) + 28px);
	bottom: 28px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .6rem 1.4rem .6rem .6rem;
	border-radius: 80px;
	background: rgba(59, 52, 45, .55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.as-proces__counter { margin: 0; font: 400 1.6rem/1 var(--f-h1); letter-spacing: .08em; color: var(--wit); font-variant-numeric: tabular-nums; }

/* De lijntekening: steen, strook, ring, steen gezet, glans */
.as-emblem { width: 88px; height: 88px; overflow: visible; }
.as-emblem path, .as-emblem circle { fill: none; stroke: var(--mint); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.as-emblem__gem { --d: clamp(0, calc(var(--p) / .2), 1); --g: clamp(0, calc((var(--p) - .78) / .14), 1); transform-box: view-box; transform-origin: 100px 100px; transform: translateY(calc(var(--g) * -42px)) scale(calc(1 - var(--g) * .48)); }
.as-emblem__gem path { stroke-dashoffset: calc(1 - var(--d)); }
.as-emblem__strip { opacity: calc(1 - clamp(0, calc((var(--p) - .55) / .1), 1)); }
.as-emblem__strip path { stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - .25) / .2), 1)); }
.as-emblem__ring circle { stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - .5) / .22), 1)); }
.as-emblem__spark path { fill: var(--wit); stroke: none; opacity: var(--spark, 0); }
.as-emblem__shine path { stroke: var(--wit); stroke-width: 2; stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - .9) / .1), 1)); }

/* Stappen rechts */
.as-proces__content { padding: 0 var(--edge) 0 clamp(24px, 3vw, 56px); }
.as-proces__head { padding-top: clamp(80px, 16vh, 180px); margin-bottom: clamp(24px, 6vh, 64px); }
.as-proces__head p { max-width: 40ch; color: rgba(255, 255, 255, .86); }
.as-proces__mobile-emblem { display: none; }
.as-step { display: flex; flex-direction: column; justify-content: center; min-height: 78vh; opacity: .3; transition: opacity .7s var(--ease); }
.as-step:last-child { min-height: 96vh; }
.as-step.is-active { opacity: 1; }
.as-step > .as-step__img { display: none; }
.as-step__num { margin-bottom: .1rem; font: 700 clamp(3.6rem, 5vw, 5rem)/1 var(--f-h2); color: var(--mint); }
.as-step__title { margin-bottom: .7rem; font: 400 clamp(2.2rem, 3.2vw, 3rem)/1.05 var(--f-h1); letter-spacing: .05em; }
.as-step p { max-width: 40ch; margin: 0; font-size: 1.18rem; color: rgba(255, 255, 255, .88); }

/* Mobiel: kaarten om opzij te vegen */
@media (max-width: 899px) {
	.as-proces { padding-block: 72px; }
	.as-proces__grid { grid-template-columns: minmax(0, 1fr); }
	.as-proces__visual { display: none; }
	.as-proces__content { padding: 0; }
	.as-proces__head { position: relative; padding: 0 var(--gutter); padding-right: 120px; margin-bottom: 28px; }
	.as-proces__mobile-emblem { display: block; position: absolute; right: var(--gutter); top: 4px; }
	.as-proces__mobile-emblem .as-emblem { width: 84px; height: 84px; }
	.as-steps {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 82vw;
		gap: 16px;
		padding: 0 var(--gutter) 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}
	.as-steps::-webkit-scrollbar { display: none; }
	.as-step, .as-step:last-child { min-height: 0; justify-content: flex-start; opacity: 1; scroll-snap-align: start; }
	.as-step > .as-step__img { display: block; position: relative; inset: auto; aspect-ratio: 4 / 4.6; margin-bottom: 1.3rem; border-radius: 999px 999px 4px 4px; background: var(--taupe); }
	.as-step > .as-step__img .as-fx__img { transform: scale(var(--fz, 1)); }
	.as-step__num { font-size: 3rem; }
	.as-step__title { font-size: 2rem; }
	.as-step p { font-size: 1.05rem; }
	.as-fx__star { width: 22px; }
	.as-fx__stamp { width: 84px; }
}

@media (prefers-reduced-motion: reduce) {
	.as-fx__sparkles, .as-fx__heat, .as-fx__glow, .as-fx__sheen { display: none; }
	.as-proces__layer.as-fx--roll { clip-path: none; opacity: 0; }
	.as-proces__layer.as-fx--roll.is-active { opacity: 1; }
	.is-active .as-fx__stamp { animation: none; opacity: .95; transform: rotate(-6deg); }
}