/* Real 3D packaging in the freelance row, and the viewer with the die-cuts. Script: js/pack3d.js */

.pack3d {
  position: relative; width: min(100%, 620px); aspect-ratio: 5 / 4; margin-inline: auto;
  cursor: grab; touch-action: pan-x pan-y pinch-zoom; -webkit-user-select: none; user-select: none;
}
.pack3d.is-grabbing { cursor: grabbing; }
.p3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.p3d-name {
  display: none;
  position: absolute; left: 4%; bottom: 3%; margin: 0; align-items: baseline; gap: .55em;
  font: 600 clamp(1.05rem, 1.6vw, 1.35rem)/1 var(--display); color: var(--ink); letter-spacing: .01em;
  text-shadow: 0 2px 14px rgb(0 0 0 / .6); pointer-events: none;
}
.p3d-name span { font-size: .72em; color: var(--accent-2); letter-spacing: .08em; }
.p3d-open {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .4em;
  min-height: 44px; padding: 0 1.05em 0 1.2em; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 .95rem/1 var(--text); color: var(--ink-dark); background: var(--accent);
  box-shadow: 0 6px 22px rgb(255 79 163 / .35); transition: transform .2s var(--ease-out), background .2s var(--ease-out);
}
.p3d-open svg { width: 1em; height: 1em; }
.p3d-open:hover { background: var(--accent-2); transform: translateX(-50%) translateY(-1px); }
.p3d-open:active { transform: translateX(-50%) scale(.97); }
.p3d-open:focus-visible, .p3d-close:focus-visible, .p3d-play:focus-visible, .p3d-thumbs button:focus-visible, .p3d-scrub input:focus-visible {
  outline: 3px solid var(--sky); outline-offset: 3px;
}

/* ---- viewer ---- */
html.p3d-lock { overflow: hidden; }
.p3d-modal {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(8px, 2vw, 24px);
  background: rgb(8 6 12 / .94);
  opacity: 0; transition: opacity .28s var(--ease-out);
}
.p3d-modal[hidden] { display: none; }
.p3d-modal.is-open { opacity: 1; }
.p3d-sheet {
  width: min(1280px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 1fr; align-content: start;
  background: var(--ground-2); color: var(--ink); border: 1px solid rgb(255 255 255 / .1); border-radius: 24px;
  box-shadow: 0 30px 90px rgb(0 0 0 / .55); transform: translateY(14px) scale(.985); transition: transform .35s var(--ease-out);
}
.p3d-modal.is-open .p3d-sheet { transform: none; }
.p3d-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 20px 6px 24px; grid-column: 1 / -1; }
.p3d-kicker { margin: 0 0 .2em; font: 600 .8rem/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.p3d-title { margin: 0; font: 600 clamp(1.6rem, 3.4vw, 2.6rem)/1.05 var(--display); }
.p3d-close {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink); background: rgb(255 255 255 / .08); transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.p3d-close:hover { background: rgb(255 255 255 / .18); }
.p3d-close:active { transform: scale(.94); }
.p3d-close svg { width: 20px; height: 20px; }

.p3d-view { position: relative; min-height: min(56vh, 480px); margin: 8px 12px 0; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 50% 35%, #2b2338, var(--ground-3) 55%, var(--ground) 100%); }
.p3d-big-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.p3d-big-canvas:active { cursor: grabbing; }
.p3d-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--ink-2); }
.p3d-loading[hidden] { display: none; }
.p3d-controls {
  position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 10px 12px; border-radius: 14px; background: rgb(11 10 15 / .9);
}
.p3d-play {
  min-height: 44px; padding: 0 1.1em; border: 0; border-radius: 999px; cursor: pointer; font: 600 .95rem/1 var(--text);
  color: var(--ink-dark); background: var(--accent); transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.p3d-play:hover { background: var(--accent-2); }
.p3d-play:active { transform: scale(.97); }
.p3d-scrub { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; font: 500 .8rem/1.1 var(--text); color: var(--ink-2); min-width: 0; }
.p3d-scrub span { flex: none; white-space: nowrap; }
.p3d-scrub input { flex: 1; min-width: 80px; accent-color: var(--accent); height: 28px; cursor: pointer; }

.p3d-cuts { padding: 20px 24px 26px; }
.p3d-cuts h4 { margin: 0 0 .6em; font: 600 1.2rem/1.2 var(--display); }
.p3d-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; font: 500 .85rem/1.2 var(--text); color: var(--ink-2); }
.p3d-key { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; background: #fff; color: #2a2431; }
.p3d-key::before { content: ""; width: 22px; height: 0; border-top: 3px solid currentColor; border-radius: 2px; }
.p3d-key--cut::before { border-color: #111; }
.p3d-key--crease::before { border-color: #e0245e; }
.p3d-key--perforation::before { border-color: #2b7de9; border-top-style: dashed; }
.p3d-key--glue::before { border-color: #8a8a8a; }
.p3d-preview { margin: 0 0 14px; }
.p3d-preview img { display: block; width: 100%; max-height: 46vh; object-fit: contain; background: #fff; border-radius: 14px; padding: 10px; }
.p3d-preview figcaption { margin-top: 8px; font: 500 .85rem/1.3 var(--text); color: var(--ink-2); }
.p3d-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.p3d-thumbs button {
  width: 100%; display: grid; gap: 6px; padding: 8px; text-align: left; cursor: pointer; border: 2px solid transparent; border-radius: 12px;
  color: var(--ink-2); background: rgb(255 255 255 / .05); font: 500 .72rem/1.25 var(--text); transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.p3d-thumbs button:hover { background: rgb(255 255 255 / .1); }
.p3d-thumbs button[aria-current="true"] { border-color: var(--accent); color: var(--ink); }
.p3d-thumbs img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; }

@media (min-width: 900px) {
  .p3d-sheet { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; height: min(780px, 100%); }
  .p3d-view { margin: 8px 0 20px 20px; min-height: 0; }
  .p3d-cuts { overflow: auto; padding-top: 8px; }
  .p3d-preview img { max-height: 34vh; }
}
@media (prefers-reduced-motion: reduce) {
  .p3d-modal, .p3d-sheet, .p3d-open, .p3d-play, .p3d-close { transition: none; }
}

/* The site swaps the real mouse for a watering can (can.js), but the viewer sits above the can, so inside it the real mouse comes back. */
html.can-on .p3d-modal, html.can-on .p3d-modal * { cursor: auto !important; }
html.can-on .p3d-modal button, html.can-on .p3d-modal label, html.can-on .p3d-modal input[type=range] { cursor: pointer !important; }
html.can-on .p3d-modal .p3d-big-canvas { cursor: grab !important; }
html.can-on .p3d-modal .p3d-big-canvas:active { cursor: grabbing !important; }
html.p3d-lock .can, html.p3d-lock .rain { display: none; }

/* The 3D view stops above the control bar, so the bar never covers the bottom row of die-cuts. */
.p3d-big-canvas { height: calc(100% - 92px); }
@media (max-width: 560px) { .p3d-big-canvas { height: calc(100% - 138px); } }

/* every slide in the packaging row is the same width, so loading a 3D box never shifts the row (arrows, dots and auto-advance stay on target) */
[data-packs="freelance"] .swipe-track { --slide: 620px; }
[data-packs="freelance"] .swipe-slide { min-width: 0; }
[data-packs="freelance"] .pack3d { max-width: 100%; min-width: 0; align-self: center; }


/* Royal Essence uses the same accessible 3D viewer and stable slide sizes. */
[data-packs="royal"] .swipe-track { --slide: 620px; }
[data-packs="royal"] .swipe-slide { min-width: 0; }
[data-packs="royal"] .pack3d { max-width: 100%; min-width: 0; align-self: center; }

/* Packaging row shows only the real 3D models, never the stand-in boxes. */
[data-packs=freelance] .box-stage:not(.pack3d) .box{visibility:hidden}
[data-packs=freelance] .box-stage:not(.pack3d) .stage-hint{visibility:hidden}

/* View CAD: centered under the frame, in small caps */
.box-stage.eyewear-stage .p3d-open { left: 50% !important; right: auto !important; font-variant: small-caps; }

/* more room above the Physical Design title, below the vine */
#physical .side-head { padding-top: 56px; }
/* the iPad, iPhone and desktop mockups, a size smaller */
#virtual .swipe-slide > .tablet, #virtual .swipe-slide > .phone, #virtual .swipe-slide > .monitor { zoom: .78; }
/* the name block at the end of UX/UI: closer under the hanging flowers (the gap stays wide enough for the vine) */
#contact.end--bottom { margin-top: -80px; padding-top: 0; }
/* eyewear: don't flash the CAD poster while the 3D loads; it only shows if the 3D never comes (after 10s) */
.eyewear-poster { display: none !important; } /* never show the CAD picture in the row: only the 3D (the CAD stays behind the View CAD button) */
/* every packaging row: the 3D stage fills its slide, so each button sits the same small distance above the slider arrows */
.work-media--packs .swipe-track { align-items: stretch; }
.work-media--packs .swipe-slide { display: flex; height: auto !important; align-self: stretch !important; }
.work-media--packs .swipe-slide > .box-stage { aspect-ratio: auto; height: auto; flex: 1; align-self: stretch !important; max-height: none !important; }
/* the 3D sits above the button, never touching it */
.work-media--packs .box-stage.pack3d:not(.eyewear-stage) .p3d-canvas { height: calc(100% - 72px) !important; }