/* Hero: "Van schets tot ruimte". A line drawing of the Santiago living room becomes the 3D visualisation,
   then the arch opens up like a doorway and the projects rise in. */
:root{--mh-h:calc(100svh - var(--head-h));--mh-p:120svh;--arch-h:min(calc(100svh - var(--head-h) - 150px),660px);--arch-w:calc(var(--arch-h) * .8)}
.mh-stage{position:relative;margin-top:var(--head-h);height:calc(2 * var(--mh-h) + var(--mh-p))}
.mh{position:sticky;top:var(--head-h);height:var(--mh-h);min-height:560px;overflow:hidden;isolation:isolate}

/* atmosphere: paper, a faint drafting grid, sunlight and an olive branch shadow */
.mh-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--paper)}
.mh-paper{position:absolute;inset:0;background:url(../img/paper.webp) center/cover;opacity:.32}
.mh-grid{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.mh-sun{position:absolute;inset:-10%;background:
  linear-gradient(115deg,transparent 30%,rgba(255,250,240,.55) 42%,transparent 54%),
  linear-gradient(115deg,transparent 52%,rgba(255,250,240,.4) 60%,transparent 70%),
  radial-gradient(60% 70% at 72% 40%,rgba(255,248,236,.7),transparent 70%)}
.mh-leaves{position:absolute;top:-12%;right:-8%;width:min(70vw,980px);aspect-ratio:1;background:url(../img/leaves-shadow.webp) center/contain no-repeat;opacity:.13;transform-origin:100% 0;animation:sway 16s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-1.4deg) translate3d(0,0,0)}to{transform:rotate(1.6deg) translate3d(-14px,10px,0)}}

.mh-wrap{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,5vw,90px)}
.mh-copy{max-width:600px;position:relative;z-index:2}
.mh h1{font-size:var(--s-hero);line-height:.92;margin-bottom:.32em}
.mh h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.mh h1 .ln > span{display:block}
.mh h1 em{padding-left:.5em}
.mh-lede{max-width:44ch;color:var(--ink-2);margin-bottom:2em}
.mh-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* the drawing */
.mh-art{position:relative;width:var(--arch-w);height:var(--arch-h);margin-right:clamp(40px,7vw,130px)}
.mh-arch{position:absolute;inset:0;border-radius:999px 999px 0 0;overflow:hidden;background:var(--cream);box-shadow:0 40px 80px -50px rgba(59,46,38,.55);transform-origin:50% 55%;will-change:transform}
.mh-arch::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line-2);pointer-events:none}
.mh-sketch,.mh-render img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mh-sketch{opacity:.92}
.mh-render{position:absolute;inset:0;overflow:hidden}
.mh-render img{transform-origin:50% 55%}
.js .mh-render{clip-path:inset(100% 0 0 0)}
.mh-scan{position:absolute;left:0;right:0;top:100%;height:1px;background:var(--ink);opacity:0;box-shadow:0 0 0 .5px rgba(247,242,234,.6)}
.mh-scan::before,.mh-scan::after{content:"";position:absolute;top:-4px;width:9px;height:9px;border:1px solid var(--ink);border-radius:50%;background:var(--cream)}
.mh-scan::before{left:8px}.mh-scan::after{right:8px}

/* architectural grid bubbles around the arch */
.mh-axes{position:absolute;inset:-46px -46px -30px -46px;width:calc(100% + 92px);height:calc(100% + 76px);overflow:visible;pointer-events:none}
.mh-axes line{stroke:var(--ink);stroke-width:.75;stroke-dasharray:6 5;opacity:.45}
.mh-bub{position:absolute;inset:-46px -46px -30px -46px;pointer-events:none}
.mh-bub span{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:1px solid var(--ink);background:var(--paper);display:grid;place-items:center;font:500 .66rem/1 var(--sans);color:var(--ink)}

/* annotations from her design focus */
.mh-notes{list-style:none;margin:0;padding:0}
.mh-note{position:absolute;left:var(--x);top:var(--y);z-index:3;pointer-events:none}
.mh-note i{position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--cream);border:1px solid var(--ink)}
.mh-note b{position:absolute;top:0;height:1px;background:var(--ink);width:var(--len);transform-origin:0 50%}
.mh-note span{position:absolute;top:-.9em;white-space:nowrap;font:500 .66rem/1.8 var(--sans);letter-spacing:.2em;text-transform:uppercase;background:var(--paper);padding:0 8px}
.mh-note.r b{left:4px}.mh-note.r span{left:calc(var(--len) + 8px)}
.mh-note.l b{right:4px;transform-origin:100% 50%}.mh-note.l span{right:calc(var(--len) + 8px)}

.mh-state{position:absolute;left:0;right:0;top:calc(100% + 18px);display:flex;align-items:center;gap:14px;font:500 .68rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--taupe)}
.mh-state .bar{flex:1;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.mh-state .bar i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.mh-state .now{position:relative;display:inline-grid;color:var(--ink)}
.mh-state .now span{grid-area:1/1}
.js .mh-state .now span + span{opacity:0}

.mh-swatch{position:absolute;left:calc(-1 * clamp(60px,8vw,120px));bottom:12%;z-index:3;background:var(--cream);border:1px solid var(--line);padding:14px 16px 12px;box-shadow:0 24px 50px -34px rgba(59,46,38,.6)}
.mh-swatch small{display:block;font:500 .6rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);margin-bottom:10px}
.mh-swatch ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.mh-swatch li{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(59,46,38,.15)}

.mh-scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);margin:0;font:500 .64rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--taupe);display:flex;align-items:center;gap:12px}
.mh-scroll::after{content:"";width:1px;height:28px;background:linear-gradient(var(--ink),transparent);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:0 0}50%{transform:scaleY(1);transform-origin:0 0}51%{transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}

/* the section that rises over the stage, with a doorway-shaped top */
.mh-next{position:relative;z-index:5;margin-top:calc(-1 * var(--mh-h));background:var(--paper)}
.mh-next::before{content:"";position:absolute;left:50%;bottom:calc(100% - 1px);width:min(70vw,820px);aspect-ratio:2/1;transform:translateX(-50%);background:var(--paper);border-radius:999px 999px 0 0}
.mh-next::after{content:"";position:absolute;left:50%;bottom:calc(100% - 1px);width:calc(min(70vw,820px) - 26px);aspect-ratio:2/1;transform:translateX(-50%) translateY(-13px) ;border:1px solid var(--line-2);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none}

@media (max-width:900px){
  :root{--arch-h:min(40svh,380px);--mh-p:110svh}
  .mh-wrap{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;justify-items:center;gap:22px}
  .mh-art{margin:0 0 30px}
  .mh .eyebrow{font-size:.62rem;letter-spacing:.2em;margin-bottom:1em}
  .mh-lede{display:none}
  .mh-ctas{gap:8px}.mh-ctas .btn{min-height:46px;padding:0 1.15em;font-size:.66rem;letter-spacing:.14em}
  .mh-notes{display:none}
  .mh-copy{text-align:left;width:100%}
  .mh h1{font-size:clamp(2.7rem,11.5vw,4.4rem);margin-bottom:.25em}
  .mh-lede{font-size:.98rem;margin-bottom:1.2em}
  .mh-swatch{left:-30px;bottom:6%;padding:10px 12px 9px}
  .mh-swatch li{width:20px;height:20px}
  .mh-note span{font-size:.56rem;letter-spacing:.16em}
  .mh-axes,.mh-bub{display:none}
  .mh-scroll{display:none}
  .mh-leaves{width:120vw;opacity:.1}
}
@media (max-width:420px){.mh-note.hide-s{display:none}}
@media (prefers-reduced-motion:reduce){
  .mh-stage{height:auto}.mh{position:relative;top:0;height:auto;min-height:var(--mh-h);padding-block:40px}
  .mh-next{margin-top:0}.mh-next::before,.mh-next::after{display:none}
  .js .mh-render{clip-path:none}.mh-leaves,.mh-scroll::after{animation:none}
}