/* Section 02 "From design to form": a dieline is drawn, filled, folded into a box and branded. */
.transform-stage.dtf-on{display:block;position:relative;overflow:hidden;padding:0}
.dtf-stage{position:absolute;left:50%;top:50%;width:640px;height:440px;transform:translate(-50%,-50%) scale(var(--dtf-s,1));perspective:1500px;perspective-origin:50% 28%}
.dtf-world{position:absolute;width:170px;height:120px;left:235px;top:225px;transform-style:preserve-3d;transform-origin:50% 50%}
.dtf-grid{position:absolute;left:-615px;top:-640px;width:1400px;height:1400px;transform:translateZ(-2px);
  background-image:linear-gradient(rgba(120,170,215,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,215,.08) 1px,transparent 1px);
  background-size:40px 40px;background-position:15px 0;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 38%);mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 38%)}
.dtf-shadow{position:absolute;inset:-30px -40px -40px -30px;transform:translateZ(-1px);background:radial-gradient(ellipse at 45% 55%,rgba(0,0,0,.75),transparent 65%);filter:blur(10px);opacity:0}
.dtf-dieline{position:absolute;left:-120px;top:-240px;width:410px;height:470px;overflow:visible}
.dtf-cut{fill:none;stroke:#8fc2f0;stroke-width:1.6;stroke-linejoin:round}
.dtf-fold{fill:none;stroke:#8fc2f0;stroke-width:1.2;stroke-dasharray:6 5;opacity:0}
.dtf-dim{fill:#8fc2f0;font:600 11px system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;letter-spacing:.08em;opacity:0}
.dtf-f{position:absolute;transform-style:preserve-3d;opacity:0;background-color:#c79c69;
  background-image:repeating-linear-gradient(90deg,rgba(60,35,10,.05) 0 1px,transparent 1px 6px),linear-gradient(160deg,rgba(255,240,215,.1),rgba(0,0,0,.08));
  box-shadow:inset 0 0 0 1px rgba(70,40,12,.35)}
.dtf-bottom{left:0;top:0;width:170px;height:120px}
.dtf-front{left:0;top:120px;width:170px;height:110px;transform-origin:50% 0}
.dtf-back{left:0;top:-110px;width:170px;height:110px;transform-origin:50% 100%}
.dtf-lid{left:0;top:-120px;width:170px;height:120px;transform-origin:50% 100%;opacity:1}
.dtf-left{left:-110px;top:0;width:110px;height:120px;transform-origin:100% 50%}
.dtf-right{left:170px;top:0;width:110px;height:120px;transform-origin:0 50%}
.dtf-tape{position:absolute;left:72px;top:0;width:26px;height:100%;transform-origin:50% 100%;transform:scaleY(0);
  background:linear-gradient(90deg,rgba(150,110,62,.9),rgba(222,190,140,.95) 45%,rgba(160,120,70,.9))}
.dtf-print{position:absolute;inset:0;transform:rotateX(180deg) translateZ(.6px);-webkit-backface-visibility:hidden;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;color:#2b1b0d}
.dtf-print svg{width:50px;height:56px}
.dtf-print span{font:700 10px system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;letter-spacing:.22em;margin-top:4px}
/* the phase list under the stage follows the animation */
.phase-list li{transition:color .35s,border-color .35s}
.phase-list li.dtf-now{color:#fff;border-top-color:var(--blue)}