/* ==========================================================================
   Over Anja "Wie is Anja"
   over.js zet .is-in op onderdelen die in beeld komen en --p op de tijdlijn.
   ========================================================================== */

.as-over { background: var(--linnen); }
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Opening */
.as-over-hero {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(32px, 5vw, 96px);
	align-items: center;
	min-height: calc(100svh - var(--header-h));
	padding: clamp(40px, 6vw, 80px) var(--edge) clamp(56px, 7vw, 104px);
}
.as-over-hero__name { margin: 0; font: 400 clamp(3.6rem, 8vw, 8.4rem)/.9 var(--f-h1); letter-spacing: .04em; color: var(--kop); }
.as-over-hero__role { margin: .2rem 0 1.6rem; font: 400 clamp(2.4rem, 3.4vw, 3.4rem)/1 var(--f-script); color: var(--taupe-diep); }
.as-over-hero__intro { max-width: 46ch; margin-bottom: 2.2rem; font-size: 1.22rem; }
.as-over-quote { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: center; margin: 0; max-width: 34rem; }
.as-over-quote__mono { width: 76px; color: var(--taupe); }
.as-over-quote__mono path { stroke-width: 110; }
.as-over-quote p { margin: 0; font: 700 clamp(1.9rem, 2.4vw, 2.5rem)/1.12 var(--f-h2); letter-spacing: .02em; color: var(--kop); }

.as-over-hero__media { position: relative; justify-self: center; width: min(100%, 520px); }
.as-over-hero__arch { aspect-ratio: 4 / 5.3; border-radius: 999px 999px 6px 6px; overflow: hidden; background: var(--kiezel); box-shadow: 0 50px 90px -60px rgba(59, 52, 45, .6); }
.as-over-hero__arch img, .as-over-hero__arch .as-ph { width: 100%; height: 100%; object-fit: cover; }
.as-over-hero__dot {
	position: absolute;
	left: -12%;
	bottom: 6%;
	width: 38%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 8px var(--linnen), 0 30px 50px -30px rgba(59, 52, 45, .6);
	transform: translateY(var(--shift, 0px));
}
.as-over-hero__dot img, .as-over-hero__dot .as-ph { width: 100%; height: 100%; object-fit: cover; }

/* Tijdlijn */
.as-path { padding-block: var(--section); background: var(--wit); }
.as-path__title { text-align: center; margin-bottom: clamp(40px, 5vw, 72px); }
.as-path__wrap { --p: 0; position: relative; }
.as-path__line { position: absolute; left: 50%; top: 0; width: 14px; height: 100%; transform: translateX(-50%); overflow: visible; pointer-events: none; }
.as-path__line path { fill: none; stroke: var(--taupe); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.as-path__list { display: grid; gap: clamp(40px, 6vw, 88px); }
.as-path__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: center; }
.as-path__dot { grid-column: 2; grid-row: 1; justify-self: center; width: 16px; height: 16px; border-radius: 50%; background: var(--wit); box-shadow: inset 0 0 0 2px var(--taupe); transition: background-color .5s, box-shadow .5s; }
.as-path__item.is-in .as-path__dot { background: var(--mint); box-shadow: 0 0 0 6px rgba(159, 199, 170, .25); }
.as-path__card { grid-column: 1; grid-row: 1; justify-self: end; max-width: 460px; text-align: right; }
.as-path__photo { grid-column: 3; grid-row: 1; justify-self: start; width: min(100%, 360px); aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--linnen); }
.as-path__item.is-right .as-path__card { grid-column: 3; justify-self: start; text-align: left; }
.as-path__item.is-right .as-path__photo { grid-column: 1; justify-self: end; }
.as-path__photo img, .as-path__photo .as-ph { width: 100%; height: 100%; object-fit: cover; }
.as-path__year { margin: 0 0 .2rem; font: 400 clamp(2.6rem, 4vw, 3.8rem)/1 var(--f-h1); letter-spacing: .04em; color: var(--taupe); }
.as-path__name { margin-bottom: .5rem; font: 700 clamp(1.9rem, 2.4vw, 2.4rem)/1.05 var(--f-h2); color: var(--kop); }
.as-path__text { margin: 0; }

/* Rust */
.as-calm { padding-block: var(--section); background: var(--taupe-diep); color: var(--wit); }
.as-calm .as-h2 { color: var(--wit); }
.as-calm__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.as-calm__text { max-width: 40ch; margin: 0; font-size: 1.15rem; color: rgba(255, 255, 255, .88); }
.as-calm__quote { margin: 0; }
.as-calm__quote p { margin: 0; font: 700 clamp(2.4rem, 4.2vw, 4.4rem)/1.08 var(--f-h2); letter-spacing: .02em; }
.as-calm .as-word-lit { opacity: .22; transition: opacity .5s var(--ease); }
.as-calm .as-word-lit.is-lit { opacity: 1; }

/* Atelier */
.as-studio__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.as-studio__text p { max-width: 46ch; }
.as-studio__place { margin: 0; }
.as-studio__place--a { margin-top: clamp(40px, 8vw, 120px); }
.as-studio__place img, .as-studio__place .as-ph { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.as-studio__place figcaption { margin-top: .7rem; font: 400 2rem/1 var(--f-script); color: var(--kop); }

/* Twee stijlen */
.as-styles { background: var(--wit); }
.as-styles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 72px); margin-top: 1rem; }
.as-styles__col { padding: clamp(24px, 3vw, 44px); border-radius: 6px; background: var(--linnen); }
.as-styles__col--anja { background: var(--kop); color: var(--wit); }
.as-styles__draw { width: 100%; max-width: 320px; height: auto; margin-bottom: 1.2rem; overflow: visible; }
.as-styles__draw path { fill: none; stroke: var(--taupe); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.8s var(--ease-slow); }
.as-styles__col--anja .as-styles__draw path { stroke: var(--mint); stroke-width: 2.4; transition-duration: 1.6s; }
.as-styles__col.is-drawn .as-styles__draw path { stroke-dashoffset: 0; }
.as-styles__kop { margin: 0 0 .4rem; font: 400 1.4rem/1 var(--f-h1); letter-spacing: .1em; }
.as-styles__col p:last-child { margin: 0; max-width: 40ch; font-size: 1.1rem; }

/* De eerste ring */
.as-first__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.as-first__media { justify-self: center; width: min(100%, 440px); }
.as-first__photo { aspect-ratio: 4 / 5; border-radius: 999px 999px 6px 6px; overflow: hidden; }
.as-first__photo img { width: 100%; height: 100%; object-fit: cover; }
.as-first__draw { width: 100%; height: auto; overflow: visible; }
.as-first__draw circle, .as-first__draw path { fill: none; stroke: var(--taupe-diep); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-slow); }
.as-first__draw path:nth-of-type(1) { transition-delay: .8s; }
.as-first__draw path:nth-of-type(2) { transition-delay: 1.4s; }
.as-first__draw .as-first__spark { fill: var(--roze); stroke: none; opacity: 0; transform-origin: 176px 64px; transform: scale(0); transition: opacity .4s 2.6s, transform .6s cubic-bezier(.3, 1.6, .5, 1) 2.6s; }
.as-first__media.is-drawn circle, .as-first__media.is-drawn path { stroke-dashoffset: 0; }
.as-first__media.is-drawn .as-first__spark { opacity: 1; transform: scale(1); }
.as-first__text p { max-width: 48ch; }
.as-first__quote, .as-mark__quote { margin: 1.6rem 0; padding: 0; }
.as-first__quote p, .as-mark__quote p { font: 400 clamp(2rem, 2.8vw, 2.8rem)/1.2 var(--f-script); color: var(--kop); }

/* Haar teken */
.as-mark { padding-block: var(--section); background: var(--kiezel); }
.as-mark__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.as-mark__stamp { position: relative; justify-self: center; display: grid; place-items: center; width: min(100%, 300px); aspect-ratio: 1; }
.as-mark__ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--kop), inset 0 0 0 10px var(--kiezel), inset 0 0 0 11px var(--kop); opacity: 0; transform: scale(1.4); }
.as-mark__mono { width: 62%; color: var(--kop); opacity: 0; transform: scale(1.6); filter: blur(6px); }
.as-mark__brilliant { position: absolute; right: 22%; top: 40%; width: 34px; fill: var(--wit); filter: drop-shadow(0 0 8px rgba(255, 255, 255, .9)); opacity: 0; transform: scale(0) rotate(0deg); }
.as-mark.is-in .as-mark__ring { animation: as-mark-ring .7s cubic-bezier(.3, 1.4, .5, 1) .2s forwards; }
.as-mark.is-in .as-mark__mono { animation: as-mark-press .7s cubic-bezier(.3, 1.4, .5, 1) .35s forwards; }
.as-mark.is-in .as-mark__brilliant { animation: as-mark-shine 1.4s var(--ease) 1.2s forwards; }
@keyframes as-mark-ring { to { opacity: 1; transform: scale(1); } }
@keyframes as-mark-press { 60% { opacity: 1; transform: scale(.94); filter: blur(0); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes as-mark-shine { 0% { opacity: 0; transform: scale(0) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: .9; transform: scale(.9) rotate(90deg); } }

/* Voor wie */
.as-for__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.as-for__text { max-width: 44ch; font-size: 1.15rem; }
.as-for__cloud { position: relative; display: grid; place-items: center; min-height: 380px; }
.as-for__quote { position: relative; z-index: 1; margin: 0; font: 400 clamp(2.6rem, 4vw, 4rem)/1.1 var(--f-script); color: var(--kop); text-align: center; }
.as-for__moment {
	--a: calc(var(--k) * 60deg + 20deg);
	position: absolute;
	left: 50%;
	top: 50%;
	padding: .45rem 1rem;
	border-radius: 30px;
	background: var(--wit);
	font-size: .98rem;
	white-space: nowrap;
	box-shadow: 0 10px 22px -16px rgba(59, 52, 45, .7);
	transform: translate(-50%, -50%) rotate(var(--a)) translateX(min(42vw, 230px)) rotate(calc(var(--a) * -1));
	animation: as-float-chip 6s ease-in-out infinite;
	animation-delay: calc(var(--k) * -1s);
}
@keyframes as-float-chip { 50% { margin-top: -8px; } }

/* Afsluiter */
.as-over-cta { padding-block: var(--section); background: var(--wit); }
.as-over-cta .as-h2 { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }
.as-over-cta__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.as-way {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: 1.6rem 1.6rem;
	border-radius: 6px;
	background: var(--linnen);
	color: var(--kop);
	font-weight: 500;
	font-size: 1.1rem;
	text-decoration: none;
	transition: background-color .3s, transform .4s var(--ease);
}
.as-way .as-wicon { width: 46px; height: 46px; }
.as-way > .as-icon { width: 22px; height: 22px; transition: transform .4s var(--ease); }
.as-way:hover { background: var(--mint); transform: translateY(-4px); }
.as-way:hover > .as-icon { transform: translateX(4px); }

@media (max-width: 999px) {
	.as-over-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 32px var(--gutter) 64px; }
	.as-over-hero__media { order: -1; width: min(86%, 420px); }
	.as-calm__grid, .as-first__grid, .as-mark__grid, .as-for__grid { grid-template-columns: minmax(0, 1fr); }
	.as-studio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-studio__text { grid-column: 1 / -1; }
	.as-styles__grid, .as-over-cta__grid { grid-template-columns: minmax(0, 1fr); }
	.as-path__line { left: 18px; transform: none; }
	.as-path__item, .as-path__item.is-right { grid-template-columns: 36px minmax(0, 1fr); row-gap: 1rem; }
	.as-path__dot { grid-column: 1; grid-row: 1; justify-self: start; margin-left: 11px; align-self: start; margin-top: .9rem; }
	.as-path__card, .as-path__item.is-right .as-path__card { grid-column: 2; grid-row: 1; justify-self: start; text-align: left; }
	.as-path__photo, .as-path__item.is-right .as-path__photo { grid-column: 2; grid-row: 2; justify-self: start; }
	.as-for__cloud { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; }
	.as-calm .as-word-lit { opacity: 1; }
	.as-mark__ring, .as-mark__mono, .as-mark__brilliant { opacity: 1; transform: none; filter: none; animation: none !important; }
	.as-for__moment { animation: none; }
}