/* Outrun Noir: Pricing hero. Animated grid background (the current page's light pulses, in noir) + a guilloché rosette,
   and one of three scroll-driven art variants: coin assembles, cloche reveal, hand grabs. Loaded after noir-pages.css.
   Default CSS = the final (assembled / revealed) state, so no-JS and reduced motion still look finished. */

/* ---------- background: breathing hairline grid with orange pulses travelling along its lines ---------- */
/* every colour comes from the theme variables (--ink, --cream, --orange), so a light theme can re-tint this hero */
body.pg{--pr-grid:color-mix(in srgb,var(--cream) 9%,transparent);--pr-guil:color-mix(in srgb,var(--cream) 9%,transparent);
  --pr-guil-o:color-mix(in srgb,var(--orange) 34%,transparent);--pr-pulse:color-mix(in srgb,var(--orange) 92%,transparent);--pr-glow:color-mix(in srgb,var(--orange) 55%,transparent)}
body.pg .ph-discounted{isolation:isolate;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 97%,var(--orange)),var(--ink) 70%)}
body.pg .ph-discounted>.wrap{position:relative;z-index:1}
body.pg .pbg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:radial-gradient(85% 75% at 72% 6%,#000,transparent 76%);mask-image:radial-gradient(85% 75% at 72% 6%,#000,transparent 76%)}
body.pg .pbg-grid{position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(var(--pr-grid) 1px,transparent 1px),linear-gradient(90deg,var(--pr-grid) 1px,transparent 1px);background-size:56px 56px;
  animation:pr-breathe 9s ease-in-out infinite alternate}
@keyframes pr-breathe{from{opacity:.4}to{opacity:.95}}
body.pg .pbg .pl{position:absolute;display:block}
body.pg .pbg .pl-h1,body.pg .pbg .pl-h2,body.pg .pbg .pl-h3,body.pg .pbg .pl-h4{left:0;width:180px;height:1px;background:linear-gradient(90deg,transparent,var(--pr-pulse),transparent);transform:translateX(-220px)}
body.pg .pbg .pl-v1,body.pg .pbg .pl-v2,body.pg .pbg .pl-v3{top:0;width:1px;height:150px;background:linear-gradient(180deg,transparent,var(--pr-pulse),transparent);transform:translateY(-220px)}
body.pg .pbg .pl-h1{top:56px;animation:pr-x 7s linear infinite}
body.pg .pbg .pl-h2{top:224px;animation:pr-x 9.5s linear 2.2s infinite}
body.pg .pbg .pl-h3{top:392px;animation:pr-x 8s linear 4.6s infinite}
body.pg .pbg .pl-h4{top:560px;animation:pr-x 11s linear 1.1s infinite reverse}
body.pg .pbg .pl-v1{left:504px;animation:pr-y 6.5s linear 1.6s infinite}
body.pg .pbg .pl-v2{left:840px;animation:pr-y 8.5s linear 3.4s infinite}
body.pg .pbg .pl-v3{left:1176px;animation:pr-y 7.5s linear .4s infinite}
@keyframes pr-x{from{transform:translateX(-220px)}to{transform:translateX(calc(100vw + 40px))}}
@keyframes pr-y{from{transform:translateY(-220px)}to{transform:translateY(900px)}}

/* ---------- art column + stage ---------- */
body.pg .art-pricing{position:relative;display:flex;align-items:center;justify-content:center;min-height:min(78dvh,720px)}
body.pg .pstage{position:relative;flex:none}
body.pg .pstage img{position:absolute;display:block;max-width:none;user-select:none;-webkit-user-drag:none}
body.pg .guil{position:absolute;left:50%;top:50%;width:132%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);overflow:visible;z-index:0;pointer-events:none;
  animation:pr-spin 240s linear infinite;will-change:transform}
body.pg .guil path{fill:none;vector-effect:non-scaling-stroke}
body.pg .guil .g-c path{stroke:var(--pr-guil);stroke-width:.7}
body.pg .guil .g-o path{stroke:var(--pr-guil-o);stroke-width:1}
@keyframes pr-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* JS sets the opening state before showing the stage; this failsafe reveals it if scripts never run */
@media (scripting:enabled){
  body.pg .pstage{opacity:0;animation:pr-failsafe 0s 2.6s forwards}
  body.pg .pstage.ready{opacity:1;animation:none;transition:opacity .5s ease-out}
}
@keyframes pr-failsafe{to{opacity:1}}

/* ---------- A: coin assembles ---------- */
body.pg .coin-stage{width:min(100%,540px,60dvh);aspect-ratio:1;margin-bottom:6%}
body.pg .coin-body{position:absolute;inset:0;z-index:1}
body.pg .coin-stage .wedge{position:absolute;inset:0;will-change:transform}
body.pg .coin-stage .wedge img,body.pg .coin-whole{inset:0;width:100%;height:100%}
body.pg .coin-stage .wedge{opacity:0}
body.pg .coin-fx{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none}
body.pg .coin-fx .seams line{stroke:var(--orange);stroke-width:4;stroke-linecap:square;opacity:0}
body.pg .coin-fx .arc-track{fill:none;stroke:color-mix(in srgb,var(--cream) 14%,transparent);stroke-width:1.5}
body.pg .coin-fx .arc{fill:none;stroke:var(--orange);stroke-width:4;stroke-dasharray:100;stroke-dashoffset:5}
body.pg .coin-tag{position:absolute;right:0;bottom:-11%;z-index:3;margin:0;display:flex;align-items:baseline;gap:8px;font-size:13.5px;color:var(--cream-2);white-space:nowrap}
body.pg .coin-tag b{font:700 30px/1 var(--sans);letter-spacing:-.04em;color:var(--orange)}

/* ---------- B: cloche reveal ---------- */
body.pg .cloche-stage{height:min(76dvh,720px);aspect-ratio:896/1200}
body.pg .cl-tray,body.pg .cl-lid{inset:0;width:100%;height:100%}
body.pg .cl-tray{z-index:1}
body.pg .cl-glow{position:absolute;z-index:2;width:62%;aspect-ratio:1.6;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,var(--pr-glow),color-mix(in srgb,var(--orange) 16%,transparent) 55%,transparent)} /* no filter:blur here: re-blurring this large layer froze scrolling ~80 ms; the gradient already fades to nothing */
body.pg .cl-rays{position:absolute;z-index:2;height:auto;aspect-ratio:2;overflow:visible}
body.pg .cl-rays path{fill:none;stroke:var(--orange);stroke-width:.75;opacity:.75;stroke-dasharray:1;stroke-dashoffset:0}
body.pg .cl-pile{z-index:3;height:auto}
body.pg .cl-seam{position:absolute;z-index:4;height:2px;background:var(--orange);box-shadow:0 0 18px 3px var(--pr-glow);opacity:0;border-radius:2px;animation:pr-seam 1.5s ease-in-out infinite alternate}
@keyframes pr-seam{from{box-shadow:0 0 8px 1px color-mix(in srgb,var(--orange) 35%,transparent)}to{box-shadow:0 0 26px 6px color-mix(in srgb,var(--orange) 70%,transparent)}}
body.pg .cl-lid{z-index:5;transform:translateY(-5%) rotate(-2deg);transform-origin:70% 0}

/* ---------- C: hand grabs ---------- */
body.pg .grab-stage{width:128%;margin-right:-28%;aspect-ratio:1/.62;overflow:visible}
body.pg .grab-stage .guil{left:32%;top:52%;width:92%}
body.pg .gr-note,body.pg .gr-hand{position:absolute;will-change:transform}
body.pg .gr-note{z-index:1;left:2%;top:32.3%;width:60%}
body.pg .gr-hand{z-index:2;left:33.55%;top:23.2%;width:76%}
body.pg .gr-note img,body.pg .gr-hand img{position:relative;width:100%;height:auto}
/* final state: grabbed and pulled to the right */
body.pg .gr-note{transform:translateX(26.7%) rotate(-3deg)}
body.pg .gr-hand{transform:translateX(21%)}
body.pg .gr-tick{position:absolute;z-index:3;left:52.4%;top:61.8%;width:64px;height:64px;margin:-32px 0 0 -32px;opacity:0;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 10%,var(--orange) 10% 11%,transparent 11% 35%,var(--orange) 35% 36%,transparent 36% 60%,var(--orange) 60% 61%,transparent 61% 85%,var(--orange) 85% 86%,transparent 86%);
  -webkit-mask:radial-gradient(closest-side,transparent 30%,#000 32%);mask:radial-gradient(closest-side,transparent 30%,#000 32%)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  body.pg .art-pricing{min-height:0;padding:12px 0 8px}
  body.pg .coin-stage{width:min(82vw,420px)}
  body.pg .coin-tag{right:0;bottom:-12%}
  body.pg .coin-tag b{font-size:24px}
  body.pg .cloche-stage{height:auto;width:min(74vw,400px)}
  body.pg .grab-stage{width:min(112%,600px);margin-right:-12%}
  body.pg .pbg .pl-v2,body.pg .pbg .pl-v3,body.pg .pbg .pl-h4{display:none}
  body.pg .guil{width:130%}
}
@media (max-width:520px){
  body.pg .coin-tag{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  body.pg .pbg-grid,body.pg .pbg .pl,body.pg .guil,body.pg .cl-seam{animation:none!important}
  body.pg .pbg .pl{display:none}
}
html.static body.pg .pbg .pl,html.static body.pg .pbg-grid,html.static body.pg .guil,html.static body.pg .cl-seam{animation:none!important}
html.static body.pg .pbg .pl{display:none}

/* fix (pricing only): stacked comparison cells kept white-space:nowrap, so the value sat on the same line as the
   full-width label and ran off-screen on phones */
@media (max-width:860px){body.pg .pt.cmp tbody td.n,body.pg .pt.cmp tbody td{white-space:normal}}

/* review fixes (2026-10-24): the cloche hands ran into the image edge with hard cuts, so fade the wrists out;
   the coin wedges, guilloche and grab hand poked 1-20px past the phone edge, so clip the hero sideways */
body.pg .cl-lid{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 14%);mask-image:linear-gradient(to left,transparent 0,#000 14%)}
body.pg .cl-tray{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 13%);mask-image:linear-gradient(to top,transparent 0,#000 13%)}
body.pg section.ph{overflow-x:clip}

/* ---------- round 5 (2026-10-24): coin energy line, gift icon (the top-right discount badge was tried and removed at the owner's request) ---------- */
/* hot core of the travelling light: orange lifted toward paper white (in light mode --ink is the paper colour) */
body.pg{--pr-hot:color-mix(in srgb,var(--orange) 45%,var(--cream))}
html[data-theme=light] body.pg{--pr-hot:color-mix(in srgb,var(--orange) 45%,var(--ink))}

/* A: energy line. Defaults are the finished state: the figure outline stays drawn, the travelling glows are off */
body.pg .coin-fx .en use,body.pg .coin-fx .en path{fill:none;stroke-linecap:round;stroke-linejoin:round}
body.pg .coin-fx .en-trail{stroke:var(--orange);stroke-width:3.4;stroke-dasharray:1 2;stroke-dashoffset:0;opacity:.9}
body.pg .coin-fx .en-tglow{stroke:var(--orange);stroke-width:9;stroke-dasharray:1 2;opacity:0}
body.pg .coin-fx .en-lglow{stroke:var(--orange);stroke-width:12;stroke-dasharray:.4 3;opacity:0}
body.pg .coin-fx .en-glow{stroke:var(--orange);stroke-width:16;stroke-dasharray:.16 3;opacity:0}
body.pg .coin-fx .en-halo{stroke:var(--orange);stroke-width:8;stroke-dasharray:.06 3;opacity:0}
body.pg .coin-fx .en-head{stroke:var(--pr-hot);stroke-width:5;stroke-dasharray:.028 3;opacity:0}
body.pg .coin-fx .en-link{stroke:var(--pr-hot);stroke-width:4;stroke-dasharray:.4 3;opacity:0}
body.pg .coin-fx .en-rglow{stroke:var(--orange);stroke-width:18;stroke-dasharray:.12 3;opacity:0}
body.pg .coin-fx .en-rhalo{stroke:var(--orange);stroke-width:9;stroke-dasharray:.045 3;opacity:0}
body.pg .coin-fx .en-rhead{stroke:var(--pr-hot);stroke-width:5;stroke-dasharray:.02 3;opacity:0}
body.pg .coin-fx .en-pulse{stroke:var(--orange);stroke-width:14;opacity:0}
/* glow layers are blurred by CSS on their own compositor layer (SVG blur filters froze scrolling); the coin is ~0.6x its 957-unit viewBox, so these match the old stdDeviation 10 / 3.5 */
body.pg .coin-glow{will-change:filter;transform:translateZ(0)}
body.pg .coin-glow.cg-soft{filter:blur(6px)}
body.pg .coin-glow.cg-haze{filter:blur(2.2px)}

/* gift icon beside the $0.10 credit (the announcement bar's glyph, in an orange hairline tile) */
body.pg .ph-credit .gift-ic{align-self:center;display:grid;place-items:center;width:42px;height:42px;flex:none;
  border:1px solid color-mix(in srgb,var(--orange) 50%,transparent);background:color-mix(in srgb,var(--orange) 9%,transparent);color:var(--orange)}
body.pg .ph-credit .gift-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* light theme: the same orange, deepened a touch so it holds up on paper (as the theme does for orange text) */
html[data-theme=light] body.pg .ph-credit .gift-ic{color:color-mix(in srgb,var(--orange) 88%,var(--cream))}

@media (max-width:640px){
  body.pg .ph-credit .gift-ic{width:38px;height:38px}
  body.pg .ph-credit .gift-ic svg{width:19px;height:19px}
}

body.pg #catalog [hidden]{display:none!important}