/* ===== DIORAMA — animated build sequence (sotto la hero) ===== */
.dio *{transform-box:fill-box}
.dio .ground-dash{stroke-dasharray:6 10;animation:dioScan 6s linear infinite}
@keyframes dioScan{to{stroke-dashoffset:-160}}
.dio .exc-arm{transform-origin:8px 8px;animation:excArm 4.2s var(--ease) infinite}
@keyframes excArm{0%,100%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}55%{transform:rotate(3deg)}}
.dio .exc-bucket{transform-origin:6px 4px;animation:excBuck 4.2s var(--ease) infinite}
@keyframes excBuck{0%,100%{transform:rotate(0deg)}28%{transform:rotate(-30deg)}52%{transform:rotate(22deg)}}
.dio .exc-cab{transform-origin:center;animation:excBob 4.2s var(--ease) infinite}
@keyframes excBob{0%,100%{transform:translateY(0)}30%{transform:translateY(-1.5px)}}
.dio .dust{opacity:0;animation:dust 4.2s ease-out infinite}
@keyframes dust{0%,25%{opacity:0;transform:translateY(0) scale(.4)}40%{opacity:.6}70%{opacity:0;transform:translateY(-22px) scale(1.6)}}
.dio .floor{transform-origin:center bottom;transform:scaleY(0);opacity:0;animation:rise 13s var(--ease) infinite}
.dio .floor.f1{animation-delay:.4s}.dio .floor.f2{animation-delay:1.4s}.dio .floor.f3{animation-delay:2.4s}.dio .floor.f4{animation-delay:3.4s}.dio .floor.f5{animation-delay:4.4s}
@keyframes rise{0%{transform:scaleY(0);opacity:0}5%{opacity:1}8%,86%{transform:scaleY(1);opacity:1}95%,100%{transform:scaleY(1);opacity:0}}
.dio .crane-load{animation:loadMove 13s var(--ease) infinite}
@keyframes loadMove{0%,100%{transform:translate(0,0)}20%{transform:translate(-150px,40px)}38%{transform:translate(-150px,8px)}55%{transform:translate(0,8px)}}
.dio .crane{transform-origin:center bottom;animation:craneSway 7s ease-in-out infinite}
@keyframes craneSway{0%,100%{transform:rotate(-.9deg)}50%{transform:rotate(.9deg)}}
.dio .hook{animation:hookBob 7s ease-in-out infinite}
@keyframes hookBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.dio .truck{animation:truckDrive 11s linear infinite}
@keyframes truckDrive{0%{transform:translateX(-260px)}45%,100%{transform:translateX(1320px)}}
.dio .wheel{transform-origin:center;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .dio .exc-arm,.dio .exc-bucket,.dio .exc-cab,.dio .dust,.dio .floor,.dio .crane-load,.dio .crane,.dio .hook,.dio .truck,.dio .wheel,.dio .ground-dash{animation:none}
  .dio .floor{transform:scaleY(1);opacity:1}
}

/* ===== HERO — live cantiere video sequence ===== */
.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0E0F11}
.hero-video video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s ease;will-change:opacity;
}
.hero-video video.show{opacity:1}
.hero-video::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(14,15,17,.62) 0%,rgba(14,15,17,.30) 34%,rgba(14,15,17,.74) 74%,var(--anthracite) 100%),
    linear-gradient(90deg,rgba(14,15,17,.65) 0%,transparent 58%);
}

/* phase rail (chronological storytelling) */
.phase-rail{position:relative;z-index:3;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,15,17,0),rgba(14,15,17,.5))}
.phase-rail .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.phase{display:flex;gap:14px;align-items:flex-start;padding:18px 28px 20px 0;position:relative;opacity:.42;transition:opacity .5s var(--ease)}
.phase + .phase{padding-left:28px;border-left:1px solid var(--line)}
.phase.on{opacity:1}
.phase .pn{font-family:var(--font-display);font-size:26px;color:var(--orange);line-height:1}
.phase .pt b{display:block;font-size:14.5px;font-weight:700;letter-spacing:.01em}
.phase .pt span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog-dim)}
.phase .bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--orange);transition:width .4s linear}
.phase.on .bar{width:100%}
@media(max-width:760px){.phase-rail .wrap{grid-template-columns:1fr}.phase,.phase+.phase{border-left:none;padding:12px 0}.phase .bar{display:none}}

/* logo entrance */
@keyframes logoIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes emblemDraw{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
.logo-anim .emblem{animation:emblemDraw .7s var(--ease-out) both}
.logo-anim .wm b{animation:logoIn .6s var(--ease-out) .18s both}
.logo-anim .wm small{animation:logoIn .6s var(--ease-out) .3s both}
@media (prefers-reduced-motion:reduce){
  .hero-video video{transition:none}
  .logo-anim .emblem,.logo-anim .wm b,.logo-anim .wm small{animation:none}
}