/* Refs #399391 - Document Print Builder 3D folding preview.
   All rules are scoped under #foldingPreviewModal so the generic panel / face /
   edge / spine / crease selectors cannot collide with the product page. */

/* Hidden in the page flow; folding-preview.js adds `is-visible` when it opens
   the modal in Fancybox (independent of Fancybox's internal class names). */
#foldingPreviewModal {
  display: none;
}

#foldingPreviewModal.is-visible {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 832px;
  max-width: 95vw;
  padding: 22px 22px 18px;
  font-family: Arial, Helvetica, sans-serif;
  color: #2f3540;
  background: linear-gradient(160deg, #ffffff 0%, #eef1f6 100%);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(20, 30, 50, 0.22);
}

/* Header: cube icon in a soft pill + the preview title. */
#foldingPreviewModal .folding-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(120, 130, 150, 0.15);
}

#foldingPreviewModal .folding-preview-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, #8f918f, #c7cbc8);
  box-shadow: 0 4px 10px rgb(169 199 176 / 35%);
}

#foldingPreviewModal .folding-preview-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #2f3540;
}

#foldingPreviewModal .folding-preview-stage {
  position: relative;
  width: 100%;
  height: 572px;
  /* Cool blue-grey studio backdrop with a soft vignette so the white sheet
     stands out clearly against it. */
  background:
    radial-gradient(130% 100% at 50% 8%, #eef3fb 0%, #dde5f1 48%, #c7d2e2 100%);
  border: 1px solid #cfd7e4;
  border-radius: 16px;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -26px 60px rgba(31, 45, 70, 0.10);
  perspective: 1700px;
  perspective-origin: 50% 46%;
}

/* Soft ground shadow under the sheet for depth. */
#foldingPreviewModal .folding-preview-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: 55%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(20, 30, 50, 0.18), rgba(20, 30, 50, 0));
  filter: blur(2px);
  pointer-events: none;
}

/* Drag hint: gently pulsing left/right arrows. */
#foldingPreviewModal .folding-preview-hint {
  color: #8a94a6;
  font-size: 16px;
  animation: foldingHintPulse 1.6s ease-in-out infinite;
}

@keyframes foldingHintPulse {
  0%, 100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.9;
  }
}

/* The sheet's own 3D space. Its rotateY is also used for the turn-around that
   plays once the fold is finished. */
#foldingPreviewModal .folding-preview-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
}

/* One fold panel. Its transform-origin sits exactly on the crease it hinges
   around, and the next panel is a child, so it travels along. */
#foldingPreviewModal .panel {
  position: absolute;
  top: 0;
  transform-style: preserve-3d;
}

/* Plain white paper. The colour stays underneath any artwork, so a transparent
   image still prints on an opaque sheet instead of letting the panels behind
   show through. */
#foldingPreviewModal .face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #ffffff;
  background-repeat: no-repeat;
  /* A hairline paper border + soft inner shading so each panel reads as a real
     sheet with a crisp edge, and a faint outer shadow lifts it off the backdrop.
     box-shadow (not border) is used so it never shifts the artwork slicing. */
  box-shadow:
    inset 0 0 0 1px rgba(120, 132, 150, 0.28),
    inset 0 0 22px rgba(90, 105, 130, 0.06),
    0 1px 3px rgba(30, 42, 66, 0.14);
  /* Flatten children (the artwork <img>) into the face plane so they are culled
     together with the face when its back is turned. Without this the <img>
     keeps its own 3D context and its artwork bleeds through the fold edge. */
  transform-style: flat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* The rotated artwork layer inside each face. Positioned/sized/rotated from JS
   (setFaceArt); object-fit keeps the picture filling the sheet without distortion. */
#foldingPreviewModal .face-art {
  position: absolute;
  display: none;
  pointer-events: none;
  transform-style: flat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#foldingPreviewModal .face.front {
  transform: translateZ(1px);
}

#foldingPreviewModal .face.back {
  transform: rotateY(180deg) translateZ(1px);
}

/* Paper thickness along the sheet's trimmed (guillotined) edges only. A crease
   is continuous paper and gets no such wall, which stops a fold reading as two
   cut sheets. Each wall stands perpendicular to the sheet and spans z -1..+1. */
#foldingPreviewModal .edge {
  position: absolute;
  background-image: linear-gradient(to right, #fbfbfc, #ccd1d6);
}

#foldingPreviewModal .edge.left,
#foldingPreviewModal .edge.right {
  top: 0;
  bottom: 0;
  width: 2px;
}

#foldingPreviewModal .edge.left {
  left: 0;
  transform-origin: 0 50%;
  transform: rotateY(-90deg) translateX(-1px);
}

#foldingPreviewModal .edge.right {
  right: 0;
  transform-origin: 100% 50%;
  transform: rotateY(90deg) translateX(1px);
}

#foldingPreviewModal .edge.top,
#foldingPreviewModal .edge.bottom {
  left: 0;
  right: 0;
  height: 2px;
  background-image: linear-gradient(to bottom, #fbfbfc, #ccd1d6);
}

#foldingPreviewModal .edge.top {
  top: 0;
  transform-origin: 50% 0;
  transform: rotateX(90deg) translateY(-1px);
}

#foldingPreviewModal .edge.bottom {
  bottom: 0;
  transform-origin: 50% 100%;
  transform: rotateX(-90deg) translateY(1px);
}

/* The fold spine: the bend itself, the outside of the curve the paper takes
   around the crease. It reaches from the outer face of the panel it hinges from
   to the outer face of the panel itself, capping the open ends of both sheets.
   Position and width come from script. */
#foldingPreviewModal .spine {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  transform-origin: 0 50%;
  /* Solid opaque paper edge (a subtle gradient over a solid base) so the inner
     artwork can never show through the fold edge while the sheet bends. */
  background-color: #eef1f4;
  background-image: linear-gradient(to right, #dfe2e6, #fcfcfd 40%, #cdd2d7);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Folding line: a faint dashed rule showing where the sheet is about to break.
   It sits on the rotation axis so it stays put while the panel turns, and hugs
   the surface so a stacked layer can never pick it up. It fades as soon as the
   paper starts to move and the bend takes over. */
#foldingPreviewModal .crease {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(90, 105, 130, 0.35);
}

/* Refs #399391 - responsive sizing so the preview fits tablets and phones.
   The modal width is already max-width:95vw; these shrink the stage height,
   padding and header so nothing is clipped on small / short screens. The JS
   (applyStageRatio) fits the sheet to the real stage box, so a smaller stage
   automatically yields a smaller sheet. */
@media (max-width: 768px) {
  #foldingPreviewModal.is-visible {
    gap: 10px;
    padding: 16px 14px 14px;
    border-radius: 14px;
  }
  #foldingPreviewModal .folding-preview-stage {
    height: 320px;
    border-radius: 12px;
  }
  #foldingPreviewModal .folding-preview-title {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  #foldingPreviewModal.is-visible {
    gap: 8px;
    padding: 12px 10px 10px;
  }
  #foldingPreviewModal .folding-preview-header {
    gap: 8px;
    padding-bottom: 8px;
  }
  #foldingPreviewModal .folding-preview-icon {
    width: 28px;
    height: 28px;
  }
  #foldingPreviewModal .folding-preview-title {
    font-size: 14px;
  }
  #foldingPreviewModal .folding-preview-stage {
    height: 260px;
  }
  /* Pull the ground shadow closer to the sheet on the shorter mobile stage. */
  #foldingPreviewModal .folding-preview-stage::after {
    bottom: 24px;
  }
  #foldingPreviewModal .folding-preview-hint {
    font-size: 14px;
  }
}

/* Refs #399391 - Auto Play button in the preview header. */
#foldingPreviewModal .folding-preview-autoplay {
  white-space: nowrap;
}

#foldingPreviewModal .folding-preview-autoplay.is-playing {
  color: #ffffff;
  background: linear-gradient(135deg, #a75f6e, #792830);
  border-color: #dc1530;
}