/* Volume identity follows the catalog, independently of a pack's special edition. */
:root {
  /* Approved material-study setting: light slider 21, pearl ink, full effects. */
  --material-rest-x: 21%;
  --material-rest-y: 50%;
  --material-pack-angle: -2.9deg;
  --material-card-angle: -3.48deg;
}
.pack {
  --pack-x: var(--material-rest-x);
  --pack-y: var(--material-rest-y);
  --pack-rotate-y: var(--material-pack-angle);
}
:is(.pack, .card) {
  --volume-mark: url('/assets/volume-boobies.svg?v=8ddcb90451c6');
  --film-rose: 255 169 215;
  --film-violet: 184 157 255;
  --film-water: 145 231 239;
  --film-gold: 255 230 173;
  --film-angle: 122deg;
}
:is(.pack, .card)[data-volume="gyatts"] {
  --volume-mark: url('/assets/volume-gyatts.svg?v=8ddcb90451c6');
  --film-rose: 255 167 129;
  --film-violet: 206 131 255;
  --film-water: 109 239 210;
  --film-gold: 255 211 128;
  --film-angle: 151deg;
}
:is(.pack, .card)[data-volume="realgirls"] {
  --volume-mark: url('/assets/volume-realgirls.svg?v=8ddcb90451c6');
  --film-rose: 231 187 168;
  --film-violet: 178 198 223;
  --film-water: 171 235 204;
  --film-gold: 249 231 184;
  --film-angle: 104deg;
}

.volume-signature {
  display: grid;
  justify-items: center;
  gap: 0;
  pointer-events: none;
}
.volume-signature-mark {
  display: block;
  width: 100%;
  aspect-ratio: 120 / 84;
  background: linear-gradient(135deg, rgb(var(--film-water) / .75), #fff9ed 30%, rgb(var(--film-rose) / .8) 53%, rgb(var(--film-violet)) 69%, #fff5dd 88%);
  -webkit-mask: var(--volume-mark) center / contain no-repeat;
  mask: var(--volume-mark) center / contain no-repeat;
}
.volume-signature-word {
  font: 400 20px/1.15 "Agbalumo", cursive;
  letter-spacing: -.045em;
  color: transparent;
  background: linear-gradient(110deg, #f4eeed, rgb(var(--film-rose)), #fff9df, rgb(var(--film-water)));
  -webkit-background-clip: text;
  background-clip: text;
}
.pack .volume-signature {
  position: absolute;
  z-index: 4;
  top: 9%;
  right: 7%;
  width: 25%;
  opacity: 1;
  mix-blend-mode: normal;
  filter: drop-shadow(0 1px 0 rgb(27 19 30 / .85)) drop-shadow(0 0 2px rgb(27 19 30 / .65));
  transform: rotate(-9deg);
}
.pack .volume-signature-word { font-size: clamp(17px, 2.3dvh, 24px); }

/* Booster names live in the cover lettering; cardback signatures keep theirs. */
.pack .volume-signature-word { display: none; }
.pack .volume-signature-mark {
  background: linear-gradient(135deg, #fff9ed 12%, rgb(var(--film-water)) 38%, #fff9ed 55%, rgb(var(--film-rose)) 78%, #fff5dd);
}

/* Ink lives beneath the existing foil, and leaves with the wrapper when opened. */
.pack-cover-lettering {
  position: absolute;
  z-index: 1;
  inset: 25% 9% 15%;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  pointer-events: none;
  mix-blend-mode: normal;
}
.pack-cover-numeral {
  font: italic calc(clamp(82px, 62cqw, 192px) * var(--cover-numeral-scale, 1))/.9 Georgia, serif;
  letter-spacing: -.08em;
  color: rgb(var(--film-gold) / .42);
  text-shadow: 0 1px 1px rgb(27 19 30 / .35);
}
.pack-cover-numeral[hidden] { display: none; }
.pack-cover-name {
  margin-top: 20px;
  font: 400 calc(clamp(18px, 12cqw, 36px) * var(--cover-name-scale, 1))/1.4 "Agbalumo", cursive;
  padding: .08em .12em .22em;
  margin-left: -.12em;
  flex-shrink: 0;
  letter-spacing: -.025em;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(110deg, #fff9ed, #f8e1e9 48%, #e3f3f4);
  filter: drop-shadow(0 1px 0 rgb(27 19 30 / .9)) drop-shadow(0 0 2px rgb(27 19 30 / .75));
  -webkit-background-clip: text;
  background-clip: text;
}

/* Narrow, irregular folds leave the center of the artwork clear. */
.pack .pack-body::before {
  background:
    linear-gradient(91deg, rgb(255 255 255 / .55), transparent 1.4% 3%, rgb(var(--film-rose) / .17) 4%, transparent 9% 91%, rgb(var(--film-water) / .25) 97%, rgb(255 255 255 / .6)),
    linear-gradient(113deg, transparent 8%, rgb(255 255 255 / .12) 8.3%, transparent 9% 32%, rgb(255 255 255 / .09) 32.3%, transparent 33% 78%, rgb(255 255 255 / .17) 78.2%, transparent 79%),
    linear-gradient(74deg, transparent 63%, rgb(255 255 255 / .1) 63.3%, transparent 64%);
}
.pack .pack-crinkle {
  opacity: .1;
  -webkit-mask-image: linear-gradient(110deg, #000, transparent 17% 76%, #000);
  mask-image: linear-gradient(110deg, #000, transparent 17% 76%, #000);
}

/* Layered color interference: wide translucent bands, locally brighter folds.
   Pointer-driven angles and positions create color travel without filtering the photo. */
.pack[data-pack-kind] .pack-body::after {
  background:
    radial-gradient(ellipse at var(--pack-x) var(--pack-y), rgb(255 248 237 / .2), transparent 37%),
    conic-gradient(from calc(var(--film-angle) + var(--pack-rotate-y) * 4) at var(--pack-x) var(--pack-y),
      transparent 0deg, rgb(var(--film-rose) / .28) 48deg, rgb(var(--film-violet) / .32) 83deg,
      rgb(var(--film-water) / .26) 116deg, transparent 151deg 205deg,
      rgb(var(--film-gold) / .25) 245deg, rgb(var(--film-rose) / .31) 278deg,
      rgb(var(--film-violet) / .24) 313deg, transparent 360deg);
  background-size: 100% 100%, 160% 155%;
  background-position: center, var(--pack-x) var(--pack-y);
  mix-blend-mode: screen;
  opacity: .82;
}
.pack[data-pack-kind] .pack-sheen::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 0% var(--pack-y), rgb(var(--film-water) / .46), transparent 32%),
    radial-gradient(ellipse at 100% calc(100% - var(--pack-y)), rgb(var(--film-rose) / .42), transparent 35%),
    linear-gradient(calc(var(--film-angle) + var(--pack-rotate-y) * 3), transparent 14%, rgb(var(--film-violet) / .14) 29%, rgb(var(--film-rose) / .32) 37%, rgb(var(--film-gold) / .3) 43%, rgb(var(--film-water) / .24) 49%, transparent 59% 76%, rgb(var(--film-violet) / .28) 89%, transparent);
  background-size: 100% 100%, 100% 100%, 180% 180%;
  background-position: center, center, var(--pack-x) var(--pack-y);
  mix-blend-mode: screen;
  opacity: .7;
  animation: none;
  transition: background-position 100ms linear;
}
.pack .pack-sheen::after {
  top: -15%;
  left: -100%;
  width: 80%;
  height: 135%;
  background: linear-gradient(90deg, transparent 5%, rgb(var(--film-violet) / .14) 25%, rgb(var(--film-rose) / .24) 37%, rgb(var(--film-gold) / .3) 47%, rgb(255 255 255 / .18) 50%, rgb(var(--film-water) / .26) 58%, rgb(var(--film-violet) / .13) 73%, transparent 95%);
  mix-blend-mode: screen;
}
.pack-interaction:not(:hover) .pack:not(.is-opening):not(:disabled) .pack-sheen::after {
  animation: pearl-film-drift 9s ease-in-out infinite;
}
.pack-interaction:hover .pack:not(:disabled) .pack-sheen::after {
  transform: translate3d(280%, 0, 0) skewX(-17deg);
}
.pack .pack-top::before,
.pack .pack-bottom::before {
  background:
    linear-gradient(100deg, rgb(var(--film-water) / .35), transparent 28%, rgb(var(--film-rose) / .42) 51%, rgb(var(--film-gold) / .4) 72%, rgb(var(--film-violet) / .35)),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .18) 0 1px, rgb(0 0 0 / .16) 1px 3px);
  background-size: 180% 100%, auto;
  background-position: var(--pack-x) center, center;
}
.pack:is([data-pack-kind="gold"], [data-pack-kind="gyatt-gold"]) {
  --film-gold: 255 216 116;
}
.pack[data-pack-kind="prismatic"] .pack-body::after { opacity: 1; }

/* Alternate finish for comparison; volume identity is shared with pearl ink. */
[data-material="emboss"] .pack .volume-signature {
  opacity: .32;
  mix-blend-mode: soft-light;
  filter: drop-shadow(0 -1px .3px rgb(255 255 255 / .85)) drop-shadow(0 1px .4px rgb(45 26 44 / .5));
}
[data-material="emboss"] .pack .volume-signature-mark { background: #fff9f0; }
[data-material="emboss"] .pack .volume-signature-word { background-image: linear-gradient(#fff9f0, #dfd5e4); }
[data-material="emboss"] .pack-interaction:is(:hover, :focus-within) .pack .volume-signature { opacity: .56; }

@keyframes pearl-film-drift {
  0%, 15% { transform: translate3d(0, 0, 0) skewX(-17deg); opacity: 0; }
  30% { opacity: .7; }
  65% { opacity: .5; }
  85%, 100% { transform: translate3d(280%, 0, 0) skewX(-17deg); opacity: 0; }
}
.is-performance-lite .pack .pack-body::after { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .pack .pack-body, .pack .pack-sheen, .pack .pack-top, .pack .pack-bottom {
    --pack-x: var(--material-rest-x);
    --pack-y: var(--material-rest-y);
    --pack-rotate-y: var(--material-pack-angle);
    --pack-shift-x: 0px;
    --pack-shift-y: 0px;
  }
  .pack:not(.is-opening), .pack-interaction:hover .pack:not(.is-opening):not(:disabled) { transform: none; }
  .pack .pack-crinkle { transform: none; }
  .pack .pack-sheen::after { display: none; }
  .pack .pack-body::after, .pack .pack-sheen::before, .pack .volume-signature { transition: none; }
}

/* Approved Volumes IV–VI; their catalogs remain unavailable until import. */
:is(.pack, .card, .shop-cardback)[data-volume="latinas"] {
  --volume-mark:url('/assets/volume-latinas.svg?v=8ddcb90451c6');
  --film-rose:255 138 119;
  --film-violet:216 151 207;
  --film-water:174 220 175;
  --film-gold:255 216 144;
  --film-angle:116deg;
}
:is(.pack, .card, .shop-cardback)[data-volume="asiansgonewild"] {
  --volume-mark:url('/assets/volume-asiansgonewild.svg?v=8ddcb90451c6');
  --film-rose:255 173 210;
  --film-violet:185 155 255;
  --film-water:147 227 243;
  --film-gold:237 220 252;
  --film-angle:140deg;
}
:is(.pack, .card, .shop-cardback)[data-volume="gothsluts"] {
  --volume-mark:url('/assets/volume-gothsluts.svg?v=8ddcb90451c6');
  --film-rose:199 94 143;
  --film-violet:169 145 236;
  --film-water:178 205 226;
  --film-gold:222 208 234;
  --film-angle:158deg;
}
.pack[data-volume="asiansgonewild"] .volume-signature { width: 29%; right: 6%; }
.pack[data-volume="asiansgonewild"] .volume-signature-word { font-size: clamp(10px, 1.3dvh, 13px); }
.pack[data-volume="gothsluts"] .volume-signature-word { font-size: clamp(14px, 1.8dvh, 19px); }