
.emt-tour{
  --ink:#0a2d61;
  --paper:#fde8e5;
  position:relative;
  width:100vw;
  max-width:none;
  margin-left:calc(50% - 50vw);
  background:var(--paper);
  color:var(--ink);
  min-height:4250px;
  overflow:hidden;
  font-family:"Comic Sans MS","Bradley Hand",cursive;
}
.emt-intro{
  position:relative;height:900px;max-width:1180px;margin:auto;
  padding:36px 6vw 0;box-sizing:border-box;
}
.emt-brand{
  position:absolute;left:5vw;top:28px;transform:rotate(-3deg);
  line-height:1.05;color:#111;z-index:2
}
.emt-brand strong{display:block;font-size:24px}
.emt-brand span{display:block;font-size:16px}
.emt-intro h1{
  position:relative;z-index:2;margin:120px auto 0;width:max-content;max-width:70%;
  font-weight:400;font-size:clamp(48px,6.2vw,78px);line-height:.93;
  transform:rotate(-3deg);text-align:center;letter-spacing:-2px
}
.emt-intro h1:after{
  content:"";display:block;width:130px;border-bottom:4px solid var(--ink);
  margin:16px auto 0;transform:rotate(-7deg)
}
.emt-bubble{
  position:absolute;z-index:3;right:8%;top:520px;border:2.5px solid #152e38;
  border-radius:50%;padding:25px 36px;background:var(--paper);
  font-size:clamp(18px,2.2vw,28px);line-height:1.2;transform:rotate(-3deg);text-align:center
}
.emt-bubble:after{
  content:"";position:absolute;left:-22px;bottom:18px;width:38px;height:22px;
  background:var(--paper);border-left:2.5px solid #152e38;border-bottom:2.5px solid #152e38;
  transform:skew(-35deg) rotate(-18deg)
}
.emt-brush{position:absolute;width:230px;height:25px;border-radius:50%;opacity:.95}
.emt-green{left:-45px;top:390px;background:#18b878;transform:rotate(8deg)}
.emt-orange{left:-50px;top:585px;background:#ff8a4c;transform:rotate(15deg)}
.emt-pink{right:-45px;top:300px;background:#e873df;transform:rotate(-7deg)}

.emt-route-wrap{position:absolute;left:0;right:0;top:790px;height:3320px}
.emt-route{width:100%;height:100%;overflow:visible}
.emt-route path{
  fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:12 16;vector-effect:non-scaling-stroke
}

.emt-zizi{
  position:absolute;left:0;top:0;width:145px;transform-origin:50% 90%;
  will-change:transform,opacity;pointer-events:none;z-index:12;
  transition:opacity .18s linear;
}
.emt-zizi img{display:block;width:100%;height:auto;background:transparent!important}
.emt-zizi.is-scene-blended{opacity:0}

.emt-colleagues{
  position:absolute;left:50%;top:1380px;width:min(1160px,94vw);
  transform:translateX(-50%);z-index:6;opacity:0;
  transition:opacity .35s ease;
}
.emt-colleagues.is-visible{opacity:1}
.emt-colleague-stage{
  position:relative;width:100%;aspect-ratio:1536/1024;
}
.emt-scene-base{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;pointer-events:none;
}

.emt-name{
  position:absolute;z-index:20;background:rgba(255,255,255,.86);
  border-radius:18px;padding:8px 18px;font-weight:700;
  font-size:clamp(20px,2.4vw,34px);
  box-shadow:0 3px 12px rgba(10,45,97,.06)
}
.emt-name-stekki{left:16%;top:15%}
.emt-name-nona{right:5%;top:23%}

/* Alleen een lichte, lopende glans op het bestaande gele doek.
   Hierdoor blijft de originele getekende band volledig zichtbaar. */
.emt-belt-motion{
  position:absolute;z-index:9;pointer-events:none;opacity:.34;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.85) 0 24px,
      rgba(255,255,255,0) 24px 56px
    );
  animation:emt-flow .8s linear infinite;
  mix-blend-mode:screen;
}
.emt-belt-motion-top{
  left:22.5%;top:50.2%;width:69%;height:3.4%;
  border-radius:999px;transform:rotate(.2deg);
}
.emt-belt-motion-lower{
  left:26%;top:58%;width:47%;height:5.2%;
  border-radius:50%;
  transform:rotate(1.5deg) skewX(-8deg);
  opacity:.22;
  animation-direction:reverse;
}
@keyframes emt-flow{
  to{background-position:112px 0}
}

/* De originele hamerkop in de basisafbeelding is weggepoetst.
   Deze losse kop beweegt boven het vaste handvat. */
.emt-hammer-head{
  position:absolute;z-index:18;right:8.5%;top:40.2%;width:7.2%;
  transform-origin:15% 70%;pointer-events:none;
  animation:emt-hammer 1.05s ease-in-out infinite;
}
@keyframes emt-hammer{
  0%,38%,100%{transform:rotate(-6deg) translateY(-2px)}
  58%{transform:rotate(17deg) translateY(8px)}
  72%{transform:rotate(2deg) translateY(1px)}
}

@media(max-width:700px){
  .emt-tour{min-height:4000px}
  .emt-intro{height:760px;padding-top:25px}
  .emt-brand{left:22px;top:20px}
  .emt-brand strong{font-size:18px}
  .emt-brand span{font-size:13px}
  .emt-intro h1{margin-top:100px;max-width:88%;font-size:45px;line-height:.95}
  .emt-bubble{top:430px;right:5%;padding:18px 22px;font-size:17px}
  .emt-route-wrap{top:675px;height:3150px}
  .emt-zizi{width:100px}
  .emt-brush{width:135px;height:18px}
  .emt-green{top:330px}.emt-orange{top:515px}.emt-pink{top:270px}
  .emt-colleagues{top:1260px;width:100vw}
  .emt-name{font-size:18px;padding:7px 12px}
  .emt-name-stekki{left:11%;top:14%}
  .emt-name-nona{right:2%;top:22%}
  .emt-hammer-head{right:6.5%;top:40.5%;width:8.5%}
}

@media(prefers-reduced-motion:reduce){
  .emt-belt-motion,.emt-hammer-head{animation:none!important}
}
