/* Hero-animatie "van fabriek tot schap" (12-10-2026). Hoort bij resources/views/partials/brand/hero_motion.blade.php
   en public/mps/brand/hero-motion.js. De laag ligt over de hero-foto en verschijnt pas als het script draait
   (.is-ready); zonder script of met "minder beweging" blijft alleen de foto staan. */
.mps-hm{position:absolute;inset:0;z-index:1;display:none;container-type:inline-size;--hm-paper:#fdfcf9;--hm-nav:2.75rem}
.mps-hm.is-ready{display:block}

/* papier met de drie getekende scènes; in scène 4 schuift het weg en staat de foto er */
.mps-hm-paper{position:absolute;inset:0;background:var(--hm-paper);box-shadow:inset 0 0 0 1px hsl(var(--border));clip-path:inset(0 0 0 0);transition:clip-path .95s cubic-bezier(.7,0,.2,1)}
.mps-hm[data-scene="4"] .mps-hm-paper{clip-path:inset(0 0 100% 0)}
.mps-hm-scene{position:absolute;inset:0 0 var(--hm-nav) 0;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
.mps-hm-scene.is-on{opacity:1;visibility:visible;transition:opacity .4s ease .1s}
.mps-hm-canvas{position:absolute;left:0;right:0;top:12%;aspect-ratio:5/4;overflow:hidden}
.hm-el{position:absolute}
.hm-el .mps-sketch{width:100%;height:auto}

/* tekenen: de streeplengte erft door tot in het icoon (<use>) */
.hm-draw{--len:560;stroke-dasharray:var(--len);stroke-dashoffset:0}
.mps-hm-scene.is-on .hm-draw{animation:hm-draw 1.5s .25s cubic-bezier(.45,.05,.3,1) both}
@keyframes hm-draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.hm-ink{position:absolute;overflow:visible;fill:none;stroke:var(--mps-pen);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hm-ink path{stroke-dasharray:1;stroke-dashoffset:1}

/* bijschrift in handschrift, schrijft zich van links naar rechts */
.hm-cap{position:absolute;left:7%;right:7%;bottom:6%;margin:0;font-size:1.6rem;font-size:clamp(1.15rem,6cqw,2.1rem);line-height:1.15;text-wrap:balance}
.hm-cap span{display:inline-block;clip-path:inset(-20% 100% -20% 0)}
.mps-hm-scene.is-on .hm-cap span{animation:hm-write 1s .55s cubic-bezier(.4,0,.3,1) both}
@keyframes hm-write{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -3% -20% 0)}}

/* scène 1: de fabriek tekent zich, dozen komen naar buiten */
.hm-fab{left:8%;top:14%;width:70%}
.hm-fab .hm-draw{--len:520}
.hm-box,.hm-drop{width:17%;opacity:0}
.hm-box .mps-sketch,.hm-drop .mps-sketch{stroke-width:5}
.hm-box{left:54%;top:59%}
.mps-hm-scene.is-on .hm-box-a{animation:hm-boxout 1.7s 1.55s cubic-bezier(.5,0,.5,1) both}
.mps-hm-scene.is-on .hm-box-b{animation:hm-boxout 1.7s 2.3s cubic-bezier(.5,0,.5,1) both}
@keyframes hm-boxout{0%{opacity:0;transform:translate(0,14%) scale(.35)}16%{opacity:1;transform:translate(0,0) scale(1)}30%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:1;transform:translate(290%,0) scale(1)}}

/* scène 2: het schip vaart van links naar rechts over de getekende zee */
.hm-sea{left:0;top:63%;width:100%;height:6%}
.mps-hm-scene.is-on .hm-sea path{animation:hm-ink 1.6s .15s ease-out both}
@keyframes hm-ink{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.hm-ship{left:20%;top:17%;width:60%;transform:translateX(-140%)}
.mps-hm-scene.is-on .hm-ship{animation:hm-sail 4s .1s cubic-bezier(.3,.2,.6,.8) both}
@keyframes hm-sail{from{transform:translateX(-140%)}to{transform:translateX(140%)}}
.hm-bob{transform-origin:50% 90%;animation:hm-bob 1.5s ease-in-out infinite alternate}
@keyframes hm-bob{from{transform:rotate(-1.3deg) translateY(1.2%)}to{transform:rotate(1.3deg) translateY(-1.2%)}}

/* scène 3: het magazijn tekent zich, de dozen vallen op hun plek */
.hm-dc{left:5%;top:13%;width:62%}
.hm-dc .hm-draw{--len:440}
.hm-drop-a{left:66%;top:56.5%}
.hm-drop-b{left:82%;top:56.5%}
.hm-drop-c{left:74%;top:41%}
.mps-hm-scene.is-on .hm-drop-a{animation:hm-drop .7s 1.15s cubic-bezier(.3,.6,.3,1) both}
.mps-hm-scene.is-on .hm-drop-b{animation:hm-drop .7s 1.5s cubic-bezier(.3,.6,.3,1) both}
.mps-hm-scene.is-on .hm-drop-c{animation:hm-drop .7s 1.9s cubic-bezier(.3,.6,.3,1) both}
@keyframes hm-drop{0%{opacity:0;transform:translateY(-320%)}55%{opacity:1;transform:translateY(0)}72%{transform:translateY(-9%)}100%{opacity:1;transform:translateY(0)}}
.hm-check{position:static;display:inline-block;width:.95em;height:.8em;margin-left:.35em;vertical-align:-.02em;stroke-width:5}
.mps-hm-scene.is-on .hm-check path{animation:hm-ink .45s 2.6s ease-out both}

/* scène 4: de foto, met een kaartje erbij */
.mps-hm-tag{position:absolute;left:5%;bottom:calc(var(--hm-nav) + 5%);display:flex;align-items:center;gap:.6rem;padding:.55rem 1rem .5rem .75rem;background:var(--hm-paper);border-radius:3px;box-shadow:0 14px 32px -18px rgba(20,30,45,.55);opacity:0;transform:rotate(-2deg) translateY(14px) scale(.96);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.mps-hm-tag .mps-sketch{width:2.6rem;height:auto;flex:none}
.mps-hm-tag .mps-hand{font-size:1.35rem;font-size:clamp(1.1rem,5.2cqw,1.75rem);line-height:1.1;white-space:nowrap}
.mps-hm[data-scene="4"] .mps-hm-tag{opacity:1;transform:rotate(-2deg) translateY(0) scale(1);transition:opacity .5s ease .75s,transform .6s cubic-bezier(.2,.9,.3,1.2) .75s}

/* stappen onderin: klikbaar, met voortgangsstreep, en een pauzeknop */
.mps-hm-nav{position:absolute;left:0;right:0;bottom:0;height:var(--hm-nav);display:flex;align-items:stretch;background:hsl(var(--background) / .95);border-top:1px solid hsl(var(--border))}
.mps-hm-nav button{position:relative;flex:1 1 0;min-width:0;padding:0 .25rem;border:0;background:none;cursor:pointer;font:inherit;font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.16em;color:hsl(var(--muted-foreground));transition:color .2s}
.mps-hm-nav button span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mps-hm-nav button:hover,.mps-hm-nav button.is-on,.mps-hm-nav button.is-done{color:hsl(var(--foreground))}
.mps-hm-nav button:focus-visible{outline:2px solid var(--mps-pen);outline-offset:-3px}
.mps-hm-nav button i{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--mps-pen);transform:scaleX(0);transform-origin:0 50%}
.mps-hm-nav button.is-done i{transform:scaleX(1)}
.mps-hm-nav button.is-on i{animation:hm-prog var(--hm-dur,4s) linear both}
@keyframes hm-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mps-hm-nav .mps-hm-toggle{flex:0 0 var(--hm-nav);border-left:1px solid hsl(var(--border));display:flex;align-items:center;justify-content:center}
.mps-hm-toggle svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mps-hm-toggle .hm-i-play{display:none;fill:currentColor;stroke-width:1.5}
.mps-hm.is-paused .mps-hm-toggle .hm-i-play{display:block}
.mps-hm.is-paused .mps-hm-toggle .hm-i-pause{display:none}

/* pauze: alles blijft staan waar het was */
.mps-hm.is-paused .mps-hm-scene *,.mps-hm.is-paused .mps-hm-nav i{animation-play-state:paused}

@media (max-width:420px){.mps-hm-nav button{letter-spacing:.1em;font-size:9.5px}}
@media (prefers-reduced-motion:reduce){.mps-hm{display:none!important}}