/* Pizza Marketing: hero email deck + scroll scene (a literal needle swings up as win-back, birthday and streak emails go out) */

/* ---------- hero ---------- */
.hero-pizzamarketing{position:relative;max-width:520px;margin:0 auto;padding:56px 0 24px;font-size:clamp(11.5px,3.5vw,14px)}
.hero-pizzamarketing::before{content:"";position:absolute;left:50%;top:50%;width:110%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(245,179,1,.3),rgba(245,179,1,.06) 55%,transparent);pointer-events:none}
.hp-deck{position:relative;display:grid;width:min(25em,86%);margin:0 auto 0 4%}
.hp-mail{grid-area:1/1;position:relative;background:#fffdf8;color:#231a00;border-radius:1.3em;padding:1.1em;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 40px 70px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.06);transform-origin:50% 0}
.hp-mh{display:flex;justify-content:space-between;align-items:center;gap:.6em;margin-bottom:.8em}
.hp-from{display:flex;align-items:center;gap:.6em;line-height:1.15}
.hp-from i{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;background:#231a00;color:#f5b301;font:800 1.1em/1 var(--display);font-style:normal}
.hp-from b{display:block;font-size:.92em}
.hp-from small{color:#7d7566;font-size:.78em}
.hp-tag{font-size:.72em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.35em .7em;border-radius:99px;background:#f5b301;color:#231a00}
.hp-subj{font:800 1.75em/1 var(--display);text-transform:uppercase;margin-bottom:.6em}
.hp-img{border-radius:.9em;overflow:hidden;aspect-ratio:16/8.4;margin-bottom:.75em}
.hp-img img{display:block;width:100%;height:100%;object-fit:cover}
.hp-txt{color:#5b5446;font-size:.95em;line-height:1.45;margin-bottom:.9em}
.hp-btn{display:inline-flex;align-items:center;height:2.8em;padding:0 1.3em;border-radius:99px;background:#231a00;color:#ffd257;font-weight:800;font-size:.92em}
.hp-gauge{position:absolute;z-index:4;right:0;bottom:-2%;width:10.5em;padding:.8em .8em .7em;border-radius:1.2em;background:rgba(20,17,8,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 50px -20px rgba(0,0,0,.8);color:#fff}
.hp-gauge svg{display:block;width:100%;height:auto}
.hp-arc{stroke-dasharray:100;stroke-dashoffset:80}
.hp-needle{transform-box:view-box;transform-origin:60px 64px;transform:rotate(-60deg)}
.hp-gauge p{display:flex;justify-content:space-between;align-items:baseline;margin-top:.2em}
.hp-gauge small{font-size:.72em;color:#bfb8a6;font-weight:600}
.hp-gauge b{display:grid;font:800 1.5em/1 var(--display);color:#f5b301}
.hp-gauge b span{grid-area:1/1;text-align:right}
.hp-gauge .g2,.hp-gauge .g3{opacity:0}
@media(min-width:900px){.hero-pizzamarketing{font-size:14.5px;padding-top:70px}.hp-deck{margin-left:6%}.hp-gauge{right:-2%;bottom:4%}}

@media(prefers-reduced-motion:no-preference){
  .hp-mail{animation:hp-cycle 12s cubic-bezier(.5,0,.2,1) infinite}
  .hp-mail.m2{animation-delay:-8s}.hp-mail.m3{animation-delay:-4s}
  .hp-needle{animation:hp-needle 12s cubic-bezier(.3,1.6,.5,1) infinite}
  .hp-arc{animation:hp-arc 12s cubic-bezier(.3,1.3,.5,1) infinite}
  .hp-gauge .g1{animation:hp-g1 12s ease infinite}
  .hp-gauge .g2{animation:hp-g2 12s ease infinite}
  .hp-gauge .g3{animation:hp-g3 12s ease infinite}
}
@media(prefers-reduced-motion:reduce){
  .hp-mail.m2{transform:translateY(-1.3em) scale(.93);filter:brightness(.78);z-index:2}
  .hp-mail.m3{transform:translateY(-2.6em) scale(.86);filter:brightness(.55);z-index:1}
  .hp-mail.m1{z-index:3}
  .hp-needle{transform:rotate(55deg)}.hp-arc{stroke-dashoffset:18}
  .hp-gauge .g1{opacity:0}.hp-gauge .g3{opacity:1}
}
@keyframes hp-cycle{
  0%,26%{transform:none;opacity:1;filter:none;z-index:3}
  33%{transform:translate(70%,-30%) rotate(14deg) scale(.8);opacity:0;z-index:3}
  34%{transform:translateY(-2.6em) scale(.86);opacity:0;z-index:1}
  42%,60%{transform:translateY(-2.6em) scale(.86);opacity:1;filter:brightness(.55);z-index:1}
  66%,93%{transform:translateY(-1.3em) scale(.93);opacity:1;filter:brightness(.78);z-index:2}
  100%{transform:none;opacity:1;filter:none;z-index:3}}
@keyframes hp-needle{0%,28%{transform:rotate(-60deg)}34%,61%{transform:rotate(-4deg)}67%,94%{transform:rotate(56deg)}100%{transform:rotate(-60deg)}}
@keyframes hp-arc{0%,28%{stroke-dashoffset:80}34%,61%{stroke-dashoffset:48}67%,94%{stroke-dashoffset:16}100%{stroke-dashoffset:80}}
@keyframes hp-g1{0%,28%{opacity:1}32%,96%{opacity:0}100%{opacity:1}}
@keyframes hp-g2{0%,29%{opacity:0}33%,61%{opacity:1}65%,100%{opacity:0}}
@keyframes hp-g3{0%,62%{opacity:0}66%,94%{opacity:1}98%,100%{opacity:0}}

/* ---------- scene ---------- */
.scene-pizzamarketing{--ink-w:#231a00;background:
  radial-gradient(50% 45% at 70% 40%,rgba(245,179,1,.28),transparent 70%),
  linear-gradient(180deg,#f7f1e1,#f3ead3);color:var(--ink-w);overflow-x:clip;border-top:1px solid #e6dcc2}
.sp-track{height:340vh}
.sp-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr;padding:82px 16px 14px;max-width:1180px;margin:0 auto}
.sp-copy{position:relative;z-index:3}
.sp-copy .kicker{color:#8a6200;margin-bottom:10px}
.sp-beats{list-style:none;margin:0;padding:0;display:grid}
.sp-beats li{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.sp-beats li.on{opacity:1;transform:none}
.sp-beats h3{font:800 clamp(2.2rem,8.6vw,4.4rem)/.94 var(--display);text-transform:uppercase;margin-bottom:10px}
.sp-beats mark{background:linear-gradient(180deg,transparent 58%,#f5b301 58%,#f5b301 92%,transparent 92%);color:inherit;padding:0 .06em}
.sp-beats p{color:#5b5446;font-size:1.02rem;max-width:38ch}
.sp-dots{display:flex;gap:6px;margin-top:14px}
.sp-dots i{width:22px;height:4px;border-radius:2px;background:rgba(35,26,0,.15);transition:background .3s,width .3s}
.sp-dots i.on{background:#231a00;width:40px}
.sp-vis{position:relative;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
.sp-gauge{position:relative;width:min(100%,560px)}
.sp-svg{display:block;width:100%;height:auto;overflow:visible}
.sp-lab{font:700 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;fill:#8b826d}
.sp-needle{transform-box:view-box;transform-origin:200px 210px;transform:rotate(-80deg);filter:drop-shadow(0 6px 6px rgba(35,26,0,.3))}
.sp-tick{stroke:#c9bfa5;stroke-width:2;stroke-linecap:round}
.sp-tick.big{stroke:#8b826d;stroke-width:3}
.sp-dot{fill:#d9d0b8;transition:fill .35s}
.sp-dot.on{fill:#f5b301}
.sp-ring{fill:none;stroke:#f5b301;stroke-width:2;opacity:0}
.sp-read{display:flex;justify-content:space-between;align-items:flex-end;margin-top:-4px;padding:0 4%}
.sp-read small{display:block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8b826d}
.sp-read b{font:800 clamp(2.2rem,8vw,3.4rem)/1 var(--display)}
.sp-back{text-align:right}
.sp-back b{color:#231a00;background:#f5b301;padding:0 .18em;border-radius:6px}
.sp-outbox{width:min(100%,460px);background:#fffdf8;border-radius:20px;box-shadow:0 30px 60px -30px rgba(35,26,0,.5),0 0 0 1px rgba(35,26,0,.07);padding:12px 12px 6px}
.sp-ob-h{display:flex;justify-content:space-between;align-items:baseline;padding:2px 6px 8px;border-bottom:1px solid #efe8d6}
.sp-ob-h b{font:800 1.15rem/1 var(--display);text-transform:uppercase}
.sp-next{font-size:.78rem;color:#8b826d;font-weight:600}
.sp-outbox ul{list-style:none;margin:0;padding:0}
.sp-row{position:relative;display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid #f3eddf}
.sp-row:last-child{border-bottom:0}
.sp-row .ic{flex:none;width:34px;height:34px;border-radius:10px;background:#f4eedd center/58% no-repeat}
.sp-row.r0 .ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v12H3z' fill='none' stroke='%23231a00' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M3 6l9 7 9-7' fill='none' stroke='%23231a00' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sp-row.r1 .ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h16v9H4zM2.5 7.5h19V11h-19zM12 7.5V20' fill='none' stroke='%23231a00' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 7.5C10 3 6.5 4.5 8 7.5M12 7.5c2-4.5 5.5-3 4 0' fill='none' stroke='%23231a00' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.sp-row.r2 .ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c1 3.5 5.5 5.5 5.5 10.5a5.5 5.5 0 01-11 0c0-2.4 1.2-3.9 2.3-5 .2 1.8 1 2.8 2 3.2C10.5 8 11 5 12 2.5z' fill='none' stroke='%23231a00' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sp-row p{flex:1;min-width:0;line-height:1.2}
.sp-row p b{display:block;font-size:.92rem}
.sp-row p span{display:block;font-size:.8rem;color:#7d7566;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-row .st{flex:none;font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:99px;background:#f1ead8;color:#7d7566;transition:background .3s,color .3s}
.sp-row.sending .st{background:#231a00;color:#f5b301}
.sp-row.sent .st{background:#f5b301;color:#231a00}
.sp-row .bar{position:absolute;left:50px;right:6px;bottom:3px;height:2px;border-radius:2px;background:transparent;overflow:hidden}
.sp-row .bar i{display:block;height:100%;width:100%;background:#f5b301;transform-origin:0 50%;transform:scaleX(0)}
.sp-fly{position:absolute;inset:0;pointer-events:none}
.sp-env{position:absolute;left:0;top:0;width:40px;height:28px;border-radius:4px;background:#fffdf8;box-shadow:0 0 0 1.5px #231a00 inset,0 10px 18px -6px rgba(35,26,0,.5);opacity:0;will-change:transform,opacity}
.sp-env::before{content:"";position:absolute;left:3px;right:3px;top:2px;height:15px;background:linear-gradient(to bottom right,transparent 49%,#231a00 50%,#231a00 56%,transparent 57%) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent 49%,#231a00 50%,#231a00 56%,transparent 57%) right/50% 100% no-repeat}
.sp-env.t1{background:#f5b301}
.sp-env.t2{background:#ffe08a}

@media(min-width:900px){
  .sp-track{height:420vh}
  .sp-stage{grid-template-rows:1fr;grid-template-columns:.85fr 1.15fr;align-items:center;gap:40px;padding:80px 16px 16px}
  .sp-vis{height:100%;gap:18px}
  .sp-beats p{font-size:1.18rem}
}
@media(max-width:899px){
  .sp-gauge{width:min(100%,46svh)}
  .sp-row{padding:7px 4px}
  .sp-row .ic{width:28px;height:28px}
}
/* reduced motion: static final state */
.scene-pizzamarketing.rm .sp-track{height:auto}
.scene-pizzamarketing.rm .sp-stage{position:relative;height:auto;padding-top:56px;padding-bottom:56px;gap:28px}
.scene-pizzamarketing.rm .sp-beats{gap:22px}
.scene-pizzamarketing.rm .sp-beats li{grid-area:auto;opacity:1;transform:none}
.scene-pizzamarketing.rm .sp-beats h3{font-size:clamp(2rem,7vw,3rem)}
.scene-pizzamarketing.rm .sp-dots{display:none}