/* PCB Party Pass motion layer (2026-10-22). Loaded after pp.css. Vanilla CSS, transform/opacity only: the individual
   translate / scale / rotate properties compose with the theme's own `transform` rules (tilts, hover lifts), so nothing
   here fights pp.css. Gates: html.js (set before first paint in header.php) for the JS-marked states; everything is off
   under prefers-reduced-motion (pp.css already zeroes animation/transition; the static fallbacks are at the end).
   Nothing changes layout after first paint: hidden states are opacity/visibility, inserted nodes (dots, back-to-top) are
   fixed or sit in space reserved by CSS, and the phone photo carousel is pure CSS. */
:root{--spring:cubic-bezier(.34,1.56,.64,1);--spring-s:cubic-bezier(.22,1.25,.36,1);--out:cubic-bezier(.22,1,.36,1);--u:.1s}
@media(max-width:599px){:root{--u:.08s}}
@media(hover:hover){html.js .rv{transition:transform .2s var(--bounce),box-shadow .2s var(--ease)}}

/* ---------- 1. HOME HERO (CSS only, no JS needed): typing pills, bubbles pop, tape unrolls, H1 slams, CTA pulses once, stickers stamp, photo tosses in ---------- */
.hero .chat .bub{opacity:1;transform:none;animation:pmBub 1.1s var(--spring) backwards;transform-origin:0 100%}
.hero .chat .bub.out{transform-origin:100% 100%}
.hero .chat>:nth-child(1){animation-delay:calc(var(--u)*1)}
.hero .chat>:nth-child(2){animation-delay:calc(var(--u)*10)}
.hero .chat>:nth-child(3){animation-delay:calc(var(--u)*19)}
.hero .chat .typing{opacity:1;transform:none;animation:pmPop .5s var(--spring) backwards;animation-delay:calc(var(--u)*29);transform-origin:0 100%}
/* the typing pill lives in the bubble's ::before: the bubble is visibility:hidden while it "types", the pseudo stays visible */
.hero .chat .bub::before{content:"";position:absolute;left:0;bottom:0;width:60px;height:42px;border-radius:21px 21px 21px 6px;background-color:#fff;border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 var(--ink);visibility:visible;opacity:0;transform-origin:0 100%;
  background-image:radial-gradient(circle,var(--ink) 3.2px,transparent 3.9px),radial-gradient(circle,var(--blue) 3.2px,transparent 3.9px),radial-gradient(circle,var(--pink-d) 3.2px,transparent 3.9px);background-size:10px 10px;background-repeat:no-repeat;background-position:10px 50%,24px 50%,38px 50%;
  animation:pmPill 1.1s var(--out) backwards;animation-delay:inherit}
.hero .chat .bub.out::before{left:auto;right:0;border-radius:21px 21px 6px 21px;background-color:var(--blue);transform-origin:100% 100%;
  background-image:radial-gradient(circle,#fff 3.2px,transparent 3.9px),radial-gradient(circle,var(--lime) 3.2px,transparent 3.9px),radial-gradient(circle,#fff 3.2px,transparent 3.9px)}
@media(max-width:599px){.hero .chat .bub::before{width:50px;height:34px;box-shadow:2px 2px 0 var(--ink);background-position:8px 50%,20px 50%,32px 50%}}
.hero .kick{animation:pmPeel .6s var(--spring) backwards;animation-delay:calc(var(--u)*3)}
.hero h1{animation:pmSlam .6s var(--out) backwards;animation-delay:calc(var(--u)*4);transform-origin:0 70%}
.hero .lead{animation:pmUp .6s var(--out) backwards;animation-delay:calc(var(--u)*5.5)}
.hero .btn-row{animation:pmUp .6s var(--out) backwards;animation-delay:calc(var(--u)*6.5)}
.hero .btn-row .btn-blue{animation:pmPulse .7s var(--spring) backwards;animation-delay:calc(var(--u)*15)}
.hero .stickers .sticker{animation:pmStamp .5s var(--spring) backwards;animation-delay:calc(var(--u)*7)}
.hero .stickers .sticker:nth-child(2){animation-delay:calc(var(--u)*8.5)}
.hero .stickers .sticker:nth-child(3){animation-delay:calc(var(--u)*10)}
.hero .polaroid,.hero-s .polaroid,.post-h .polaroid{animation:pmToss .8s var(--spring-s) backwards;animation-delay:calc(var(--u)*2)}
/* the home hero's photo pile (.pstack): back photo lands first, then the middle, then the front */
.hero .pstack .polaroid:nth-child(1){animation-delay:calc(var(--u)*1)}
.hero .pstack .polaroid:nth-child(2){animation-delay:calc(var(--u)*3)}
.hero .pstack .polaroid:nth-child(3){animation-delay:calc(var(--u)*5)}
.hero::after{animation:pmTape .9s var(--out) backwards;animation-delay:calc(var(--u)*1)}
/* sub-page and post heroes: tape peels, H1 slams, lead and buttons rise */
.hero-s .kick,.post-h .kick{animation:pmPeel .6s var(--spring) backwards;animation-delay:calc(var(--u)*0.5)}
.hero-s .h-page,.post-h .h-post{animation:pmSlam .6s var(--out) backwards;animation-delay:calc(var(--u)*1.5);transform-origin:0 70%}
.hero-s .lead,.post-h .lead{animation:pmUp .6s var(--out) backwards;animation-delay:calc(var(--u)*3)}
.hero-s .btn-row,.hero-s .ck-tools,.post-h .byline{animation:pmUp .6s var(--out) backwards;animation-delay:calc(var(--u)*4)}

/* ---------- 2. SCROLL REVEALS: JS marks only elements measured below the viewport with .pm-rv (+ data-pm variant, --pm-i stagger),
   IntersectionObserver adds .is-in, the classes are removed again after the animation so the DOM returns to the theme's own CSS ---------- */
html.js .rv,html.js .rv.in{opacity:1;transform:none}
html.js .pm-rv{opacity:0}
html.js .pm-rv.is-in{animation:pmUp .65s var(--spring-s) both;animation-delay:var(--pm-i,0ms)}
html.js .pm-rv[data-pm=peel].is-in{animation-name:pmPeel;animation-timing-function:var(--spring)}
html.js .pm-rv[data-pm=stamp].is-in{animation-name:pmStamp;animation-duration:.5s;animation-timing-function:var(--spring)}
html.js .pm-rv[data-pm=toss].is-in{animation-name:pmToss;animation-duration:.8s}
/* keep the theme's hover lift / open lift on revealed elements (pp.css's .js .rv.in{transform:none} out-specifies them) */
@media(hover:hover){html.js a.panel.rv:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:var(--sh-blue)}}
html.js .faq details.rv[open]{transform:translate(-2px,-2px)}
/* tape strips peel in from the left when their section arrives (JS: .pm-tape below the fold, .pm-seen on entry) */
html.js .pm-tape:not(.pm-seen)::before,html.js .pm-tape:not(.pm-seen)::after{scale:0 1}
html.js .pm-tape.pm-seen::before,html.js .pm-tape.pm-seen::after{transform-origin:0 50%;animation:pmTape .8s var(--out) backwards}
html.js .pm-tape.pm-seen::after{animation-delay:.15s}

/* ---------- 3. STICKER ACCENTS ROTATE WITH SCROLL (compositor-only, scroll-driven; browsers without it keep the static tilt) ---------- */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .lvl .sticker,.steps>li::before,.ck-sec h2 .n,.pcard-b .kick,.polaroid::before{animation:pmSpin linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .hero .stickers .sticker{animation:pmStamp .5s var(--spring) backwards,pmSpinRoot linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 700px}
    .hero .stickers .sticker:nth-child(2){animation-delay:calc(var(--u)*8.5),0s}
    .hero .stickers .sticker:nth-child(3){animation-delay:calc(var(--u)*10),0s}
    @media(hover:hover){
      .lvl .sticker:hover{animation:pmSpin linear both,pmJiggle .5s var(--out);animation-timeline:view(),auto;animation-range:entry 0% exit 100%,normal}
      .hero .stickers .sticker:hover{animation:pmJiggle .5s var(--out),pmSpinRoot linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 700px}
    }
  }
}

/* ---------- 4. PHOTOS: 3D tilt + glare on pointer (desktop), snap carousel + dots on phones, marquee for the headless strips (desktop) ---------- */
@media(hover:hover) and (pointer:fine){
  .photo-row,.hero-g,.post-hg,.pgrid,.pm-track{perspective:1100px}
  html.js .polaroid,html.js .pcard a{rotate:var(--ax,0) var(--ay,1) 0 var(--ang,0deg);transition:rotate .35s var(--out)}
  html.js .pcard a{transition:transform .2s var(--bounce),box-shadow .2s var(--ease),rotate .35s var(--out)}
  html.js .polaroid::after{content:"";position:absolute;left:9px;right:9px;top:9px;aspect-ratio:4/5;border-radius:16px;pointer-events:none;z-index:1;opacity:0;transition:opacity .3s;
    background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.5),rgba(255,255,255,0) 62%)}
  html.js .polaroid:hover::after{opacity:1}
  .polaroid .sticker{z-index:2}
  .pgal{perspective:1100px}
  html.js .pcardp{position:relative;rotate:var(--ax,0) var(--ay,1) 0 var(--ang,0deg);transition:rotate .35s var(--out)}
  html.js .pcardp::after{content:"";position:absolute;left:7px;right:7px;top:7px;aspect-ratio:4/5;border-radius:9px;pointer-events:none;opacity:0;transition:opacity .3s;
    background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.5),rgba(255,255,255,0) 62%)}
  html.js .pcardp:hover::after{opacity:1}
}
/* photo-backed band (.pband): the photo drifts behind the ink scrim as the band crosses the viewport (scroll-driven, compositor only).
   overflow:clip instead of hidden so the band is not a scroll container and view() measures against the page. */
@supports (animation-timeline:view()) and (overflow:clip){
  @media(prefers-reduced-motion:no-preference){
    .pband{overflow:clip}
    .pband .bg{scale:1.18;animation:pmDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
@media(hover:hover) and (pointer:fine){html.js .pband .btn:hover{animation:pmJiggle .5s var(--out)}}
@media(max-width:640px){
  html.js .photo-row{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px 30px;padding:18px 16px 12px;scroll-padding:0 16px}
  html.js .photo-row::-webkit-scrollbar{display:none}
  html.js .photo-row>.polaroid{flex:0 0 min(80%,320px);max-width:none;scroll-snap-align:start;margin:0}
  .pm-dots{display:flex;justify-content:center;align-items:center;gap:8px;height:30px;margin:-30px 0 0}
  .pm-dots i{display:block;width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:.22;transition:scale .25s var(--spring),opacity .2s,background .2s}
  .pm-dots i.on{opacity:1;background:var(--pink);box-shadow:0 0 0 1.5px var(--ink);scale:1.35}
}
@media(min-width:641px){.pm-dots{display:none}}
@media(min-width:960px){
  .pm-marquee{display:flex;gap:0;overflow:hidden;padding:24px 0 14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .pm-track{display:flex;gap:0;width:max-content;animation:pmMarq var(--pm-marq,42s) linear infinite}
  .pm-track>.polaroid{flex:0 0 300px;width:300px;margin:0 26px 0 0}
  .pm-marquee:hover .pm-track,.pm-marquee:focus-within .pm-track{animation-play-state:paused}
}

/* ---------- 5. TOOLS: crew avatars pop when a person is added, recommended-card stickers re-stamp, totals bump (count-ups are JS), Copied! is a bubble, checkmarks tick, chat-kit messages "send" ---------- */
html.js .mate{animation:none}
html.js .mate.is-new{animation:pmMate .55s var(--spring) backwards}
html.js .mate.is-new .ava{animation:pmStamp .5s var(--spring) backwards;animation-delay:.12s}
.rec .sticker.is-new{animation:pmStamp .45s var(--spring) backwards}
.tot.pm-bump,.ck-count.pm-bump{animation:pmBump .4s var(--spring)}
.stepper output.pm-bump{animation:pmBump .3s var(--spring)}
.tot .big,.out-rows li b,#split-pot,.stepper output,.ck-count{font-variant-numeric:tabular-nums}
.copied{position:relative}
.copied::after{content:"";position:absolute;left:12px;bottom:-7px;width:10px;height:10px;background:inherit;border:2px solid var(--ink);border-top:0;border-left:0;transform:rotate(45deg) skew(10deg,10deg)}
.copied.on{animation:pmCopied .55s var(--spring) backwards}
.msg .bub.pm-sent{animation:pmSend .65s var(--out)}
.ck-list input.pm-tick:checked{animation:pmBox .45s var(--spring)}
.ck-list input.pm-tick:checked::after{animation:pmTick .4s var(--spring) backwards;animation-delay:.06s}

/* ---------- 6. BUTTONS, NAV, HEADER, BACK TO TOP ---------- */
.btn{transition:transform .18s var(--bounce),box-shadow .18s var(--ease),background .18s,scale .15s var(--spring)}
.btn:active{scale:.95}
.chip{transition:transform .12s var(--bounce),background .15s,scale .15s var(--spring)}
.chip:active{scale:.92}
.stepper button,.icon-b{transition:transform .12s,background .15s,scale .15s var(--spring)}
.stepper button:active,.icon-b:active{scale:.86}
.nl{transition:background .15s,transform .15s var(--bounce),scale .15s var(--spring)}
.nl:active{scale:.94}
.dl{transition:scale .15s var(--spring)}
.dl:active{scale:.97}
.menu-b{transition:transform .15s,box-shadow .15s,scale .15s var(--spring)}
.menu-b:active{scale:.92}
.wk,.reps a{transition:transform .18s var(--bounce),box-shadow .18s var(--ease),scale .18s var(--spring)}
.wk:active,.reps a:active,.pcard a:active,a.panel:active{scale:.97}
.faq details:not([open]) summary:active::after{scale:.85}
.ck-list input:checked+span{transition:color .3s}
@media(hover:hover){
  .sticker:hover{animation:pmWobble .6s var(--out)}
  .kick:hover{animation:pmWobble .6s var(--out)}
}
@media(min-width:1000px){
  .nl::after{content:"";position:absolute;left:9px;right:9px;bottom:5px;height:3px;border-radius:3px;background:var(--ink);transform:scaleX(0);transform-origin:100% 50%;transition:transform .32s var(--out)}
  .nl:hover::after,.nl:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
  .nl.is-cur::after{display:none}
}
/* mobile drawer: items cascade in each time it opens */
.drawer:not([hidden]) .dl,.drawer:not([hidden]) .btn{animation:pmDrawer .45s var(--spring-s) backwards;animation-delay:calc(var(--i,0)*35ms)}
.dnav>:nth-child(2){--i:1}.dnav>:nth-child(3){--i:2}.dnav>:nth-child(4){--i:3}.dnav>:nth-child(5){--i:4}.dnav>:nth-child(6){--i:5}.dnav>:nth-child(7){--i:6}.dnav>:nth-child(8){--i:7}.dnav>:nth-child(9){--i:8}.dnav>:nth-child(10){--i:9}.dnav>:nth-child(11){--i:10}.dnav>:nth-child(n+12){--i:11}
/* sticky header goes compact on scroll: it slides up by its tape stripe and the logo scales (transforms only: the header box, and the page under it, never move) */
.site-h{transition:translate .35s var(--out)}
.site-h::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none;background:linear-gradient(rgba(23,18,31,.18),rgba(23,18,31,0));opacity:0;transition:opacity .3s}
.site-h .logo-img{transform-origin:0 50%;transition:scale .35s var(--out)}
html.pm-scrolled .site-h{translate:0 -10px}
html.pm-scrolled .site-h::after{opacity:1}
html.pm-scrolled .site-h .logo-img{scale:.86}
/* back-to-top chip (JS inserts it; fixed, so no layout) */
.pm-top{position:fixed;right:16px;bottom:16px;z-index:40;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--lime);color:var(--ink);border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:800 .78rem/1 var(--fd);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;opacity:0;translate:0 24px;pointer-events:none;transition:opacity .3s,translate .4s var(--spring),scale .15s var(--spring)}
.pm-top.on{opacity:1;translate:0;pointer-events:auto}
.pm-top:hover{color:var(--ink);background:#D4FF4D}
.pm-top:active{scale:.94}

/* ---------- 7. PAGE TRANSITIONS + SMOOTH ANCHORS (progressive; cross-document View Transitions in Chrome/Edge 126+) ---------- */
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}
  .site-h{view-transition-name:pp-header}
}

/* ---------- keyframes ---------- */
@keyframes pmBub{0%,57%{visibility:hidden;opacity:1;scale:1}58%{visibility:hidden;opacity:0;scale:.5}59%{visibility:visible;opacity:0;scale:.5}100%{visibility:visible;opacity:1;scale:1}}
@keyframes pmPill{0%{opacity:0;scale:.5}8%{opacity:1;scale:1}30%{scale:1.06}50%{opacity:1;scale:1}56%,100%{opacity:0;scale:.7}}
@keyframes pmPop{from{opacity:0;scale:.5}to{opacity:1;scale:1}}
@keyframes pmPeel{from{opacity:0;rotate:-8deg;translate:-6px 10px;scale:.85}to{opacity:1;rotate:0deg;translate:0 0;scale:1}}
@keyframes pmSlam{0%{opacity:0;scale:1.35;rotate:-2deg}55%{opacity:1;scale:.96;rotate:.5deg}78%{scale:1.02;rotate:-.2deg}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes pmUp{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes pmPulse{0%,100%{scale:1}40%{scale:1.08}70%{scale:.98}}
@keyframes pmStamp{from{opacity:0;scale:1.8}to{opacity:1;scale:1}}
@keyframes pmToss{from{opacity:0;translate:30px 70px;rotate:14deg;scale:.85}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes pmTape{from{scale:0 1}to{scale:1 1}}
@keyframes pmSpin{from{rotate:-7deg}to{rotate:7deg}}
@keyframes pmSpinRoot{from{rotate:0deg}to{rotate:-14deg}}
@keyframes pmMarq{to{translate:-50% 0}}
@keyframes pmDrift{from{translate:0 -6%}to{translate:0 6%}}
@keyframes pmMate{from{opacity:0;translate:0 14px;scale:.92}to{opacity:1;translate:0 0;scale:1}}
@keyframes pmBump{0%,100%{scale:1}35%{scale:1.04}70%{scale:.99}}
@keyframes pmCopied{from{opacity:0;scale:.4;rotate:-10deg}to{opacity:1;scale:1;rotate:0deg}}
@keyframes pmSend{0%{translate:0 0;scale:1;opacity:1}38%{translate:30px -16px;scale:.95;opacity:.5}39%{translate:-16px 10px;scale:.96;opacity:0}100%{translate:0 0;scale:1;opacity:1}}
@keyframes pmBox{0%{scale:1}40%{scale:1.22;rotate:-7deg}100%{scale:1;rotate:0deg}}
@keyframes pmTick{from{scale:0;opacity:0}to{scale:1;opacity:1}}
@keyframes pmWobble{0%,100%{rotate:0deg}25%{rotate:5deg}50%{rotate:-4deg}75%{rotate:2deg}}
@keyframes pmJiggle{0%,100%{scale:1}30%{scale:1.12}60%{scale:.96}}
@keyframes pmDrawer{from{opacity:0;translate:-14px 0}to{opacity:1;translate:0 0}}

/* ---------- static fallbacks: reduced motion and print ---------- */
@media(prefers-reduced-motion:reduce){
  html.js .pm-rv{opacity:1!important}
  html.js .pm-tape:not(.pm-seen)::before,html.js .pm-tape:not(.pm-seen)::after{scale:none!important}
  .hero .chat .bub{visibility:visible!important}
  .hero .chat .bub::before{opacity:0!important}
  html.js .polaroid::after{display:none}
  html.pm-scrolled .site-h{translate:none}
  html.pm-scrolled .site-h .logo-img{scale:none}
  .pm-top.on{translate:none}
}
@media print{.pm-top,.pm-dots{display:none!important}html.js .pm-rv{opacity:1!important}.pm-track{animation:none!important}.hero .chat .bub{visibility:visible!important}}