/* ================================================================
   MJPC 2026 WAITLIST POPUP
   A jigsaw piece floating over a drift of loose pieces.

   Loaded on both themes. It only uses tokens both stylesheets define
   (--cream, --yellow, --red, --ink, --display, --mono), so it looks the
   same on the poster landing page and on the inner pages.
   ================================================================ */

/* The overlay carries .mjp itself (it lives outside the page wrapper, so
   that wrapper's overflow-x:clip cannot crop it) and therefore inherits the
   brown page ground and the clip — both of which have to be undone here.
   z-index clears the lightbox's 99999 so the two can never bury each other. */
.mjp.wpop{
  position:fixed;inset:0;z-index:100000;margin:0;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:none;background-image:none;overflow:visible;
  opacity:0;transition:opacity .3s ease;
}
/* display:flex above is an author rule and would beat the UA [hidden] rule,
   so the dialog must opt back out explicitly — otherwise it renders on load
   for anyone whose JS has not run yet. */
.mjp.wpop[hidden]{display:none}
.mjp.wpop.is-open{opacity:1}

.mjp .wpop-back{position:absolute;inset:0;background:rgba(38,22,10,.72);backdrop-filter:blur(4px)}

/* ---------- the loose pieces ----------
   Decorative and click-through, so a click anywhere off the card still
   reaches the backdrop and closes the dialog. */
.mjp .wpop-drift{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mjp .wpop-pc{
  /* aspect-ratio matches the viewBox, so the height is never left to a
     browser that declines to derive it from width alone */
  position:absolute;width:var(--size);height:auto;aspect-ratio:12/11;
  fill:var(--tone);opacity:0;
  /* Two animations: the entrance runs once on its own delay, the drift loops. */
  animation:wpopIn .7s ease forwards var(--delay,0s),
            wpopDrift var(--speed,14s) ease-in-out infinite var(--delay,0s);
}
@keyframes wpopIn{ to{opacity:var(--fade,.5)} }
@keyframes wpopDrift{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--spin))}
  50%    {transform:translate3d(var(--dx),var(--dy),0) rotate(calc(var(--spin) + var(--turn,14deg)))}
}
/* Scattered around the card rather than evenly, so the drift reads as
   spilled pieces instead of a border. */
.mjp .pc-1{--size:108px;--tone:var(--yellow);--fade:.62;--spin:-14deg;--dx:22px; --dy:-26px;--speed:15s;--delay:.05s;top:9%;   left:8%}
.mjp .pc-2{--size:78px; --tone:var(--red);   --fade:.50;--spin:22deg; --dx:-20px;--dy:22px; --speed:18s;--delay:.20s;top:22%; right:11%}
.mjp .pc-3{--size:126px;--tone:var(--blue);  --fade:.42;--spin:-32deg;--dx:18px; --dy:24px; --speed:21s;--delay:.35s;bottom:10%;left:12%}
.mjp .pc-4{--size:92px; --tone:var(--purple);--fade:.46;--spin:12deg; --dx:-24px;--dy:-20px;--speed:17s;--delay:.50s;bottom:15%;right:9%}
.mjp .pc-5{--size:64px; --tone:var(--cream); --fade:.34;--spin:40deg; --dx:26px; --dy:16px; --speed:13s;--delay:.65s;top:6%;   right:30%}
.mjp .pc-6{--size:70px; --tone:var(--yellow);--fade:.30;--spin:-8deg; --dx:-18px;--dy:-22px;--speed:19s;--delay:.80s;bottom:6%;right:34%}

/* ---------- the card ----------
   The stage runs the entrance, the card runs the endless float: one element
   cannot do both, because an animation beats a transition on the same
   property and the bob would swallow the pop-in. */
.mjp .wpop-stage{
  position:relative;width:min(100%,470px);
  transform:scale(.86) rotate(-7deg) translateY(26px);
  transition:transform .46s cubic-bezier(.18,.9,.26,1.18);
}
.mjp.wpop.is-open .wpop-stage{transform:none}

.mjp .wpop-card{
  position:relative;background:var(--cream);color:var(--ink);text-align:center;
  border-radius:34px;
  /* drop-shadow, not box-shadow: it follows the real silhouette, so the
     knobs below cast a shadow too instead of being outlined by a rectangle */
  filter:drop-shadow(0 26px 30px rgba(30,16,6,.5));
  animation:wpopFloat 6s ease-in-out infinite;
}
@keyframes wpopFloat{
  0%,100%{transform:translateY(0)     rotate(0deg)}
  50%    {transform:translateY(-11px) rotate(.7deg)}
}

/* The knobs that make the card a piece — same cream as the card, so the two
   merge into one silhouette. The card must not clip its overflow, or these
   would be cut away. */
.mjp .wpop-knob{position:absolute;background:var(--cream);border-radius:50%}
.mjp .wpop-knob.k-top{width:60px;height:60px;top:-27px;left:22%}
.mjp .wpop-knob.k-right{width:52px;height:52px;right:-24px;top:46%}
.mjp .wpop-knob.k-bottom{width:54px;height:54px;bottom:-25px;right:26%}

/* The scroll lives on the body, not the card: a scroll container on the card
   would clip the knobs hanging outside its own box. */
.mjp .wpop-body{
  position:relative;border-radius:34px;
  padding:40px 34px 32px;max-height:calc(100vh - 120px);overflow-y:auto;
}

.mjp .wpop-x{
  position:absolute;top:14px;right:16px;z-index:2;width:34px;height:34px;line-height:1;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(20,20,20,.08);color:var(--ink);
  font-family:var(--display);font-size:1.5rem;
  display:flex;align-items:center;justify-content:center;
  transition:background .16s,transform .16s;
}
.mjp .wpop-x:hover{background:var(--ink);color:var(--cream);transform:rotate(90deg)}

/* the discount sticker, tilted like a stamp pressed onto the card */
.mjp .wpop-badge{
  display:inline-block;margin:0 0 16px;padding:9px 20px;
  background:var(--yellow);color:var(--ink);border-radius:100px;
  font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.03em;
  box-shadow:0 5px 0 #C7B200;transform:rotate(-3deg);
}
.mjp .wpop-eyebrow{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 10px;
}
.mjp .wpop-card h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.4rem,4.6vw,1.85rem);line-height:1.1;letter-spacing:-.026em;
  color:var(--ink);text-shadow:none;margin:0 0 12px;
}
.mjp .wpop-text{color:var(--ink-soft);font-size:.97rem;line-height:1.6;margin:0 0 20px}
.mjp .wpop-text b{color:var(--ink)}

.mjp .wpop-perks{
  list-style:none;margin:0 0 24px;padding:0;
  display:grid;gap:9px;text-align:left;
  font-size:.9rem;color:var(--ink-soft);
}
.mjp .wpop-perks li{position:relative;padding-left:30px;line-height:1.45}
/* a puzzle-knob bullet, echoing the cards on the pages behind */
.mjp .wpop-perks li::before{
  content:"";position:absolute;left:0;top:.15em;width:17px;height:17px;border-radius:50%;
  background:var(--yellow);box-shadow:inset 0 0 0 2px var(--ink);
}

.mjp .wpop-actions{display:grid;gap:12px;justify-items:center;margin-bottom:18px}
.mjp .wpop-actions .btn{width:100%}
.mjp .wpop-later{
  background:none;border:0;cursor:pointer;padding:4px 8px;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;
  color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;
}
.mjp .wpop-later:hover{color:var(--ink)}
.mjp .wpop-where{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--ink-soft);margin:0;
}

.mjp.wpop :focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---------- the standing tab ----------
   A puzzle piece parked in the corner of every page. The popup fires once
   and then holds its tongue for a week; this is what keeps the offer
   reachable after that, and on purpose it is never gated by what the popup
   remembered. */
.mjp.wtab-wrap{
  position:fixed;right:20px;bottom:20px;z-index:99000;margin:0;
  background:none;background-image:none;overflow:visible;
  transition:opacity .2s ease,transform .2s ease;
}
/* out of the way while the dialog it opens is on screen */
.mjp.wpop.is-open ~ .wtab-wrap{opacity:0;pointer-events:none;transform:translateY(10px)}

.mjp .wtab{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  border:0;border-radius:100px;padding:13px 22px 13px 16px;
  background:var(--yellow);color:var(--ink);
  font-family:var(--display);font-weight:800;font-size:.92rem;line-height:1.2;
  /* the same pressable edge every button on the site has */
  box-shadow:0 6px 0 #C7B200, 0 16px 30px rgba(30,16,6,.34);
  animation:wtabBob 4.5s ease-in-out infinite;
  transition:transform .14s ease,box-shadow .14s ease;
}
.mjp .wtab:hover,.mjp .wtab:focus-visible{
  animation-play-state:paused;
  transform:translateY(-3px);
  box-shadow:0 9px 0 #C7B200, 0 20px 34px rgba(30,16,6,.4);
}
.mjp .wtab:active{transform:translateY(3px);box-shadow:0 3px 0 #C7B200, 0 10px 20px rgba(30,16,6,.3)}
@keyframes wtabBob{
  0%,88%,100%{transform:translateY(0)}
  94%        {transform:translateY(-5px)}
}
.mjp .wtab-pc{width:26px;height:auto;aspect-ratio:12/11;fill:var(--ink);flex:0 0 auto}
.mjp .wtab-text b{color:var(--red-ink)}
.mjp.wtab-wrap :focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---------- responsive ----------
   The drift is the first thing to go: on a phone the card fills the screen
   and loose pieces behind it only crowd the backdrop. */
@media (max-width:720px){
  .mjp .pc-1,.mjp .pc-3{--size:76px}
  .mjp .pc-5,.mjp .pc-6{display:none}
}
@media (max-width:480px){
  .mjp.wpop{padding:12px}
  .mjp .wpop-drift{display:none}
  .mjp .wpop-body{padding:34px 22px 26px}
  .mjp .wpop-knob.k-top{width:46px;height:46px;top:-21px}
  .mjp .wpop-knob.k-right{width:40px;height:40px;right:-18px}
  .mjp .wpop-knob.k-bottom{width:42px;height:42px;bottom:-19px}
  /* the tab keeps its words on a phone — an unlabelled puzzle icon in the
     corner says nothing about what tapping it does */
  .mjp.wtab-wrap{right:12px;bottom:12px;left:12px}
  .mjp .wtab{width:100%;justify-content:center;font-size:.88rem;padding:13px 18px}
}

/* Everything above is decoration; none of it is needed to read the offer. */
@media (prefers-reduced-motion:reduce){
  .mjp.wpop,.mjp .wpop-stage{transition:none}
  .mjp .wpop-stage{transform:none}
  .mjp .wpop-card{animation:none}
  .mjp .wpop-pc{animation:wpopIn .01s ease forwards}
  .mjp .wpop-x:hover{transform:none}
  .mjp .wtab{animation:none}
}