.way{padding:0 0 40px;position:relative}
.way .wrap{position:relative}
.path{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%;width:120px;pointer-events:none}
.path svg{width:100%;height:100%;display:block;overflow:visible}
.path .bg{stroke:rgba(234,240,236,.18);stroke-width:1.5;fill:none;stroke-dasharray:6 8}
.path .ink{stroke:var(--lemon);stroke-width:3;fill:none;stroke-linecap:round}
.stations{display:grid;gap:clamp(80px,14vh,150px);position:relative}
.station{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;gap:0}
.station>*{grid-row:1}
.station .scene{width:100%;max-width:480px;position:relative;z-index:1}
.station:nth-child(odd) .scene{grid-column:3;justify-self:start}
.station:nth-child(even) .scene{grid-column:1;justify-self:end}
.station .card{background:rgba(10,46,51,.72);backdrop-filter:blur(2px);border:1px solid rgba(234,240,236,.22);padding:26px 28px;display:grid;gap:10px;max-width:480px}
.station:nth-child(odd) .card{grid-column:1;justify-self:end}
.station:nth-child(even) .card{grid-column:3;justify-self:start}
.station .dot{grid-column:2;justify-self:center;width:18px;height:18px;border-radius:50%;background:var(--petrol-900);border:2px solid var(--lemon);box-shadow:0 0 0 6px rgba(233,223,62,.12)}
.station .n{font-family:var(--f-m);font-size:11px;letter-spacing:.14em;color:var(--lemon)}
.station h3{margin:0;font-size:26px;letter-spacing:-.03em;line-height:1.05}
.station .w{font-family:var(--f-z);font-style:italic;font-size:15px;color:var(--chalk-2)}
.station p{margin:0;font-size:15px;color:var(--chalk-2)}
@media (max-width:820px){
  .path{left:28px;transform:none;width:40px}
  .station{grid-template-columns:40px 1fr}
  .station .dot{grid-column:1;grid-row:1}
  .station .card,.station:nth-child(odd) .card,.station:nth-child(even) .card{grid-column:2;justify-self:start;max-width:none}
  .station .scene,.station:nth-child(odd) .scene,.station:nth-child(even) .scene{grid-column:2;grid-row:2;justify-self:start;margin-top:18px}
  .stage3d.sm .tilt,.station:nth-child(even) .stage3d.sm .tilt,.tilt{width:100%;margin-left:0}
}
.stage3d{position:relative;perspective:1400px;perspective-origin:50% 30%;padding:34px 0 10px;overflow:visible}
.tilt{position:relative;width:min(700px,124%);aspect-ratio:560/400;margin:0 0 0 0;transform:rotateX(54deg) rotateZ(-14deg);transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.station .tilt{transform:translateY(70px) rotateX(72deg) rotateZ(-20deg);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.station.in .tilt{transform:rotateX(54deg) rotateZ(-14deg);opacity:1}
.station.in.active .tilt{transform:translateY(-12px) rotateX(40deg) rotateZ(-9deg) scale(1.02)}
.stage3d:hover .tilt,.station.in:hover .tilt{transform:translateY(-22px) rotateX(26deg) rotateZ(-4deg) scale(1.05)}
.station .card{transform:translateY(24px);opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1) .1s,opacity .5s ease .1s}
.station.in .card{transform:none;opacity:1}
.station .dot{transform:scale(.4);transition:transform .5s cubic-bezier(.2,.8,.2,1) .2s,box-shadow .5s ease}
.station.in .dot{transform:scale(1)}
.station.active .dot{box-shadow:0 0 0 10px rgba(233,223,62,.18)}
.stage3d.sm{padding:10px 0 6px}.stage3d.sm .tilt{width:min(546px,130%);margin-left:0}
.station:nth-child(even) .stage3d.sm .tilt{margin-left:-30%}
.stage3d.sm .tag3d{right:auto;left:0;bottom:16%}
.paper{position:absolute;left:3%;top:17%;width:80%;aspect-ratio:16/9;background:#EAF0EC;color:#0A2E33;box-shadow:24px 40px 60px -20px rgba(0,0,0,.65),0 2px 0 rgba(0,0,0,.2);overflow:hidden;transition:box-shadow .8s cubic-bezier(.2,.8,.2,1)}
.stage3d:hover .paper,.station:hover .paper{box-shadow:40px 90px 110px -30px rgba(0,0,0,.8),0 2px 0 rgba(0,0,0,.2)}
.paper svg{width:100%;height:100%;display:block}
.paper img{width:100%;height:100%;object-fit:cover;display:block}
.caliper{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;transform:translateZ(6px)}
.caliper svg{width:100%;height:100%;display:block;overflow:visible}
.tag3d{position:absolute;right:0;bottom:-6px;font-family:var(--f-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-2)}
@media (prefers-reduced-motion:reduce){.tilt,.paper,.station .card,.station .dot{transition:none}.station .tilt,.station.in.active .tilt,.stage3d:hover .tilt,.station.in:hover .tilt{transform:rotateX(54deg) rotateZ(-14deg);opacity:1}.station .card{transform:none;opacity:1}}