/* ============================================================
   DIORAMA — ciclo di cantiere (sotto la hero)
   ============================================================ */
.diorama-wrap{position:relative;background:linear-gradient(180deg,#0E0F11 0%,#121519 55%,#0E0F11 100%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:visible;clip-path:inset(0)}
.diorama-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 130% at 50% 130%,rgba(255,106,26,.10),transparent 62%)}
.diorama-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:clamp(26px,3.5vw,44px) 0 14px;position:relative;z-index:2}
.diorama-steps{display:flex;gap:20px;flex-wrap:wrap}
.diorama-steps b{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog-dim);font-weight:400;display:flex;gap:7px;align-items:center}
.diorama-steps b::before{content:attr(data-n);color:var(--orange);font-weight:700}
.diorama-steps b.on{color:var(--white)}
.diorama{display:block;width:100%;height:clamp(240px,30vw,380px);position:relative;z-index:1}
/* when JS scroll-drives the scene, silence the looping keyframes it controls */
.dio.scrolling .truck,.dio.scrolling .floor,.dio.scrolling .exc-arm,.dio.scrolling .exc-bucket{animation:none}

/* ---- 3D scene depth (live tilt driven from fx.js) ---- */
.diorama-wrap{perspective:1500px;perspective-origin:50% 74%}
.dio{transform-origin:50% 92%;will-change:transform;backface-visibility:hidden;transform:scale(1.06)}
.dio .truck,.dio .crane,.dio .crane-load,.dio .exc-cab,.dio .exc-arm{filter:drop-shadow(0 9px 11px rgba(0,0,0,.55))}
.dio .floor{filter:drop-shadow(0 6px 9px rgba(0,0,0,.5))}
@media (prefers-reduced-motion:reduce){.dio{transform:none}}

@media(max-width:560px){.diorama-steps{display:none}}