/* ==========================================================================
   ATELIER MOKA — scroll-driven case study ("direction-lab" homepage section)
   Native page scroll is preserved. JS only maps progress to transforms and
   the internal Moka page position. No scroll hijacking and no animation lib.

   TO DEACTIVATE THIS EXPERIMENT AND KEEP EVERYTHING ELSE:
   1. Delete the <link rel="stylesheet" href="assets/moka-lab.css?v=..."> tag.
   2. Delete the <section id="direction-lab" class="moka-story">…</section>
      block from index.html / en/index.html / it/index.html.
   3. Delete the <script src="assets/moka-lab.js?v=..."> tag.
   4. Repoint the hero primary CTA at #selected-work instead of #direction-lab.
   Nothing in bonaventis.css or bonaventis.js depends on this file, and
   nothing outside <section id="direction-lab"> depends on it either — nav,
   palette, type and every other homepage section are untouched by it. The
   #selected-work .proj--lead/--dark/--wide variants below are a separate,
   independent improvement (varied case-study compositions) and can stay
   even if this section is removed.
   ========================================================================== */
.moka-story{position:relative;background:var(--cream);border-top:1px solid var(--line);overflow:clip}
.moka-story__intro{min-height:72svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(72px,9vw,140px);padding-bottom:clamp(72px,9vw,140px)}
.moka-story__title{max-width:980px;margin:14px 0 0;font-size:clamp(44px,7.6vw,116px);line-height:.91;letter-spacing:-.055em;font-weight:800}
.moka-story__lede{max-width:620px;margin:28px 0 0}
.moka-story__scrollcue{display:flex;align-items:center;gap:13px;margin-top:42px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.moka-story__scrollcue i{position:relative;width:70px;height:1px;background:var(--line);overflow:hidden}
.moka-story__scrollcue i:after{content:"";position:absolute;inset:0;background:var(--coral);transform:translateX(-100%);animation:mokaCue 1.8s cubic-bezier(.22,.9,.24,1) infinite}
@keyframes mokaCue{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}

.moka-story__track{height:520svh;position:relative}
.moka-story__sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--cream);isolation:isolate}
.moka-story__canvas{position:absolute;inset:clamp(88px,9.5vh,108px) clamp(18px,4.4vw,70px) clamp(28px,4vh,52px);min-height:0}
.moka-story__phase{position:absolute;left:clamp(54px,7vw,118px);top:clamp(72px,8vh,88px);z-index:8;display:flex;align-items:baseline;gap:12px;pointer-events:none}
.moka-story__phase-num{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--coral);min-width:22px}
.moka-story__phase-name{font-size:12px;font-weight:650;letter-spacing:.02em}
.moka-story__rail{position:absolute;left:clamp(20px,2.7vw,44px);top:clamp(104px,11vh,126px);bottom:clamp(34px,5vh,58px);z-index:8;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:9px;pointer-events:none}
.moka-story__rail-index{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:var(--ink-soft)}
.moka-story__rail-line{position:relative;width:1px;height:100%;background:var(--line)}
.moka-story__rail-line i{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--coral);transform:scaleY(0);transform-origin:top}

/* scattered source material */
.moka-source-cloud{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none}
.moka-source{position:absolute;left:50%;top:50%;min-width:180px;max-width:min(300px,78vw);padding:14px 17px;background:rgba(237,233,226,.96);border:1px solid rgba(22,32,43,.22);box-shadow:0 24px 55px -36px rgba(22,32,43,.9);will-change:transform,opacity}
.moka-source b{display:block;font-size:15px;letter-spacing:-.01em}
.moka-source span{display:block;margin-top:4px;font-family:var(--mono);font-size:9.5px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.moka-source--instagram,.moka-source--address{min-width:225px;padding:18px 20px}.moka-source--instagram b,.moka-source--address b{font-size:19px}

/* browser becomes the finished identity */
.moka-browser{--open:0;position:absolute;z-index:3;left:50%;top:50%;width:min(1180px,88vw);height:min(790px,78svh);background:#f3eee3;border:1px solid rgba(22,32,43,.28);box-shadow:0 55px 110px -64px rgba(22,32,43,.75);transform:translate(-50%,-50%) scale(calc(.72 + var(--open)*.28));opacity:var(--open);will-change:transform,opacity}
.moka-browser__bar{height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;border-bottom:1px solid rgba(22,32,43,.16);background:#f3eee3;color:#132235}
.moka-browser__mark{font-size:10px;font-weight:850;letter-spacing:.14em}
.moka-browser__url{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:#69727b}
.moka-browser__menu{justify-self:end;font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:#69727b}
.moka-browser__viewport{height:calc(100% - 44px);overflow:hidden;background:#f2ebdf;position:relative}
.moka-page{position:relative;will-change:transform;background:#f2ebdf;color:#12243a}
.moka-media,.moka-media img,.moka-page__hero-image,.moka-page__hero-image img{display:block;width:100%;height:100%}.moka-media img,.moka-page__hero-image img{object-fit:cover}

.moka-page__hero{position:relative;height:calc(min(790px,78svh) - 44px);min-height:520px;overflow:hidden;background:#13243a;color:#f7f0e4}
.moka-page__hero-image{position:absolute;inset:0}.moka-page__hero-image img{filter:saturate(.95) contrast(1.02);transform:scale(1.025)}
.moka-page__hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,31,50,.84) 0%,rgba(14,31,50,.54) 39%,rgba(14,31,50,.03) 70%)}
.moka-page__hero-copy{position:absolute;left:clamp(28px,6vw,84px);bottom:clamp(32px,7vh,92px);max-width:620px;z-index:2}
.moka-page__hero-copy p,.moka-page__gallery-copy p,.moka-page__useful-copy>p{margin:0 0 13px;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:#e8612e}
.moka-page__hero-copy h3{margin:0;max-width:12ch;font-family:var(--serif);font-size:clamp(36px,5vw,74px);font-weight:550;line-height:.91;letter-spacing:-.05em}
.moka-page__hero-copy>span{display:inline-flex;gap:14px;align-items:center;margin-top:24px;padding-bottom:5px;border-bottom:1px solid rgba(247,240,228,.62);font-size:12px;font-weight:700}
.moka-page__hero-copy>span b{color:#e8612e;font-weight:500}
.moka-page__hero-side{position:absolute;right:20px;top:20px;display:flex;flex-direction:column;align-items:flex-end;line-height:.83;mix-blend-mode:screen}.moka-page__hero-side span{font-size:clamp(11px,1vw,15px);letter-spacing:.35em}.moka-page__hero-side strong{font-size:clamp(42px,7vw,100px);letter-spacing:-.06em}

.moka-page__statement{min-height:520px;padding:clamp(70px,9vw,130px) clamp(34px,8vw,110px);display:flex;flex-direction:column;justify-content:space-between;background:#f2ebdf}
.moka-page__statement p{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#e8612e}
.moka-page__statement h3{align-self:flex-end;max-width:850px;margin:90px 0 0;font-family:var(--serif);font-size:clamp(42px,6vw,92px);font-weight:500;line-height:.93;letter-spacing:-.052em;text-align:right}

.moka-page__gallery{display:grid;grid-template-columns:1.3fr .7fr;grid-template-rows:auto auto auto;gap:12px;padding:12px;background:#13243a;color:#f7f0e4}
.moka-page__gallery-main{grid-column:1/2;grid-row:1/3;height:620px}.moka-page__gallery-copy{grid-column:2;grid-row:1;padding:clamp(28px,4vw,58px);display:flex;flex-direction:column;justify-content:flex-end;background:#f2ebdf;color:#13243a}.moka-page__gallery-copy h3{margin:0;font-family:var(--serif);font-size:clamp(28px,3.6vw,52px);font-weight:520;line-height:.95;letter-spacing:-.045em}.moka-page__gallery-small{height:300px}.moka-page__gallery-small--coffee{grid-column:2;grid-row:2}.moka-page__gallery-small--action{grid-column:1;grid-row:3;height:360px}.moka-page__material{grid-column:2;grid-row:3;height:360px}

.moka-page__useful{display:grid;grid-template-columns:1fr 1fr;min-height:850px;background:#efe6d7}.moka-page__useful-copy{grid-column:1/2;grid-row:1/3;padding:clamp(55px,7vw,100px);display:flex;flex-direction:column;justify-content:center}.moka-page__useful-copy h3{margin:0;max-width:9.5ch;font-family:var(--serif);font-size:clamp(42px,5.5vw,78px);font-weight:520;line-height:.92;letter-spacing:-.05em}.moka-page__facts{margin-top:70px;border-top:1px solid rgba(19,36,58,.22)}.moka-page__facts span{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid rgba(19,36,58,.22);font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase}.moka-page__facts strong{font-size:10px}.moka-page__pastries{grid-column:2;grid-row:1;height:425px}.moka-page__menu-photo{grid-column:2;grid-row:2;height:425px}
.moka-page__owned{min-height:640px;padding:clamp(60px,8vw,120px);display:flex;flex-direction:column;justify-content:space-between;background:#13243a;color:#f7f0e4}.moka-page__owned p{margin:0;font-family:var(--mono);font-size:clamp(13px,1.6vw,20px);letter-spacing:.05em;color:#e8612e}.moka-page__owned h3{margin:0;max-width:10ch;font-family:var(--serif);font-size:clamp(48px,7vw,104px);font-weight:500;line-height:.88;letter-spacing:-.055em}.moka-page__owned span{font-family:var(--mono);font-size:9px;letter-spacing:.2em}

.moka-story__endcard{position:absolute;left:50%;bottom:clamp(16px,2.6vh,30px);z-index:6;width:min(1180px,88vw);padding:14px clamp(16px,2.2vw,26px);background:rgba(237,233,226,.95);border-top:1px solid rgba(22,32,43,.14);box-shadow:0 18px 40px -28px rgba(22,32,43,.7);transform:translate(-50%,28px);opacity:0;display:flex;justify-content:space-between;align-items:baseline;gap:20px;pointer-events:none}.moka-story__endcard span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--coral)}.moka-story__endcard p{margin:0;max-width:650px;text-align:right;font-family:var(--serif);font-weight:600;color:var(--ink);font-size:clamp(17px,1.6vw,22px)}

/* Selected work: deliberately different compositions instead of 3 repeated rows */
#selected-work .proj{position:relative;overflow:visible;--proj-shift:0px}
#selected-work .proj .proj__shot-wrap picture{display:block;transform:translate3d(0,var(--proj-shift),0);will-change:transform}
#selected-work .proj--lead{grid-template-columns:minmax(260px,.68fr) minmax(0,1.32fr);padding:clamp(48px,6vw,88px) 0}
#selected-work .proj--lead .proj__shot-wrap{padding:0 0 0 clamp(8px,2vw,28px)}
#selected-work .proj--lead .proj__shot{transform:rotate(.25deg)}
#selected-work .proj--dark{grid-template-columns:minmax(0,1.28fr) minmax(260px,.72fr);padding:clamp(70px,8vw,120px) 0;color:var(--cream);border-color:rgba(237,233,226,.16);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
#selected-work .proj--dark .proj__shot-wrap{order:1!important;padding:0 clamp(12px,2.4vw,34px) 0 0}
#selected-work .proj--dark>div:not(.proj__shot-wrap){order:2!important}
#selected-work .proj--dark .h2{color:var(--cream)}#selected-work .proj--dark .body-serif{color:rgba(237,233,226,.74)}#selected-work .proj--dark .proj__num{color:rgba(237,233,226,.14)}#selected-work .proj--dark .link--plain{color:rgba(237,233,226,.62);border-color:rgba(237,233,226,.22)}#selected-work .proj--dark .link:hover,#selected-work .proj--dark .link--plain:hover{color:var(--cream);border-color:var(--cream)}
#selected-work .proj--dark .proj__shot{border-color:rgba(237,233,226,.18);box-shadow:0 42px 82px -40px rgba(0,0,0,.85)}
#selected-work .proj--wide{display:block;padding:clamp(66px,8vw,118px) 0}.proj--wide>div:first-child{max-width:680px}.proj--wide .proj__shot-wrap{margin-top:clamp(34px,5vw,64px);padding:0}.proj--wide .proj__shot{width:100%;max-height:none}

@media (max-width:900px){
  .moka-story__intro{min-height:62svh}.moka-story__track{height:480svh}.moka-story__canvas{inset:122px 12px 28px 42px}.moka-story__phase{left:43px;top:103px}.moka-story__rail{left:17px;top:138px}.moka-browser{width:calc(100vw - 58px);height:75svh}.moka-browser__menu{display:none}.moka-browser__bar{grid-template-columns:1fr auto}.moka-browser__url{justify-self:end}.moka-page__hero{height:calc(75svh - 44px);min-height:470px}.moka-page__hero-copy{left:26px;right:26px;bottom:34px}.moka-page__hero-shade{background:linear-gradient(0deg,rgba(14,31,50,.86) 0%,rgba(14,31,50,.36) 55%,rgba(14,31,50,.03) 100%)}.moka-page__hero-side{display:none}.moka-page__statement{min-height:440px}.moka-page__statement h3{text-align:left;align-self:flex-start;margin-top:58px}.moka-page__gallery{grid-template-columns:1fr 1fr}.moka-page__gallery-main{grid-column:1/-1;grid-row:1;height:400px}.moka-page__gallery-copy{grid-column:1/-1;grid-row:2}.moka-page__gallery-small--coffee{grid-column:1;grid-row:3;height:230px}.moka-page__gallery-small--action{grid-column:2;grid-row:3;height:230px}.moka-page__material{grid-column:1/-1;grid-row:4;height:230px}.moka-page__useful{grid-template-columns:1fr}.moka-page__useful-copy{grid-column:1;grid-row:1;min-height:520px}.moka-page__pastries{grid-column:1;grid-row:2;height:300px}.moka-page__menu-photo{grid-column:1;grid-row:3;height:300px}.moka-page__owned{min-height:520px}.moka-story__endcard{width:calc(100vw - 58px);left:calc(50% + 15px)}
  #selected-work .proj--lead,#selected-work .proj--dark{grid-template-columns:1fr;gap:28px}.proj--dark .proj__shot-wrap{order:2!important;padding:0!important}.proj--dark>div:not(.proj__shot-wrap){order:1!important}.proj--wide>div:first-child{max-width:none}
}
@media (max-width:580px){
  .moka-story__title{font-size:clamp(42px,14vw,70px)}.moka-story__intro{padding-top:80px;padding-bottom:72px}.moka-story__track{height:500svh}.moka-source{min-width:154px;max-width:210px;padding:11px 13px}.moka-source--instagram,.moka-source--address{min-width:180px;padding:13px 14px}.moka-source b{font-size:13px}.moka-source--instagram b,.moka-source--address b{font-size:15px}.moka-source span{font-size:8px}.moka-browser{height:72svh}.moka-page__hero{height:calc(72svh - 44px)}.moka-browser__mark{font-size:8.5px}.moka-browser__url{font-size:8px}.moka-page__hero-copy h3{font-size:clamp(35px,11vw,54px)}.moka-page__statement,.moka-page__useful-copy,.moka-page__owned{padding:42px 24px}.moka-page__gallery-copy{padding:32px 24px}.moka-page__facts{margin-top:44px}.moka-page__facts span{display:block}.moka-page__facts strong{display:block;margin-top:7px}.moka-story__endcard{display:block}.moka-story__endcard p{text-align:left;margin-top:6px;font-size:15.5px}.moka-story__phase-name{max-width:150px}.moka-page__owned h3{font-size:clamp(44px,13vw,68px)}
}
@media (prefers-reduced-motion:reduce){.moka-story__scrollcue i:after{animation:none}.moka-source,.moka-browser,.moka-story__endcard{will-change:auto}}

/* ---- progressive-enhancement / reduced-motion fallback -------------------
   Without JavaScript there is no scroll-position math to drive the story,
   so the tall pinned track would otherwise show an empty area with photo
   fragments overlapping at dead centre and an invisible (opacity:0) browser
   mockup. Instead, both "no JS" and "reduced motion" get the same fallback:
   the whole finished Atelier Moka mini-site unfolds as an ordinary static
   section, fully visible, in normal document flow — no scroll requirement,
   no motion, nothing hidden. `!important` is needed because moka-lab.js
   also writes some of these same properties as inline styles. */
html:not(.js) .moka-story__scrollcue{display:none}
html:not(.js) .moka-story__track{height:auto !important}
html:not(.js) .moka-story__sticky{position:static !important;height:auto !important;overflow:visible !important}
html:not(.js) .moka-story__rail,
html:not(.js) .moka-story__phase{display:none !important}
html:not(.js) .moka-story__canvas{position:static !important;inset:auto !important;padding:clamp(20px,4vw,40px) 0}
html:not(.js) .moka-source-cloud{display:none !important}
html:not(.js) .moka-browser{position:static !important;inset:auto !important;left:auto !important;top:auto !important;width:100% !important;height:auto !important;max-width:1100px;margin:0 auto;opacity:1 !important;transform:none !important}
html:not(.js) .moka-browser__viewport{height:auto !important;overflow:visible !important}
html:not(.js) .moka-page{transform:none !important}
html:not(.js) .moka-page__hero{height:auto !important;min-height:60vh}
html:not(.js) .moka-story__endcard{position:static !important;transform:none !important;opacity:1 !important;width:100%;max-width:1100px;margin:24px auto 0;padding:0 clamp(18px,4vw,40px) clamp(40px,6vw,64px)}

/* Same fallback for prefers-reduced-motion, even when JS did run — the
   JS's own reduce-branch sets some inline styles first, so !important here
   still needs to win over those. */
@media (prefers-reduced-motion: reduce){
  .moka-story__scrollcue{display:none}
  .moka-story__track{height:auto !important}
  .moka-story__sticky{position:static !important;height:auto !important;overflow:visible !important}
  .moka-story__rail,.moka-story__phase{display:none !important}
  .moka-story__canvas{position:static !important;inset:auto !important;padding:clamp(20px,4vw,40px) 0}
  .moka-source-cloud{display:none !important}
  .moka-browser{position:static !important;inset:auto !important;left:auto !important;top:auto !important;width:100% !important;height:auto !important;max-width:1100px;margin:0 auto;opacity:1 !important;transform:none !important}
  .moka-browser__viewport{height:auto !important;overflow:visible !important}
  .moka-page{transform:none !important}
  .moka-page__hero{height:auto !important;min-height:60vh}
  .moka-story__endcard{position:static !important;transform:none !important;opacity:1 !important;width:100%;max-width:1100px;margin:24px auto 0;padding:0 clamp(18px,4vw,40px) clamp(40px,6vw,64px)}
}
