/* ZEHA Construction Animation — scoped storefront styles */
.zeha-construction, .zeha-construction * { box-sizing: border-box; }
.zeha-construction { position: relative; width: 100%; background:#f4f4f1; overflow-x: clip; }
.zeha-construction .explosion-section { position:relative; height:250vh; }
.zeha-construction .stage { position:relative; width:100%; overflow:visible; background:#f4f4f1; }
.zeha-construction .artboard { position:absolute; left:50%; top:50%; aspect-ratio:620/1550; transform:translate(-50%,-50%); overflow:visible; }
.zeha-construction .layer { position:absolute; left:0; top:0; width:100%; height:auto; max-width:none; display:block; border:0; outline:0; pointer-events:none; user-select:none; transform-origin:0 0; will-change:transform,opacity; }
.zeha-construction .callouts { position:absolute; inset:0; z-index:auto; pointer-events:none; }
.zeha-construction .callout-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:5; }
.zeha-construction .callout-line { stroke:#222; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:0; }
.zeha-construction .callout-label { position:absolute; left:0; top:0; font-family:"Open Sans",Arial,Helvetica,sans-serif; line-height:1.25; color:#222; pointer-events:none; opacity:0; transform-origin:0 0; will-change:transform,opacity; white-space:pre-line; }
.zeha-construction .callout-label.light { font-weight:300; }
.zeha-construction .callout-label.semibold { font-weight:600; }

/* BARRE */
.zeha-construction--barre .stage { height:120vh; }
.zeha-construction--barre .artboard { width:min(62vw,900px,calc(145vh * 620 / 1550)); }
.zeha-construction--barre .shoe-with-sole{z-index:90}.zeha-construction--barre .shoe-without-sole{z-index:80}.zeha-construction--barre .insole-leather{z-index:70}.zeha-construction--barre .insole-foam{z-index:60}.zeha-construction--barre .lasting-insole-top{z-index:50}.zeha-construction--barre .steel-shank{z-index:40}.zeha-construction--barre .lasting-insole-bottom{z-index:30}.zeha-construction--barre .leather-outsole{z-index:20}.zeha-construction--barre .rubber-outsole{z-index:10}

/* STROBEL */
.zeha-construction--strobel .stage { height:100vh; }
.zeha-construction--strobel .artboard { width:min(62vw,900px,calc(179vh * 620 / 1550)); }
.zeha-construction--strobel .shoe-with-sole{z-index:80}.zeha-construction--strobel .shoe-without-sole{z-index:70}.zeha-construction--strobel .insole-leather{z-index:50}.zeha-construction--strobel .insole-foam{z-index:40}.zeha-construction--strobel .strobel{z-index:35}.zeha-construction--strobel .isolation{z-index:20}.zeha-construction--strobel .cupsole{z-index:10}

/* LIGHTWEIGHT */
.zeha-construction--lightweight .stage { height:120vh; }
.zeha-construction--lightweight .artboard { width:min(62vw,900px,calc(170vh * 620 / 1550)); }
.zeha-construction--lightweight .shoe-with-sole{z-index:80}.zeha-construction--lightweight .shoe-without-sole{z-index:70}.zeha-construction--lightweight .insole-leather{z-index:50}.zeha-construction--lightweight .insole-foam{z-index:40}.zeha-construction--lightweight .eva-wedge{z-index:35}.zeha-construction--lightweight .eva-sole{z-index:20}.zeha-construction--lightweight .tpu-sole{z-index:10}

@media (min-width:769px) and (max-width:1100px){
 .zeha-construction .explosion-section{height:430vh}
 .zeha-construction .artboard{top:50%;width:min(68vw,680px,calc(145vh * 620 / 1550))}
}
@media (max-width:768px){
 .zeha-construction .explosion-section{height:500vh}
 .zeha-construction .artboard{width:min(84vw,calc(150vh * 620 / 1550))}
 .zeha-construction--barre .artboard,.zeha-construction--lightweight .artboard{top:50%}
 .zeha-construction--strobel .artboard{top:40%}
}
@media (max-width:480px){
 .zeha-construction .explosion-section{height:540vh}
 .zeha-construction .artboard{width:min(92vw,calc(130vh * 620 / 1550))}
}