/* ===== intro.css — openingsanimatie + hero ===== */
@keyframes draw{to{stroke-dashoffset:0}}

@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

.hero{position:relative;min-height:calc(100vh - 100px);min-height:calc(100svh - 100px);display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(20px,4vw,60px);padding:clamp(40px,6vw,90px) var(--pad);overflow:hidden;background:linear-gradient(160deg,var(--bg2),var(--bg) 70%)}
.hero::before{content:"";position:absolute;width:60vw;height:60vw;max-width:800px;max-height:800px;border-radius:50%;right:-10vw;top:-10vw;background:radial-gradient(circle,rgba(201,174,136,.35),transparent 65%);animation:float 12s ease-in-out infinite}
@keyframes float{50%{transform:translateY(40px) scale(1.1)}}
.hero-text{position:relative;z-index:2}
.eyebrow{font-size:12px;letter-spacing:.5em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-size:clamp(40px,5.6vw,96px);letter-spacing:.08em;line-height:1.02;margin:20px 0 36px;text-transform:uppercase}
.hero h1 .w{display:inline-block;white-space:nowrap}
.hero h1 .ch{display:inline-block}
.js .hero .eyebrow,.js .hero .btn,.js .hero h1 .ch,.js .hero-art{opacity:0}
.js .hero h1 .ch{transform:translateY(60px)}
.ready .hero h1 .ch{animation:rise 1.2s var(--ease) forwards}
.ready .hero .eyebrow{animation:fade 1.2s .1s forwards}
.ready .hero .btn{animation:fade 1.2s 1.2s forwards}
.ready .hero-art{animation:fade 1.6s .3s forwards}
.hero-art{position:relative;justify-self:center;width:min(100%,460px);aspect-ratio:3/4}
.arch{position:absolute;inset:0;border-radius:999px 999px 0 0;border:1px solid var(--accent);transform:translate(16px,16px)}
.arch-in{position:absolute;inset:0;border-radius:999px 999px 0 0;overflow:hidden;background:linear-gradient(var(--bg2),var(--bg));box-shadow:0 30px 80px -30px rgba(80,60,30,.35)}
.arch-in{display:grid;place-items:center}
.arch-in .mk{width:62%;height:auto;color:var(--ink);animation:bob 7s ease-in-out infinite;overflow:visible}
@keyframes bob{50%{transform:translateY(-14px) scale(1.02)}}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:0;animation:tw 4s infinite;pointer-events:none}
@keyframes tw{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1) translateY(-14px)}}
.scroll-cue{position:absolute;bottom:20px;left:50%;width:1px;height:50px;background:var(--line);overflow:hidden}
.scroll-cue::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--ink);animation:cue 2s infinite}
@keyframes cue{to{top:100%}}

/* achtergrondvideo in de hero */
.hero-text,.hero-art,.scroll-cue{z-index:2}

/* logo-tekeningen (lijnen) */
.mk path,.wm path,.lg path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.mk path.sp,.wm path.sp,.lg path.sp{fill:var(--accent);stroke:none}
.js .draw path:not(.sp){stroke-dasharray:1 2;stroke-dashoffset:1.02}
.js .draw .sp{opacity:0}
.ready .hero .draw path:not(.sp){animation:draw 2.2s var(--ease) forwards;animation-delay:calc(.5s + var(--i)*.09s)}
.ready .hero .draw .sp{animation:fade .9s 2s forwards}
/* pagina-kop op subpagina's */
.phero{text-align:center;padding:clamp(60px,10vw,140px) 20px clamp(30px,5vw,60px);background:linear-gradient(var(--bg2),var(--bg))}
.phero h1{font-size:clamp(38px,8vw,108px);letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateY(40px);animation:rise 1.2s .1s var(--ease) forwards}
.phero .label{margin-bottom:14px;opacity:0;animation:fade 1s forwards}

/* hero zonder boogvenster: tekst gecentreerd */
.hero{grid-template-columns:1fr;justify-items:center;text-align:center}
.hero-text{max-width:900px}

/* ---------- nieuwe openingsanimatie ---------- */