/*
================================================================
Space Vanta Theme 2.0
Module: PDP gallery — the floating stage
Path: public/pdp/gallery.css
Version: PDP-GALLERY-002

The picture floats above two hard planes (silver, then steel line).
The planes drift a few pixels with the pointer and bob very slowly;
the picture itself never moves except to change. Rim = white
hairline over silver, like the faces of the logo. A blue seam under
the picture is the autoplay timer; it disappears for good the first
time the shopper touches anything. Colour weight: paper/white 70,
silver 20, gunmetal 4, blue 6.
================================================================
*/

.pdg {
  --pdg-cut: 22px;
  --px: 0; --py: 0;
  position: relative;
  min-width: 0;
}
.pdg, .pdg *, .pdg *::before, .pdg *::after { box-sizing: border-box; }

.pdg__stage { position: relative; padding: 0 18px 18px 0; }

.pdg__plane {
  position: absolute; pointer-events: none;
  clip-path: polygon(var(--pdg-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--pdg-cut));
}
.pdg__plane--a {
  inset: 18px 0 0 18px;
  background: var(--svd-face-light, linear-gradient(135deg, #fffbfa, #dbd9da 45%, #c1bdbe));
  box-shadow: inset 0 0 0 1px var(--svd-hair, #fff);
  transform: translate(calc(var(--px) * 7px), calc(var(--py) * 5px));
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.pdg__plane--b {
  inset: 34px -14px -14px 34px;
  border: 1px solid var(--svd-g400, #aeb1b9);
  background: repeating-linear-gradient(135deg, rgba(137,140,149,.22) 0 1px, rgba(137,140,149,0) 1px 7px);
  transform: translate(calc(var(--px) * 13px), calc(var(--py) * 9px));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.pdg__stage::before {   /* the glowing seam where the two planes meet, bottom-left */
  content: ""; position: absolute; left: 18px; bottom: 0; width: 112px; height: 2px; z-index: 3;
  background: var(--svd-seam-line, linear-gradient(90deg, transparent, #7dadde, #e5ffff, #1d6bff, transparent));
}

.pdg__frame {
  position: relative; z-index: 2; overflow: hidden;
  background: #fff;
  aspect-ratio: 1 / 1;
  clip-path: polygon(var(--pdg-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--pdg-cut));
  box-shadow: inset 0 0 0 1px #d6d1c8;
}

.pdg__track {
  display: flex; height: 100%; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.pdg__track::-webkit-scrollbar { display: none; }
.pdg__track:focus-visible { outline: 2px solid var(--svd-seam, #1d6bff); outline-offset: -2px; }
.pdg__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; }
.pdg__img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.pdg__slide.is-now .pdg__img { animation: pdg-settle .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pdg-settle { from { transform: scale(1.035); } to { transform: scale(1); } }

/* a single light pass whenever the picture changes */
.pdg__glint {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(229,255,255,.7) 50%, rgba(255,255,255,0) 60%) -140% 0 / 220% 100% no-repeat;
}
.pdg.is-changing .pdg__glint { opacity: 1; animation: svd-glint .9s ease both; }

/* arrows: gunmetal plates, shown on hover / focus (always on touch screens off, swipe instead) */
.pdg__nav {
  position: absolute; top: 50%; z-index: 4; width: 44px; height: 52px; margin-top: -26px; padding: 0; border: 0; cursor: pointer;
  background: var(--svd-face-deep, #313540); opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.pdg__nav--prev { left: 0; clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%); transform: translateX(-8px); }
.pdg__nav--next { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 0 78%); transform: translateX(8px); }
.pdg__nav i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border: solid #fff; border-width: 0 0 2px 2px; margin: -5px 0 0 -3px; transform: rotate(45deg); }
.pdg__nav--next i { transform: rotate(-135deg); margin-left: -7px; }
.pdg__frame:hover .pdg__nav, .pdg__frame:focus-within .pdg__nav { opacity: 1; transform: none; }
.pdg__nav:hover { background: var(--svd-seam, #1d6bff); }
.pdg__nav:focus-visible { outline: 2px solid var(--svd-ice, #e5ffff); outline-offset: -4px; }
.pdg__nav[disabled] { opacity: .0; pointer-events: none; }

.pdg__count {
  position: absolute; left: 16px; bottom: 14px; z-index: 4; display: flex; gap: 6px; align-items: baseline;
  font-family: ui-monospace, "IBM Plex Mono", SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .1em; color: var(--svd-g600, #616570);
}
.pdg__count b { color: var(--svd-g900, #313540); font-size: 13px; }

/* autoplay timer = the seam draws left to right once per picture */
.pdg__timer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 2px; background: rgba(174,177,185,.35); }
.pdg__timer::after {
  content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
  background: var(--svd-seam-line, linear-gradient(90deg, #7dadde, #e5ffff, #1d6bff));
}
.pdg[data-auto="on"] .pdg__timer::after { animation: pdg-timer var(--pdg-dur, 4800ms) linear both; }
.pdg[data-auto="paused"] .pdg__timer::after { animation-play-state: paused; }
.pdg:not([data-auto="on"]):not([data-auto="paused"]) .pdg__timer { display: none; }
@keyframes pdg-timer { to { transform: scaleX(1); } }

/* thumbnails: small floating chips */
.pdg__thumbs { display: flex; gap: 12px; margin-top: 26px; padding: 6px 4px 8px 0; overflow-x: auto; scrollbar-width: none; }
.pdg__thumbs::-webkit-scrollbar { display: none; }
.pdg__thumb {
  position: relative; flex: 0 0 auto; width: 72px; height: 72px; padding: 3px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #fffbfa 0%, #aeb1b9 40%, #f1edea 60%, #898c95 100%);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
  opacity: .72;
}
.pdg__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }
.pdg__thumb::after { content: ""; position: absolute; left: 8px; right: 0; bottom: 0; height: 2px; background: var(--svd-seam-line); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.pdg__thumb:hover { opacity: 1; transform: translateY(-3px); }
.pdg__thumb.is-now { opacity: 1; transform: translateY(-5px); }
.pdg__thumb.is-now::after { transform: scaleX(1); }
.pdg__thumb:focus-visible { outline: 2px solid var(--svd-seam, #1d6bff); outline-offset: 2px; }

.pdg__dots { display: none; }

/* planes bob very slowly (stops with any motion preference) */
@keyframes pdg-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.pdg__plane--a { animation: pdg-bob 7s ease-in-out infinite; }
.pdg__plane--b { animation: pdg-bob 9s ease-in-out -3s infinite; }

/* phone: full-width swipe, dots instead of thumbnails, planes pulled in */
@media (max-width: 749px) {
  .pdg { --pdg-cut: 16px; }
  .pdg__stage { padding: 0 10px 12px 0; }
  .pdg__plane--a { inset: 12px 0 0 12px; }
  .pdg__plane--b { inset: 22px -6px -8px 22px; }
  .pdg__frame { aspect-ratio: 1 / 1; }
  .pdg__nav { display: none; }
  .pdg__thumbs { display: none; }
  .pdg__dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
  .pdg__dots i { width: 18px; height: 3px; background: #c9c4bb; transform: skewX(-18deg); transition: background .2s, width .25s; }
  .pdg__dots i.is-now { width: 30px; background: var(--svd-seam, #1d6bff); }
}

html[data-sv-motion="calm"] .pdg *, html[data-sv-motion="calm"] .pdg__plane { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pdg *, .pdg__plane { animation: none !important; transition: none !important; }
}

/* note scans (alt text "note:...") are never gallery pictures; gallery.js removes them */
.pdg [data-alt^="note:" i], .pdg [data-alt^="Note:" i] { display: none !important; }