/* ============================================================================
   MMGBox — reusable 3D tuck-box component (pairs with assets/box.js).
   Six faces (front / back / left+right spine / top / bottom), slow idle
   rotation, pointer tilt, parallax hook (--p), reduced-motion static pose.
   Colors and copy arrive as CSS custom properties set by MMGBox.render().
   ============================================================================ */

.mmg-box-scene { position: relative; display: grid; justify-items: center;
  perspective: 1500px; padding: 10% 0 16%;
  --box-color: #0A2472; --box-accent: #F4ECD9;
  /* five stops — the black band is the sealed After Dark collection */
  --box-ribbon: linear-gradient(90deg, #0A2472 0 20%, #E56A50 20% 40%, #EA9E04 40% 60%,
                                       #C51F2D 60% 80%, #1A0000 80% 100%); }
/* pointer tilt + page parallax live on the wrapper so the idle spin never snaps */
.mmg-box-tilt { transform-style: preserve-3d;
  transform: translateY(calc(var(--p, 0) * -12px))
             rotateX(calc(var(--pry, 0deg) + var(--p, 0) * 3deg))
             rotateY(var(--prx, 0deg));
  transition: transform .3s ease-out; will-change: transform; }

.mmg-box { position: relative; width: var(--bw, 225px); height: var(--bh, 381px);
  transform-style: preserve-3d;
  animation: mmgBoxIdle 24s linear infinite; }
.mmg-box-scene.is-held .mmg-box { animation-play-state: paused; }
/* the hero reel's Pause control (or prefers-reduced-motion) stops every
   autoplaying surface in lockstep, including this idle box rotation */
html.reel-paused .mmg-box { animation-play-state: paused; }
@keyframes mmgBoxIdle {
  from { transform: rotateX(-7deg) rotateY(0deg); }
  to   { transform: rotateX(-7deg) rotateY(360deg); }
}

/* ---- faces ---------------------------------------------------------------- */
.mmg-box__face { position: absolute; left: 50%; top: 50%;
  width: var(--bw, 225px); height: var(--bh, 381px);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 2.5px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; padding: 1.1rem; text-align: center;
  color: var(--box-accent);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 32%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 2px, transparent 2px 4px),
    var(--box-color);
  border: 1px solid color-mix(in srgb, var(--box-accent) 22%, transparent);
  box-shadow: inset 0 0 40px rgba(0,0,0,.22); }
.mmg-box__face--front  { transform: translate(-50%, -50%) translateZ(calc(var(--bd, 58px) / 2)); }
.mmg-box__face--back   { transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--bd, 58px) / 2));
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 2px, transparent 2px 4px),
    color-mix(in srgb, var(--box-color) 92%, #000); }
.mmg-box__face--spine, .mmg-box__face--spine-r { width: var(--bd, 58px);
  padding: .9rem .35rem; gap: .5rem; }
.mmg-box__face--spine   { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--bw, 225px) / 2));
  background: linear-gradient(90deg, color-mix(in srgb, var(--box-color) 68%, #000),
                                     color-mix(in srgb, var(--box-color) 88%, #000)); }
.mmg-box__face--spine-r { transform: translate(-50%, -50%) rotateY(90deg)  translateZ(calc(var(--bw, 225px) / 2));
  background: linear-gradient(90deg, color-mix(in srgb, var(--box-color) 88%, #000),
                                     color-mix(in srgb, var(--box-color) 62%, #000)); }
.mmg-box__face--top, .mmg-box__face--bottom { height: var(--bd, 58px); padding: .4rem; gap: .35rem;
  flex-direction: row; }
.mmg-box__face--top    { transform: translate(-50%, -50%) rotateX(90deg)  translateZ(calc(var(--bh, 381px) / 2));
  background: linear-gradient(180deg, color-mix(in srgb, var(--box-color) 108%, #fff),
                                      color-mix(in srgb, var(--box-color) 86%, #000)); }
.mmg-box__face--bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--bh, 381px) / 2));
  background: color-mix(in srgb, var(--box-color) 62%, #000); }

/* tuck-lid seam + thumb notch (back face, like a real tuck box) */
.mmg-box__face--back::before { content: ""; position: absolute; left: 0; right: 0;
  top: 15%; height: 1px; background: rgba(0,0,0,.34);
  box-shadow: 0 1px 0 rgba(255,255,255,.07); }
.mmg-box__face--back::after { content: ""; position: absolute; left: 50%; top: 15%;
  width: 26%; height: 13px; transform: translateX(-50%);
  border: 1px solid rgba(0,0,0,.3); border-top: 0;
  border-radius: 0 0 60px 60px;
  background: linear-gradient(180deg, rgba(0,0,0,.16), transparent 80%); }
/* soft vertical creases on the front edges — printed-carton feel */
.mmg-box__face--front::before { content: ""; position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 3px 0 5px -3px rgba(0,0,0,.45), inset -3px 0 5px -3px rgba(0,0,0,.45),
              inset 0 3px 5px -3px rgba(255,255,255,.18); }

/* ---- printed content ------------------------------------------------------ */
/* the printed brand mark — THE MEETING: two facing profile silhouettes with
   a crimson spark between them (inline SVG, generated by box.js / static
   fallback markup). A faint foil ring lifts it off the carton like a real
   spot-print. */
.mmg-box__mark { position: relative; display: block;
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%;
  background: color-mix(in srgb, var(--box-accent) 94%, transparent);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--box-accent) 40%, transparent),
              0 1px 3px rgba(0,0,0,.35);
  padding: 3px; }
.mmg-box__mark svg { display: block; width: 100%; height: 100%; }
.mmg-box__mark::before, .mmg-box__mark::after { content: none; }
.mmg-box__word { font-family: "Noto Serif", Georgia, serif; font-weight: 600;
  font-size: clamp(1rem, calc(var(--bw, 225px) * .066), 1.5rem); line-height: 1.16; }
.mmg-box__word em { font-style: italic; }
.mmg-box__tag { font: 600 .56rem/1.6 "Noto Sans", system-ui, sans-serif;
  letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--box-accent) 72%, transparent); }
.mmg-box__ribbon { width: 62%; height: 5px; border-radius: 2px; margin-top: .3rem;
  background: var(--box-ribbon);
  box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.12); }
.mmg-box__count { margin-top: .55rem; font: 700 .6rem/1.5 "Noto Sans", system-ui, sans-serif;
  letter-spacing: .17em; text-transform: uppercase; }
.mmg-box__size { font: 600 .52rem/1.5 "Noto Sans", system-ui, sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--box-accent) 62%, transparent); }
.mmg-box__consent { font: 700 .54rem/1.6 "Noto Sans", system-ui, sans-serif;
  letter-spacing: .2em; color: color-mix(in srgb, var(--box-accent) 80%, transparent); }
.mmg-box__blurb { margin: 0; max-width: 26ch;
  font: 500 .66rem/1.65 "Noto Sans", system-ui, sans-serif;
  color: color-mix(in srgb, var(--box-accent) 78%, transparent); }
.mmg-box__rule { width: 40%; height: 1px;
  background: color-mix(in srgb, var(--box-accent) 35%, transparent); }
.mmg-box__barcode { width: 44%; height: 18px; border-radius: 2px; margin-top: .5rem;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--box-accent) 82%, transparent) 0 2px, transparent 2px 4px,
    color-mix(in srgb, var(--box-accent) 82%, transparent) 4px 5px, transparent 5px 8px);
  opacity: .8; }
/* spine typography runs vertically */
.mmg-box__spine-word { writing-mode: vertical-rl; text-orientation: mixed;
  font-family: "Noto Serif", Georgia, serif; font-weight: 600;
  font-size: clamp(.62rem, calc(var(--bd, 58px) * .22), .85rem);
  letter-spacing: .3em; text-transform: uppercase; }
.mmg-box__spine-ribbon { width: 4px; height: 26%; border-radius: 2px;
  background: var(--box-ribbon);
  background-size: 100% 400%; /* stack the four colors vertically-ish */ }
.mmg-box__top-num { font-family: "Noto Serif", Georgia, serif; font-weight: 600;
  font-size: clamp(.8rem, calc(var(--bd, 58px) * .3), 1.1rem); }
.mmg-box__face--top .mmg-box__mark { width: 24px; height: 24px; padding: 2px; }

/* ---- treatments — per-edition face styling families -----------------------
   "classic" (Core 108 / flagship) needs no overrides; the base rules above
   already are the classic look. The rest are opt-in via a "mmg-box--<name>"
   class that render() adds to the .mmg-box element, so faces underneath
   pick these up as descendant overrides. Every color reference below is
   `var(--box-color)` / `var(--box-accent)` / `var(--box-ribbon)` (all set by
   MMGBox.render from the seven brand hexes) combined with color-mix()/rgba()
   — no new hardcoded colors. */

/* luxe — After Dark: near-black, no fabric weave, thin crimson foil line,
   quieter print details. Reads as sealed and restrained rather than festive. */
.mmg-box--luxe .mmg-box__face {
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%), var(--box-color); }
.mmg-box--luxe .mmg-box__face--back {
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 36%),
    color-mix(in srgb, var(--box-color) 94%, #000); }
.mmg-box--luxe .mmg-box__face--front::before {
  box-shadow: inset 2px 0 4px -3px rgba(0,0,0,.5), inset -2px 0 4px -3px rgba(0,0,0,.5),
              inset 0 2px 4px -3px rgba(255,255,255,.08); }
.mmg-box--luxe .mmg-box__ribbon { width: 100%; height: 2px; margin: .55rem 0 0; border-radius: 0;
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--box-ribbon) 65%, transparent), 0 1px 0 rgba(0,0,0,.4); }
.mmg-box--luxe .mmg-box__spine-ribbon { width: 2px; }
.mmg-box--luxe .mmg-box__mark { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--box-ribbon) 45%, transparent),
  0 0 10px color-mix(in srgb, var(--box-ribbon) 35%, transparent), 0 1px 3px rgba(0,0,0,.4); }
.mmg-box--luxe .mmg-box__tag { letter-spacing: .34em; }
.mmg-box--luxe .mmg-box__consent, .mmg-box--luxe .mmg-box__barcode { opacity: .72; }

/* band — Relationship 54: a full-bleed belly-band (not a thin ribbon bar)
   wraps the front/spine like a paper band around a real box. */
.mmg-box--band .mmg-box__ribbon, .mmg-box--cream .mmg-box__ribbon {
  width: auto; align-self: stretch; margin: .55rem -1.1rem 0; height: 15%; min-height: 18px;
  border-radius: 0; background-image: linear-gradient(180deg, rgba(255,255,255,.22), transparent 45%),
  var(--box-ribbon);
  box-shadow: 0 2px 5px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.18); }

/* cream — Friendship 54: uncoated paper-stock carton (matte, no glossy sheen,
   subtle grain) instead of the glossy laminated finish, plus the belly-band
   above shared with "band". */
.mmg-box--cream .mmg-box__face {
  background: radial-gradient(circle at 22% 18%, rgba(20,17,14,.045) 0, transparent 45%),
    radial-gradient(circle at 78% 82%, rgba(20,17,14,.04) 0, transparent 45%), var(--box-color);
  box-shadow: inset 0 0 30px rgba(20,17,14,.08); }
.mmg-box--cream .mmg-box__face--back {
  background: radial-gradient(circle at 30% 70%, rgba(20,17,14,.035) 0, transparent 45%),
    color-mix(in srgb, var(--box-color) 96%, #000); }
.mmg-box--cream .mmg-box__face--front::before {
  box-shadow: inset 2px 0 4px -3px rgba(20,17,14,.16), inset -2px 0 4px -3px rgba(20,17,14,.16),
              inset 0 2px 4px -3px rgba(255,255,255,.55); }

/* foil — Deep Connection 54: ink carton with a wider, amber-tinted foil-stamp
   pattern (not the default fine fabric weave) and a metallic-look accent line. */
.mmg-box--foil .mmg-box__face {
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 34%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--box-accent) 12%, transparent) 0 1.5px,
      transparent 1.5px 10px), var(--box-color); }
.mmg-box--foil .mmg-box__ribbon { height: 3px; border-radius: 0; margin-top: .5rem;
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--box-accent) 55%, transparent), 0 1px 0 rgba(0,0,0,.4); }
.mmg-box--foil .mmg-box__mark { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--box-accent) 55%, transparent),
  0 0 9px color-mix(in srgb, var(--box-accent) 35%, transparent), 0 1px 3px rgba(0,0,0,.4); }

/* ---- floor shadow --------------------------------------------------------- */
.mmg-box-shadow { position: absolute; left: 50%; bottom: 3%;
  width: 72%; height: 9%; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(10,8,4,.42), transparent 70%);
  filter: blur(10px); pointer-events: none; }

/* ---- static / no-JS fallback ---------------------------------------------- */
.mmg-box--static { animation: none; width: min(72%, 235px); height: auto; margin: 0 auto;
  transform: rotateY(-18deg) rotateX(-4deg); transform-style: flat; }
.mmg-box--static .mmg-box__face--front { position: relative; left: auto; top: auto;
  transform: none; width: 100%; aspect-ratio: 72 / 122;
  box-shadow: 0 40px 70px -34px rgba(6,16,50,.8), inset 0 0 40px rgba(0,0,0,.22); }

/* ---- reduced motion: a fixed, readable three-quarter pose ----------------- */
@media (prefers-reduced-motion: reduce) {
  .mmg-box { animation: none; transform: rotateX(-6deg) rotateY(-26deg); }
  .mmg-box-tilt { transform: none; transition: none; }
}