/* Home page golden ticket popup (src/promo.mjs, assets/promo.js). */
.gt{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px 16px;border:0;background:none;color:#fff;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}
.gt[open]{display:flex}
/* while the ticket is open the page behind can't scroll (on phones that scrolling slid the address bar
   in and out, which resized the screen and made the ticket jump) */
html.gt-lock{overflow:hidden;overscroll-behavior:none}
.gt::backdrop{background:rgba(6,4,18,.93)}
.gt-in{margin:auto;width:100%;max-width:760px;display:flex;flex-direction:column;align-items:center;text-align:center}
.gt-x{position:fixed;right:20px;top:20px;z-index:2;width:48px;height:48px;background:var(--ink);border:3px solid #fff;color:#fff;font:12px/1 var(--pp)}
.gt-x:hover{background:#3a3f66}
.gt-won{font:12px/1.6 var(--pp);color:var(--yellow);text-shadow:3px 3px 0 #c2416b}

.gt-tilt{position:relative;margin-top:26px;width:100%;max-width:720px;transform:rotate(-2deg);filter:drop-shadow(8px 8px 0 #000)}
.gt[open] .gt-tilt{animation:gt-in .7s cubic-bezier(.2,1.5,.4,1)}
@keyframes gt-in{from{transform:rotate(-14deg) scale(.4);opacity:0}}
.gt-spark{position:absolute;left:-26px;top:20px;width:6px;height:6px;background:#fff;box-shadow:0 -8px 0 #fff,0 8px 0 #fff,-8px 0 0 #fff,8px 0 0 #fff;animation:gt-tw 1.2s steps(1) infinite}
.gt-spark.b{left:auto;top:auto;right:-22px;bottom:30px;background:var(--cyan);box-shadow:0 -8px 0 var(--cyan),0 8px 0 var(--cyan),-8px 0 0 var(--cyan),8px 0 0 var(--cyan);animation-delay:-.6s}
@keyframes gt-tw{50%{opacity:.2}}

/* the ticket: gold foil, round notches punched in both ends, a dashed tear line before the stub */
.gt-tix{display:flex;text-align:left;color:var(--ink);background-color:var(--yellow);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 10px,transparent 10px 26px);
  -webkit-mask:radial-gradient(circle 20px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 20px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 20px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 20px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.gt-main{flex:1;min-width:0;padding:24px 30px 24px 44px;border-right:4px dashed rgba(11,13,16,.55)}
.gt-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;font:8px/1.5 var(--pp);color:#7a4b00}
.gt h2{margin-top:16px;font:400 24px/1.35 var(--pp);color:var(--ink)}
.gt-price{display:block;margin-top:8px;font-size:44px;line-height:1;color:#c2416b;text-shadow:3px 3px 0 var(--ink)}
.gt h2 small{display:inline-block;margin-top:8px;font:24px/1 var(--vt);color:var(--ink)}
.gt-demo{margin-top:12px;font-size:24px;line-height:1.1}
.gt-loot{margin-top:8px;font-size:20px;line-height:1.2;color:#3b2a00}
.gt-stub{flex:none;width:150px;padding:22px 26px 22px 18px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:12px;text-align:center}
.gt-sm{font:7px/1.6 var(--pp);color:#7a4b00}
.gt-date{font:11px/1.5 var(--pp)}
.gt-bars{width:100px;height:44px;background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 5px,var(--ink) 5px 6px,transparent 6px 10px,var(--ink) 10px 14px,transparent 14px 16px)}

.gt-acts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 18px;margin-top:34px}
.gt-go{display:inline-block;background:#c2416b;color:#fff;font:11px/1.3 var(--pp);padding:15px 18px;border:4px solid var(--ink);box-shadow:0 0 0 3px #fff;text-decoration:none}
.gt-go:hover{background:#d6527c}
.gt-later{background:none;border:0;color:var(--dim);font:9px/1 var(--pp);padding:14px 6px;text-decoration:underline}
.gt-later:hover{color:#fff}
.gt-fine{margin-top:14px;font-size:21px;color:var(--dim)}

/* phones: the stub moves under the ticket and the tear line turns sideways */
@media (max-width:640px){
  /* pinned from the top, not centered, so a change in screen height never moves it */
  .gt{padding:max(72px,8vh) 16px 24px}
  .gt-in{margin:0 auto auto}
  .gt-x{right:12px;top:12px}
  .gt-won{font-size:10px}
  .gt-tilt{transform:rotate(-1.5deg)}
  .gt-tix{flex-direction:column}
  .gt-main{padding:22px 30px 18px;border-right:0;border-bottom:4px dashed rgba(11,13,16,.55)}
  .gt h2{font-size:18px}
  .gt-price{font-size:36px}
  .gt-stub{width:auto;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:14px 30px 16px}
  .gt-bars{width:72px;height:30px}
  .gt-go{font-size:10px;padding:14px 12px}
}
@media (prefers-reduced-motion:reduce){.gt[open] .gt-tilt,.gt-spark{animation:none}}

/* Website development page: hanging banner that opens the golden ticket (src/promo.mjs promoRibbon) */
.gtr{position:fixed;z-index:44;top:var(--gtr-top,76px);right:max(16px,calc((100vw - 1240px) / 2 + 16px));width:112px;pointer-events:none}
.gtr-rod{display:block;height:10px;margin:0 -8px;background:#8a6a2a;border:3px solid var(--ink)}
.gtr-flag{display:block;width:100%;padding:0;border:0;background:none;color:#fff;pointer-events:auto;transform-origin:50% 0;animation:gtr-swing 2.6s ease-in-out infinite;filter:drop-shadow(5px 5px 0 #000)}
.gtr-flag:hover,.gtr-flag:focus-visible{animation-play-state:paused}
.gtr-flag:hover .gtr-in{background:#d6527c}
@keyframes gtr-swing{0%,100%{transform:rotate(2.5deg)}50%{transform:rotate(-2.5deg)}}
.gtr-in{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 8px 46px;background:#c2416b;box-shadow:inset 4px 0 0 rgba(255,255,255,.18),inset -4px 0 0 rgba(0,0,0,.2);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);transition:padding .25s}
.gtr-star{font:9px/1 var(--pp);color:var(--yellow)}
.gtr-more{font:9px/1.5 var(--pp);max-height:60px;overflow:hidden;transition:max-height .25s,opacity .2s}
.gtr-more.sm{font-size:8px;line-height:1.6}
.gtr-price{font:20px/1 var(--pp);color:var(--yellow);text-shadow:3px 3px 0 var(--ink)}
.gtr-tap{font:7px/1 var(--pp);color:#ffd6e6;animation:gtr-blink 1s steps(1) infinite}
@keyframes gtr-blink{50%{opacity:0}}
/* rolled up after scrolling: just the star, the price and the arrow */
.gtr.rolled .gtr-more{max-height:0;opacity:0;margin:-5px 0}
.gtr.rolled .gtr-in{padding-bottom:34px}

/* Phones get the ticket strip (top of the page) and the deal bar (bottom) instead of the banner */
.gts-wrap,.gtb{display:none}
.gts,.gtb{-webkit-mask:radial-gradient(circle 11px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  background-color:var(--yellow);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 10px,transparent 10px 26px);color:var(--ink);border:0;text-align:left}
.gts b,.gtb b{font-weight:400;color:#c2416b;text-shadow:2px 2px 0 var(--ink)}
.gts{display:block;width:100%;padding:14px 26px 16px;filter:drop-shadow(5px 5px 0 #000)}
.gts-top{display:flex;justify-content:space-between;gap:10px;font:7px/1.5 var(--pp);color:#7a4b00}
.gts-head{display:block;margin-top:10px;font:13px/1.4 var(--pp)}
.gts-why{display:block;margin-top:6px;font-size:21px;line-height:1.1}
.gts-go{display:inline-block;margin-top:10px;background:#c2416b;color:#fff;font:8px/1 var(--pp);padding:12px;border:3px solid var(--ink)}
.gtb{position:fixed;z-index:44;left:10px;right:10px;bottom:calc(12px + env(safe-area-inset-bottom));align-items:center;gap:10px;padding:10px 12px 10px 22px;filter:drop-shadow(4px 4px 0 #000);transform:translateY(160%);transition:transform .3s cubic-bezier(.2,1.3,.4,1)}
.gtb.on{transform:none}
.gtb-txt{flex:1;min-width:0}
.gtb-head{display:block;font:11px/1.3 var(--pp)}
.gtb-why{display:block;margin-top:4px;font-size:19px;line-height:1}
.gtb-go{flex:none;background:#c2416b;color:#fff;font:8px/1 var(--pp);padding:14px 10px;border:3px solid var(--ink)}
@media (max-width:640px){
  .gtr{display:none}
  .gts-wrap{display:block;padding:18px 16px 0}
  .gtb{display:flex}
}
@media (prefers-reduced-motion:reduce){.gtr-flag,.gtr-tap{animation:none}.gtb{transition:none}}