/* ============================================================
   CSS-3D folding carton — additive, namespaced .c3d-*
   Pairs with assets/carton3d.js. Design tokens only.
   Mobile-first, one desktop breakpoint at 760px.

   Structure: .c3d-p is a hinge — geometry and rotation only,
   preserve-3d, paints nothing. .c3d-fc is the printed face —
   flat, so panel, artwork and shading sort as one polygon.
   ============================================================ */

.c3d{
  /* fold progress, 0 = flat printed blank, 1 = assembled carton */
  --f:0;
  /* orbit, written by carton3d.js */
  --c3-rx:0deg; --c3-ry:0deg;
  /* geometry — one reverse tuck carton, 75 x 40 x 110 mm, drawn to scale */
  --c3-w:80px;    /* front / back panel width  (75 mm) */
  --c3-d:43px;    /* side panel depth          (40 mm) */
  --c3-h:118px;   /* panel height              (110 mm) */
  --c3-fl:30px;   /* dust flap depth           (28 mm) */
  --c3-tb:12px;   /* tuck tab depth            (11 mm) */
  --c3-g:14px;    /* glue flap width           (13 mm) */
  --c3-pad:30px;  /* press sheet margin, left and right */
  --c3-padv:42px; /* press sheet margin, top and bottom */
  --c3-tw:calc(var(--c3-w)*2 + var(--c3-d)*2 + var(--c3-g));
  /* the phone stage is sized by the flat blank, so the finished carton grows into it */
  --c3-sc:calc(1 + .32 * var(--f));
  display:grid;grid-template-columns:1fr;gap:18px;align-items:start;
}

/* ---------- stage ---------- */
.c3d-stage{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:4px;
  background:var(--blue);
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
  min-height:410px;touch-action:pan-y}
.c3d-scene{position:absolute;inset:0;perspective:1000px;perspective-origin:50% 46%;
  transform:scale(var(--c3-fit,1));transform-origin:50% 50%}
.c3d-orbit{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(calc(-15deg * var(--f) + var(--c3-rx)))
            rotateY(calc(-27deg * var(--f) + var(--c3-ry)));
  transition:transform .16s ease-out}

/* ---------- press sheet under the blank ---------- */
.c3d-sheet{position:absolute;left:0;top:0;width:calc(var(--c3-tw) + var(--c3-pad)*2);
  height:calc(var(--c3-h) + var(--c3-d)*2 + var(--c3-tb)*2 + var(--c3-padv)*2);
  transform:translate(-50%,-50%) translateZ(calc(-1px - 620px * var(--f)));
  background:var(--paper);border-radius:1px;
  box-shadow:0 12px 30px rgba(0,0,0,.42);
  opacity:calc(1 - var(--f) * 2.3)}
.c3d-strip{position:absolute;left:26px;bottom:6px;width:74px;height:4px}
.c3d-sheetk{position:absolute;right:28px;bottom:5px;color:var(--ink2);
  font-family:"IBM Plex Mono",monospace;font-size:6.5px;letter-spacing:.14em;text-transform:uppercase}
.c3d-reg{position:absolute;width:11px;height:11px;opacity:.5}
.c3d-reg::before,.c3d-reg::after{content:"";position:absolute;background:var(--ink2)}
.c3d-reg::before{left:5px;top:0;width:1px;height:11px}
.c3d-reg::after{left:0;top:5px;width:11px;height:1px}
.c3d-reg.tl{left:7px;top:7px}.c3d-reg.tr{right:7px;top:7px}
.c3d-reg.bl{left:7px;bottom:6px}.c3d-reg.br{right:7px;bottom:6px}

/* ---------- ground shadow, folded state only ---------- */
.c3d-shadow{position:absolute;left:0;top:0;width:calc(var(--c3-w) + 60px);
  height:calc(var(--c3-d) + 54px);
  transform:scale(var(--c3-sc)) translate(-50%,-50%)
            translateY(calc(var(--c3-h)/2 + 2px)) rotateX(90deg);
  background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,0));
  opacity:calc((var(--f) - .5) * 1.7)}

/* ---------- the blank ---------- */
.c3d-asm{position:absolute;left:0;top:0;transform-style:preserve-3d;
  transform:scale(var(--c3-sc)) translateX(calc(var(--c3-tw)/-2 * (1 - var(--f)) + var(--c3-w)/-2 * var(--f)))
            translateY(calc(var(--c3-h)/-2))
            translateZ(calc(var(--c3-d)/2 * var(--f)))}

/* hinge */
.c3d-p{position:absolute;transform-style:preserve-3d}
/* printed face */
.c3d-fc{position:absolute;inset:0;display:flex;overflow:hidden;color:#fff;
  background:linear-gradient(168deg,var(--blue),var(--blue-d));backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* shading — only as the carton takes shape */
.c3d-fc::after{content:"";position:absolute;inset:0;pointer-events:none;
  opacity:var(--f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.17)}
/* crease — the fold line, only while flat */
.c3d-fc::before{content:"";position:absolute;pointer-events:none;z-index:2;
  opacity:calc(1 - var(--f) * 2)}

.c3d-front{left:0;top:0;width:var(--c3-w);height:var(--c3-h)}
.c3d-front>.c3d-fc::after{background:linear-gradient(150deg,rgba(255,255,255,.21),rgba(255,255,255,.02) 62%)}

.c3d-sd{left:100%;top:0;width:var(--c3-d);height:100%;
  transform-origin:left center;transform:rotateY(calc(90deg * var(--f)))}
.c3d-sd>.c3d-fc::after{background:rgba(8,34,70,.46)}
.c3d-bk{left:100%;top:0;width:var(--c3-w);height:100%;
  transform-origin:left center;transform:rotateY(calc(90deg * var(--f)))}
.c3d-bk>.c3d-fc::after{background:rgba(8,34,70,.5)}
.c3d-gl{left:100%;top:0;width:var(--c3-g);height:100%;
  transform-origin:left center;
  transform:rotateY(calc(90deg * var(--f))) translateZ(calc(-1.4px * var(--f)))}
/* the glue flap is inside a made-up carton, so it retires as the box closes */
.c3d-gl>.c3d-fc{opacity:calc((1 - var(--f)) * 5)}
.c3d-gl>.c3d-fc::after{background:rgba(8,34,70,.72)}
/* vertical creases sit on the hinged edge */
.c3d-sd>.c3d-fc::before,.c3d-bk>.c3d-fc::before,.c3d-gl>.c3d-fc::before{
  left:0;top:0;bottom:0;width:0;border-left:1.4px dashed var(--sky)}

/* top-hinged flaps */
.c3d-ft{left:0;bottom:100%;width:100%;transform-origin:50% 100%;
  transform:rotateX(calc(90deg * var(--f)))}
/* bottom-hinged flaps */
.c3d-fb{left:0;top:100%;width:100%;transform-origin:50% 0;
  transform:rotateX(calc(-90deg * var(--f)))}
.c3d-ft>.c3d-fc::before{left:0;right:0;bottom:0;height:0;border-bottom:1.4px dashed var(--sky)}
.c3d-fb>.c3d-fc::before{left:0;right:0;top:0;height:0;border-top:1.4px dashed var(--sky)}

/* dust flaps on the side panels, chamfered outer corner */
.c3d-dust{height:var(--c3-fl)}
.c3d-dust>.c3d-fc::after{background:rgba(8,34,70,.52)}
.c3d-dust.c3d-ft{transform:rotateX(calc(90deg * var(--f))) translateZ(calc(-1.8px * var(--f)))}
.c3d-dust.c3d-fb{transform:rotateX(calc(-90deg * var(--f))) translateZ(calc(-1.8px * var(--f)))}
.c3d-dust.c3d-ft>.c3d-fc{clip-path:polygon(0 26%,26% 0,100% 0,100% 100%,0 100%)}
.c3d-dust.c3d-fb>.c3d-fc{clip-path:polygon(0 0,100% 0,100% 100%,26% 100%,0 74%)}

/* tuck ends — top on the back panel, bottom on the front. Reverse tuck. */
.c3d-tuck{height:var(--c3-d)}
.c3d-tuck.c3d-ft>.c3d-fc::after{background:rgba(255,255,255,.13)}
.c3d-tuck.c3d-fb>.c3d-fc::after{background:rgba(8,34,70,.88);box-shadow:none}
.c3d-tab{left:14%;width:72%;height:var(--c3-tb)}
.c3d-tab.c3d-ft{transform:rotateX(calc(82deg * var(--f)))}
.c3d-tab.c3d-fb{transform:rotateX(calc(-82deg * var(--f)))}
.c3d-tab>.c3d-fc{opacity:calc((1 - var(--f)) * 5);border-radius:0 0 3px 3px}
.c3d-tab.c3d-ft>.c3d-fc{border-radius:3px 3px 0 0}
.c3d-tab>.c3d-fc::after{background:rgba(8,34,70,.55)}

/* ---------- printed artwork ---------- */
.c3d-art{flex:1;min-width:0;padding:8px 7px;display:flex;flex-direction:column;
  justify-content:space-between}
.c3d-top{font-family:"IBM Plex Mono",monospace;font-size:6.5px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.62;line-height:1.4}
.c3d-crest{font-family:Georgia,serif;font-size:19px;line-height:1;font-weight:700;margin-top:7px}
.c3d-rule{width:23px;height:1.5px;background:var(--sky);margin-top:6px}
.c3d-bot{font-size:6.5px;line-height:1.55;opacity:.7;font-family:"IBM Plex Mono",monospace;
  letter-spacing:.05em}
.c3d-code{height:17px;margin:0 1px;border-radius:.5px;background:var(--paper);
  background-image:repeating-linear-gradient(90deg,var(--kk) 0 1px,transparent 1px 2px,
    var(--kk) 2px 3.5px,transparent 3.5px 6px,var(--kk) 6px 6.8px,transparent 6.8px 8px)}
.c3d-vt{margin:auto;writing-mode:vertical-rl;white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-size:6px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.66}
.c3d-lid{margin:auto;text-align:center;
  font-family:"IBM Plex Mono",monospace;font-size:6px;letter-spacing:.22em;
  text-transform:uppercase;opacity:.55}

/* ---------- flat-state annotation ---------- */
.c3d-annot{position:absolute;left:0;top:0;width:0;height:0;
  transform:translate(calc(var(--c3-tw)/-2),calc(var(--c3-h)/-2));
  opacity:calc(1 - var(--f) * 2.6)}
.c3d-dim{position:absolute;height:0;border-top:1px solid var(--sky-d)}
.c3d-dim::before,.c3d-dim::after{content:"";position:absolute;top:-4px;width:0;height:9px;
  border-left:1px solid var(--sky-d)}
.c3d-dim::before{left:0}.c3d-dim::after{right:0}
.c3d-dimv{position:absolute;width:0;border-left:1px solid var(--sky-d)}
.c3d-dimv::before,.c3d-dimv::after{content:"";position:absolute;left:-4px;width:9px;height:0;
  border-top:1px solid var(--sky-d)}
.c3d-dimv::before{top:0}.c3d-dimv::after{bottom:0}
.c3d-lab{position:absolute;font-family:"IBM Plex Mono",monospace;font-size:7px;
  letter-spacing:.1em;color:var(--sky2);white-space:nowrap}
.c3d-lab.c3d-mid{transform:translateX(-50%)}
.c3d-wide{display:none}
.c3d-leg{position:absolute;font-family:"IBM Plex Mono",monospace;font-size:7px;
  letter-spacing:.1em;color:var(--sky2);white-space:nowrap;text-transform:uppercase}
/* placement, driven by the same geometry as the blank */
.c3d-r1{top:calc((var(--c3-d) + var(--c3-tb) + 15px) * -1)}
.c3d-r2{top:calc((var(--c3-d) + var(--c3-tb) + 32px) * -1)}
.c3d-x1{left:0;width:var(--c3-w)}
.c3d-x2{left:var(--c3-w);width:var(--c3-d)}
.c3d-x3{left:calc(var(--c3-w) + var(--c3-d));width:var(--c3-w)}
.c3d-x4{left:calc(var(--c3-w)*2 + var(--c3-d));width:var(--c3-d)}
.c3d-m1{left:calc(var(--c3-w)/2)}
.c3d-m2{left:calc(var(--c3-w) + var(--c3-d)/2)}
.c3d-m3{left:calc(var(--c3-w)*1.5 + var(--c3-d))}
.c3d-m4{left:calc(var(--c3-w)*2 + var(--c3-d)*1.5)}
.c3d-vd{left:calc(var(--c3-pad) * -.42);top:0;height:var(--c3-h)}
.c3d-vl{left:calc(var(--c3-pad) * -1);top:calc(var(--c3-h)/2 - 7px)}
.c3d-lg{left:0;top:calc(var(--c3-h) + var(--c3-d) + var(--c3-tb) + 11px)}

.c3d-dwg{position:absolute;left:14px;top:12px;font-family:"IBM Plex Mono",monospace;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#7FB4E8}
.c3d-hint{position:absolute;left:13px;bottom:11px;font-family:"IBM Plex Mono",monospace;
  font-size:8.5px;letter-spacing:.13em;color:rgba(255,255,255,.42);max-width:82%;
  text-transform:uppercase}

/* ---------- controls ---------- */
.c3d-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--sky);margin-bottom:10px}
.c3d-btn{display:block;width:100%;text-align:left;padding:13px 15px;border-radius:2px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;
  font-family:inherit;font-size:14px;cursor:pointer;transition:.16s;min-height:48px}
.c3d-btn:hover{background:rgba(255,255,255,.11);border-color:var(--sky)}
.c3d-scrubwrap{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.c3d-ends{display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace;
  font-size:8.5px;letter-spacing:.14em;color:#8FB4DC;text-transform:uppercase}
.c3d-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:none;
  cursor:pointer;display:block;margin:0}
.c3d-range::-webkit-slider-runnable-track{height:2px;background:rgba(255,255,255,.24)}
.c3d-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;
  margin-top:-7px;background:var(--paper);border-radius:2px;
  box-shadow:0 0 0 1px rgba(8,34,70,.5)}
.c3d-range::-moz-range-track{height:2px;background:rgba(255,255,255,.24)}
.c3d-range::-moz-range-thumb{width:16px;height:16px;background:var(--paper);border:0;
  border-radius:2px}
.c3d-read{margin-top:11px;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.1em;color:var(--sky);text-transform:uppercase}
.c3d-spec{margin-top:16px;border-top:1px solid var(--line)}
.c3d-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:10px}
.c3d-row .k{color:#8FB4DC;letter-spacing:.13em;text-transform:uppercase;flex:none}
.c3d-row .v{color:#fff;text-align:right}

/* ---------- desktop ---------- */
@media(min-width:960px){
  .c3d{grid-template-columns:1fr 262px;gap:30px;
    --c3-w:148px; --c3-d:79px; --c3-h:216px; --c3-fl:56px; --c3-tb:21px; --c3-g:25px;
    --c3-pad:58px; --c3-padv:38px; --c3-sc:1}
  .c3d-stage{min-height:580px}
  .c3d-scene{perspective:1500px}
  .c3d-strip{width:112px;height:5px;left:30px;bottom:7px}
  .c3d-sheetk{font-size:8px;right:32px;bottom:6px}
  .c3d-art{padding:14px 12px}
  .c3d-top{font-size:7.6px}
  .c3d-crest{font-size:32px;margin-top:11px}
  .c3d-rule{width:38px;height:2px;margin-top:9px}
  .c3d-bot{font-size:7.6px}
  .c3d-code{height:29px}
  .c3d-vt,.c3d-lid{font-size:7.6px}
  .c3d-lab,.c3d-leg{font-size:8.5px}
  .c3d-wide{display:inline}
}

/* ---------- reduced motion: assembled, static ---------- */
@media(prefers-reduced-motion:reduce){
  .c3d{--f:1}
  .c3d-orbit{transition:none}
}