/* ==========================================================
   Home refresh (Oct 2026): Scoop Passport section + perks band
   Brand: cocoa #6E2320 · pink #E86FB5 / #B8357E · teal #1AA7A3 / #0E7C79
          yellow #FBD46B · cream #FFF7EE · sticker outline + hard shadow
   ========================================================== */
.pp{position:relative;background:
   radial-gradient(60% 70% at 92% 10%,rgba(26,167,163,.10),transparent 60%),
   radial-gradient(50% 60% at 0% 100%,rgba(232,111,181,.10),transparent 60%),
   #FFF7EE;padding:clamp(64px,8vw,112px) 24px clamp(72px,9vw,120px);overflow:hidden}
.pp-wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center}
.pp-script{font-family:Caveat,cursive;font-weight:700;font-size:clamp(26px,2.4vw,34px);color:#B8357E;margin:0 0 6px;transform:rotate(-2deg);transform-origin:left}
.pp-title{font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:-.5px;font-size:clamp(64px,8vw,116px);margin:0 0 22px}
.pp-title span{display:block}
.pp-title span:nth-child(1){color:#6E2320}
.pp-title span:nth-child(2){color:#B8357E}
.pp-title span:nth-child(3){color:#0E7C79}
.pp-lead{font-family:Figtree,sans-serif;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:#5a3a33;max-width:30ch;margin:0 0 28px}
.pp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.pp-cta{display:inline-flex;align-items:center;gap:12px;background:#6E2320;color:#FFF7EE;text-decoration:none;font-family:Oswald,sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:18px;padding:18px 30px;border-radius:999px;border:2px solid #6E2320;box-shadow:4px 4px 0 #3a1614;transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s}
.pp-cta:hover{transform:translate(-1px,-2px);box-shadow:6px 6px 0 #3a1614}
.pp-cta:active{transform:translate(1px,1px) scale(.97);box-shadow:none}
.pp-how{background:none;border:0;padding:6px 0;font-family:Figtree,sans-serif;font-size:15px;color:#6E2320;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.pp-meta{margin:22px 0 0;font-family:Oswald,sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#8a6a60}
.pp-meta b{color:#0E7C79;font-weight:600}

.pp-card{position:relative;justify-self:center;width:100%;max-width:470px}
.pp-card .tc-real-card{transform:rotate(1.5deg);border:3px solid #6E2320;box-shadow:10px 10px 0 #6E2320;border-radius:28px}
.pp-card .tc-real-slot.filled img{opacity:0!important;animation:none!important;transform:scale(1.6) rotate(-18deg)!important;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.3,1)!important}
.pp-card .tc-real-slot.filled.is-stamped img{opacity:1!important;transform:none!important}
.pp-card .tc-real-slot.free{animation:none!important;transition:box-shadow .5s,transform .5s}
.pp-card .tc-real-slot.free.is-earned{box-shadow:0 0 22px 6px rgba(251,212,107,.75);transform:scale(1.06)}
.pp-badge{position:absolute;top:-22px;right:-14px;z-index:3;background:#FBD46B;color:#6E2320;border:2px solid #6E2320;border-radius:999px;padding:8px 14px;font-family:Oswald,sans-serif;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;box-shadow:3px 3px 0 #6E2320;transform:rotate(6deg)}
.pp-note{margin:26px auto 0;text-align:center;min-height:3.2em}
.pp-note-line{font-family:Oswald,sans-serif;font-weight:600;font-size:22px;color:#6E2320;margin:0}
.pp-note-detail{font-family:Figtree,sans-serif;font-size:15px;color:#5a3a33;margin:4px 0 0}
.pp-note.is-changing{animation:pp-fade .35s ease-out}
@keyframes pp-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pp-fine{max-width:1180px;margin:34px auto 0;font-family:Figtree,sans-serif;font-size:12px;color:#9a8378;text-align:center}

/* Perks band (replaces the oversized pink statement) */
.perks{background:#E86FB5;padding:clamp(64px,8vw,104px) 24px;position:relative;overflow:hidden}
.perks::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 15% 0%,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.perks-wrap{position:relative;max-width:1180px;margin:0 auto}
.perks-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:40px}
.perks-kicker{font-family:Caveat,cursive;font-weight:700;font-size:30px;color:#FFF7EE;margin:0 0 2px}
.perks-title{font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(40px,5vw,68px);line-height:.95;color:#FFF7EE;margin:0;text-shadow:3px 3px 0 #B8357E}
.perks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.perk{background:#FFF7EE;border:3px solid #6E2320;border-radius:22px;box-shadow:6px 6px 0 #6E2320;padding:28px 26px 30px;transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s}
.perk:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #6E2320}
.perk-num{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#1AA7A3;color:#FFF7EE;border:2px solid #6E2320;font-family:Oswald,sans-serif;font-weight:700;font-size:22px;margin-bottom:18px}
.perk:nth-child(2) .perk-num{background:#FBD46B;color:#6E2320}
.perk:nth-child(3) .perk-num{background:#B8357E}
.perk h3{font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;font-size:26px;line-height:1.05;color:#6E2320;margin:0 0 8px}
.perk p{font-family:Figtree,sans-serif;font-size:16px;line-height:1.55;color:#5a3a33;margin:0}
.perks .pp-cta{background:#6E2320}

@media(max-width:900px){
  .pp-wrap{grid-template-columns:1fr;text-align:center}
  .pp-script{transform-origin:center}
  .pp-lead{margin-inline:auto}
  .pp-actions{justify-content:center}
  .pp-card{max-width:420px;margin-top:10px}
  .perks-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .perks-head{justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .pp-card .tc-real-slot.filled img{opacity:1!important;transform:none!important;transition:none!important}
}
.pp-card .tc-real-slot.free{background:radial-gradient(circle at 50% 34%,#ffe79a,#FBD46B 62%,#f0b23c)!important;border-color:#FBD46B!important;opacity:1!important}
.pp-card .tc-real-slot.free .fl{color:#6E2320!important}

/* Smooth motion (Oct 23): one gentle pass when each section scrolls into view */
.pp-card .tc-real-card{transform:none}
.pp-badge{transform:none}
.pp-note.is-changing{animation:none}
.js-motion .pp-copy>*,.js-motion .pp-card,.js-motion .pp-fine,.js-motion .perks-head,.js-motion .perk{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.js-motion .is-in .pp-copy>*,.js-motion .is-in .pp-card,.js-motion .is-in .pp-fine,.js-motion .is-in .perks-head,.js-motion .is-in .perk{opacity:1;transform:none}
.js-motion .is-in .pp-copy>:nth-child(2){transition-delay:.08s}
.js-motion .is-in .pp-copy>:nth-child(3){transition-delay:.16s}
.js-motion .is-in .pp-copy>:nth-child(4){transition-delay:.24s}
.js-motion .is-in .pp-copy>:nth-child(5){transition-delay:.32s}
.js-motion .is-in .pp-card{transition-delay:.2s}
.js-motion .is-in .pp-fine{transition-delay:.4s}
.js-motion .is-in .perk:nth-child(1){transition-delay:.12s}
.js-motion .is-in .perk:nth-child(2){transition-delay:.22s}
.js-motion .is-in .perk:nth-child(3){transition-delay:.32s}
/* stamps: soft fade-and-settle, no spin */
.pp-card .tc-real-slot.filled img{opacity:0!important;animation:none!important;transform:scale(.82)!important;transition:opacity .5s ease-out,transform .6s cubic-bezier(.22,.61,.36,1)!important}
.pp-card .tc-real-slot.filled.is-stamped img{opacity:1!important;transform:none!important}
.pp-card .tc-real-slot.free{transition:box-shadow 1.2s ease,transform 1.2s ease}
.pp-card .tc-real-slot.free.is-earned{transform:none;box-shadow:0 0 16px 4px rgba(251,212,107,.6)}
/* hover: slow, gentle lift */
.perk,.pp-cta{transition:transform .25s ease,box-shadow .25s ease}
.js-motion .is-in .perk{transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease}
.perk:hover{transform:translateY(-3px)!important;box-shadow:7px 9px 0 #6E2320}
.pp-cta:hover{transform:translateY(-2px);box-shadow:5px 6px 0 #3a1614}
.pp-cta:active{transform:translateY(1px);box-shadow:2px 2px 0 #3a1614}
@media(prefers-reduced-motion:reduce){
  .js-motion .pp-copy>*,.js-motion .pp-card,.js-motion .pp-fine,.js-motion .perks-head,.js-motion .perk{opacity:1!important;transform:none!important;transition:none!important}
  .pp-card .tc-real-slot.filled img{opacity:1!important;transform:none!important;transition:none!important}
}

/* Stamp motion matched to the live Scoop Passport page (scoop-passport/): dissolve-in stamps, glowing free slot */
@keyframes pp-dissolveIn{0%{opacity:0;filter:blur(7px);transform:scale(1.35)}60%{opacity:1}100%{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes pp-freeGlow{0%,100%{box-shadow:0 0 9px 1px rgba(251,212,107,.5)}50%{box-shadow:0 0 24px 7px rgba(251,212,107,.9)}}
.pp-card .tc-real-slot.filled img{opacity:0!important;transform:none!important;transition:none!important;animation:none!important}
.pp-card .tc-real-slot.filled.is-stamped img{animation:pp-dissolveIn 1.1s cubic-bezier(.2,.7,.2,1) both!important;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.pp-card .tc-real-slot.free.is-earned{animation:pp-freeGlow 2.1s ease-in-out infinite!important;transform:none}
@media(prefers-reduced-motion:reduce){.pp-card .tc-real-slot.filled.is-stamped img{animation:none!important;opacity:1!important}.pp-card .tc-real-slot.free.is-earned{animation:none!important}}
