/* Pack-rip VFX (packrip.js). Geometry is % of the site pack box (769 x 1390); the opening
   (tear line) sits at y = 196 px = 14.1%. Default stage is the light/site palette: normal
   blend, amber/gold glow, every layer transparent over the page's cream background.
   data-stage="dark" is an additive fallback only and is not used by the app. */
.pr-stage {
  --glow-core: 255, 250, 228;
  --glow-mid: 255, 206, 96;
  --glow-edge: 255, 150, 30;
  --pr-w: min(230px, 60cqw, 38cqh);
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  container-type: size;
  overflow: visible;
  /* #rip-stage clips its box; feather the stage edges so the glow never shows a hard rectangle. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-composite: intersect;
  pointer-events: none;
  user-select: none;
}

.pr-pack {
  position: absolute;
  left: 0;
  right: 0;
  /* Leave headroom above the opening for the glow; keep the pack's foot near the stage floor. */
  top: max(14cqh, calc(97cqh - var(--pr-w) * 1.8075));
  width: var(--pr-w);
  margin-inline: auto;
  aspect-ratio: 769 / 1390;
  rotate: 1deg;
  transform-origin: 50% 92%; /* squash sits on the bottom crimp */
  will-change: transform;
}
.pr-pack > * { position: absolute; pointer-events: none; user-select: none; }
.pr-pack img { max-width: none; }

/* body: reference art, bg removed, placed at scale 1.0 (seal-aligned) */
.pr-body  { left: -1.690%; top: 12.950%; width: 102.211%; height: 80.791%; z-index: 3; }
/* closed-only seam filler (strip crimp + paper band blending into the body paper, feathered bottom) */
.pr-strip-closed { left: 0; top: 0; width: 100%; height: 17.122%; z-index: 4; }
/* strip: site pack cut above the same tear polyline */
.pr-strip { left: 0; top: 0; width: 100%; height: 15.683%; z-index: 6; opacity: 0;
  transform-origin: 50% 90%; filter: drop-shadow(0 6px 6px rgba(40, 20, 0, .25)); }

/* ---- glow (no raster) ---- centred on the opening: x=50%, y=14.1% ----
   Default palette = LIGHT/site stage: normal-blend warm gold/amber (additive white washes out on cream).
   `[data-stage="dark"]` overrides restore the additive white-gold look. All layers stay transparent. */
.pr-rays {
  left: 50%; top: 14.1%; width: 240%; aspect-ratio: 1; translate: -50% -50%;
  z-index: 1; opacity: 0;
  /* fan upward: radial falloff  ∩  upper half-plane (soft horizon slightly below the opening) */
  -webkit-mask-image: radial-gradient(closest-side, #000 4%, rgba(0,0,0,.7) 28%, rgba(0,0,0,.22) 60%, transparent 92%),
                      linear-gradient(to bottom, #000 0%, #000 40%, transparent 51%);
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(closest-side, #000 4%, rgba(0,0,0,.7) 28%, rgba(0,0,0,.22) 60%, transparent 92%),
                      linear-gradient(to bottom, #000 0%, #000 40%, transparent 51%);
          mask-composite: intersect;
}
.pr-rays-inner { position: absolute; inset: 0; border-radius: 50%; will-change: transform; filter: blur(1.1px); }
.pr-rays-a { /* 30 rays: deep amber edges -> gold -> pale-gold spine */
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(206, 128, 28, 0) 0deg, rgba(206, 128, 28, .7) 1.8deg,
    rgba(246, 196, 84, .9) 2.6deg, rgba(255, 232, 160, .95) 3deg, rgba(246, 196, 84, .9) 3.4deg,
    rgba(206, 128, 28, .65) 4.2deg, rgba(206, 128, 28, 0) 6.2deg, rgba(206, 128, 28, 0) 12deg);
}
.pr-rays-b { /* 21 counter-rotating deeper-amber rays */
  background: repeating-conic-gradient(from 5deg at 50% 50%,
    rgba(196, 112, 24, 0) 0deg, rgba(196, 112, 24, .4) 3deg,
    rgba(196, 112, 24, 0) 7deg, rgba(196, 112, 24, 0) 17.1428deg);
}
/* soft warm darkening around the light (contrast on cream); fades in with the glow */
.pr-shade {
  left: 50%; top: 14.1%; width: 300%; height: 120%; translate: -50% -50%;
  z-index: 0; opacity: 0; border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(120, 72, 20, 0) 18%, rgba(120, 72, 20, .10) 42%, rgba(120, 72, 20, .06) 66%, rgba(120, 72, 20, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 60%);
          mask-image: linear-gradient(to bottom, #000 45%, transparent 60%);
}
.pr-halo {
  left: 50%; top: 14.1%; width: 200%; height: 78%; translate: -50% -50%;
  z-index: 2; opacity: 0; border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 249, 226, 1) 0%, rgba(255, 238, 176, .98) 9%,
    rgba(248, 204, 96, .92) 20%, rgba(234, 168, 56, .66) 36%,
    rgba(216, 140, 38, .34) 58%, rgba(200, 120, 30, .12) 80%, rgba(200, 120, 30, 0) 100%);
  /* light stages: keep the halo from smearing orange down the pack's sides */
  -webkit-mask-image: linear-gradient(to bottom, #000 46%, rgba(0,0,0,.35) 56%, transparent 66%);
          mask-image: linear-gradient(to bottom, #000 46%, rgba(0,0,0,.35) 56%, transparent 66%);
}
.pr-stage[data-stage="dark"] .pr-halo { -webkit-mask-image: none; mask-image: none; }
.pr-beam {
  left: 50%; top: 14.1%; width: 70%; height: 55%; translate: -50% -100%;
  z-index: 2; opacity: 0; transform-origin: 50% 100%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255, 246, 214, .95), rgba(244, 190, 80, .5) 45%, rgba(230, 160, 50, 0) 100%);
  filter: blur(6px);
}
/* darker warm rim just around the opening: gives the bright core an edge on light paper */
.pr-rim {
  left: 50%; top: 14.6%; width: 112%; height: 11%; translate: -50% -50%;
  z-index: 4; opacity: 0; border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(176, 104, 28, 0) 48%, rgba(176, 104, 28, .28) 72%, rgba(176, 104, 28, 0) 100%);
  filter: blur(2px);
}
/* bloom that spills over the torn paper edge (in front of body, behind the strip) */
.pr-bloom {
  left: 50%; top: 14.1%; width: 118%; height: 16%; translate: -50% -50%;
  z-index: 5; opacity: 0; border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 251, 234, 1) 0%, rgba(255, 238, 176, .92) 24%,
    rgba(244, 188, 76, .55) 52%, rgba(224, 150, 40, 0) 100%);
}

/* ---- dark-stage fallback: additive white-gold (the previously approved dark look) ---- */
.pr-stage[data-stage="dark"] .pr-rays-a {
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(var(--glow-mid), 0) 0deg, rgba(var(--glow-mid), .55) 2.2deg,
    rgba(var(--glow-core), .75) 3deg, rgba(var(--glow-mid), .45) 3.8deg,
    rgba(var(--glow-mid), 0) 6deg, rgba(var(--glow-mid), 0) 12deg);
}
.pr-stage[data-stage="dark"] .pr-rays-b {
  background: repeating-conic-gradient(from 5deg at 50% 50%,
    rgba(var(--glow-edge), 0) 0deg, rgba(var(--glow-edge), .35) 3deg,
    rgba(var(--glow-edge), 0) 7deg, rgba(var(--glow-edge), 0) 17.1428deg);
  mix-blend-mode: screen;
}
.pr-stage[data-stage="dark"] .pr-rays-inner { filter: blur(2px); }
.pr-stage[data-stage="dark"] .pr-rays {
  -webkit-mask-image: radial-gradient(closest-side, #000 4%, rgba(0,0,0,.6) 28%, rgba(0,0,0,.18) 60%, transparent 92%),
                      linear-gradient(to bottom, #000 0%, #000 40%, transparent 51%);
          mask-image: radial-gradient(closest-side, #000 4%, rgba(0,0,0,.6) 28%, rgba(0,0,0,.18) 60%, transparent 92%),
                      linear-gradient(to bottom, #000 0%, #000 40%, transparent 51%);
}
.pr-stage[data-stage="dark"] .pr-halo {
  background: radial-gradient(closest-side,
    rgba(var(--glow-core), 1) 0%, rgba(var(--glow-core), .95) 8%,
    rgba(var(--glow-mid), .9) 20%, rgba(var(--glow-mid), .62) 36%,
    rgba(var(--glow-edge), .32) 58%, rgba(var(--glow-edge), .1) 80%, rgba(var(--glow-edge), 0) 100%);
}
.pr-stage[data-stage="dark"] .pr-beam {
  background: radial-gradient(50% 100% at 50% 100%, rgba(var(--glow-core), .95), rgba(var(--glow-mid), .45) 45%, rgba(var(--glow-mid), 0) 100%);
}
.pr-stage[data-stage="dark"] .pr-bloom {
  background: radial-gradient(closest-side,
    rgba(var(--glow-core), 1) 0%, rgba(var(--glow-core), .85) 22%,
    rgba(var(--glow-mid), .55) 50%, rgba(var(--glow-edge), 0) 100%);
  mix-blend-mode: screen;
}
.pr-stage[data-stage="dark"] .pr-shade, .pr-stage[data-stage="dark"] .pr-rim { display: none; }
.pr-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }

@media (prefers-reduced-motion: reduce) {
  .pr-pack, .pr-rays-inner { will-change: auto; }
}