/* Pizza Clout: wall-of-posts hero + post -> points -> clout map -> leaderboard */
.hero-clout{position:relative;width:100%;max-width:560px;margin:0 auto}
.hero-clout .hc-frame{position:relative;aspect-ratio:1/1.05;border-radius:28px;overflow:hidden;background:#1b0a13;
  box-shadow:0 40px 90px -30px rgba(230,25,122,.7),0 0 0 1px rgba(255,140,190,.18)}
.hero-clout .hc-wall{position:absolute;left:-18%;right:-18%;top:-22%;bottom:-22%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transform:rotate(-9deg) skewY(2deg)}
.hero-clout .hc-col{display:flex;flex-direction:column;animation:hc-down 26s linear infinite}
.hero-clout .hc-up{animation:hc-up 22s linear infinite;margin-top:-30%}
.hero-clout .hc-set{display:flex;flex-direction:column;gap:12px;padding-bottom:12px}
.hero-clout .hc-tile{position:relative;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:#3a1527;box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.hero-clout .hc-tile img,.hero-clout .hc-tile video{width:100%;height:100%;object-fit:cover;display:block}
.hero-clout .hc-tile figcaption{position:absolute;left:8px;right:8px;bottom:8px;display:flex;justify-content:space-between;align-items:center;font:600 .66rem/1 var(--sans);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.hero-clout .hc-tile figcaption span{background:#e6197a;color:#fff;text-shadow:none;padding:4px 6px;border-radius:999px;font-weight:800}
@keyframes hc-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes hc-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.hero-clout .hc-veil{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,transparent 30%,rgba(27,10,19,.75)),linear-gradient(180deg,rgba(27,10,19,.4),transparent 30%,transparent 70%,rgba(27,10,19,.7))}
.hero-clout .hc-toast{position:absolute;z-index:2;display:flex;gap:10px;align-items:center;max-width:78%;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(255,255,255,.95);color:#1a0b12;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);font:500 .76rem/1.3 var(--sans);opacity:0;animation:hc-toast 9s infinite cubic-bezier(.2,.8,.2,1)}
.hero-clout .hc-toast i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#e6197a;color:#fff}
.hero-clout .hc-toast i svg{width:18px;height:18px}
.hero-clout .hc-toast b{display:block;font-weight:700;font-size:.82rem}
.hero-clout .hc-toast span{color:#7a5b68}
.hero-clout .hc-t1{left:6%;top:12%}
.hero-clout .hc-t2{right:5%;top:46%;animation-delay:3s}
.hero-clout .hc-t2 i{background:#ff9a3d}
.hero-clout .hc-t3{left:9%;bottom:10%;animation-delay:6s}
.hero-clout .hc-t3 i{background:#1a0b12}
@keyframes hc-toast{0%{opacity:0;transform:translateY(16px) scale(.94)}5%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-10px) scale(.97)}}

/* ---- scene ---- */
.scene-clout{position:relative;background:#fff6fa;color:#1a0b12}
.scene-clout .cs-track{height:420vh;position:relative}
.scene-clout .cs-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(60% 50% at 70% 40%,rgba(230,25,122,.16),transparent 70%),radial-gradient(50% 50% at 10% 90%,rgba(255,154,61,.14),transparent 70%),#fff6fa}
.scene-clout .cs-map{position:absolute;inset:0;opacity:0;transform-origin:50% 50%;will-change:transform,opacity}
.scene-clout .cs-map-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.92) brightness(1.06) contrast(.95)}
.scene-clout .cs-waves{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene-clout .cs-drop{position:absolute;width:44px;height:60px;margin:-60px 0 0 -22px;opacity:0;filter:drop-shadow(0 10px 14px rgba(230,25,122,.45))}
.scene-clout .cs-drop.go{animation:cs-fall .95s cubic-bezier(.55,0,1,.45) forwards}
@keyframes cs-fall{0%{opacity:1;transform:translateY(-260px) scale(.8)}76%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(8px) scale(1.5,.35)}}
.scene-clout .cs-tag{position:absolute;transform:translate(-50%,-150%) scale(.9);opacity:0;white-space:nowrap;padding:7px 12px;border-radius:999px;background:#1a0b12;color:#fff;font:700 .78rem/1 var(--sans);transition:opacity .4s,transform .4s;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.scene-clout .cs-tag em{font-style:normal;color:#ff7ab8;font-weight:600}
.scene-clout .cs-tag.on{opacity:1;transform:translate(-50%,-190%)}
.scene-clout .cs-meter{position:absolute;right:16px;top:78px;opacity:0;visibility:hidden;width:200px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 20px 40px -18px rgba(80,10,40,.45)}
.scene-clout .cs-meter small{display:flex;justify-content:space-between;font:700 .66rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#7a5b68}
.scene-clout .cs-meter small em{font-style:normal;color:#e6197a}
.scene-clout .cs-meter b{display:block;font:800 2.2rem/1.05 var(--display);color:#1a0b12;font-variant-numeric:tabular-nums;margin:4px 0}
.scene-clout .cs-meter svg{display:block;width:100%;height:30px}
.scene-clout .cs-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,246,250,.7),transparent 18%,transparent 50%,rgba(255,246,250,.96) 76%)}

.scene-clout .cs-phone{position:absolute;left:50%;top:40%;width:min(232px,58vw);aspect-ratio:9/18.6;transform:translate(-50%,-50%);border-radius:40px;padding:9px;background:#140910;box-shadow:0 50px 90px -30px rgba(90,10,50,.6),0 0 0 1.5px #3a2230,inset 0 0 0 1px rgba(255,255,255,.08);will-change:transform,opacity;z-index:2}
.scene-clout .cs-screen{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:#fff}
.scene-clout .cs-scr{position:absolute;inset:0;display:flex;flex-direction:column;padding:34px 12px 14px}
.scene-clout .cs-pts{opacity:0}
.scene-clout .cs-bar{display:flex;justify-content:space-between;align-items:center;font:800 .95rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px}
.scene-clout .cs-bar em{font:700 .66rem/1 var(--sans);font-style:normal;letter-spacing:.04em;text-transform:none;color:#fff;background:#e6197a;padding:5px 8px;border-radius:999px}
.scene-clout .cs-view{position:relative;flex:1;border-radius:20px;overflow:hidden;background:#3a1527}
.scene-clout .cs-view video{width:100%;height:100%;object-fit:cover;display:block}
.scene-clout .cs-rec{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font:600 .66rem/1 var(--sans)}
.scene-clout .cs-rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff3b6b}
.scene-clout .cs-flash{position:absolute;inset:0;background:#fff;opacity:0}
.scene-clout .cs-shut{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 0;font:600 .66rem/1 var(--sans);color:#7a5b68}
.scene-clout .cs-btn{width:54px;height:54px;display:block}
.scene-clout .cs-btn svg{width:100%;height:100%}
.scene-clout .cs-posted{position:absolute;left:20px;right:20px;bottom:86px;opacity:0;visibility:hidden;text-align:center;padding:9px;border-radius:12px;background:#1a0b12;color:#fff;font:500 .74rem/1 var(--sans)}
.scene-clout .cs-posted b{color:#ff7ab8}
.scene-clout .cs-plus{position:absolute;left:50%;top:44%;opacity:0;font:800 3.4rem/1 var(--display);color:#fff;text-shadow:0 6px 24px rgba(230,25,122,.9),0 0 2px #e6197a}
.scene-clout .cs-ring{position:relative;width:76%;margin:6px auto 14px;aspect-ratio:1}
.scene-clout .cs-ring svg{width:100%;height:100%;display:block}
.scene-clout .cs-ring div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.scene-clout .cs-ring b{font:800 2.6rem/1 var(--display);font-variant-numeric:tabular-nums}
.scene-clout .cs-ring small{font:600 .7rem/1 var(--sans);color:#7a5b68}
.scene-clout .cs-rw{display:flex;align-items:center;gap:9px;padding:9px;border-radius:14px;background:#fbf1f5;margin-bottom:7px;font-size:.72rem;transition:background .4s,box-shadow .4s}
.scene-clout .cs-rw i{flex:none;width:28px;height:28px;border-radius:9px;background:url(/img/scenes/clout/44007.jpg) center/cover}
.scene-clout .cs-rw i.d{background:linear-gradient(140deg,#ffcf8a,#d9893a)}
.scene-clout .cs-rw div{flex:1;line-height:1.2}
.scene-clout .cs-rw b{display:block;font-size:.8rem}
.scene-clout .cs-rw span{color:#7a5b68}
.scene-clout .cs-rw em{white-space:nowrap;font-style:normal;font-weight:700;font-size:.64rem;padding:5px 7px;border-radius:999px;background:#ead9e1;color:#7a5b68}
.scene-clout .cs-rw1.lit{background:#fff;box-shadow:0 0 0 2px #e6197a,0 10px 24px -10px rgba(230,25,122,.6)}
.scene-clout .cs-rw1.lit em{background:#e6197a;color:#fff}
.scene-clout .cs-rw1 em{background:#ead9e1;color:transparent;position:relative}
.scene-clout .cs-rw1 em::after{content:"200 to go";position:absolute;inset:5px 7px;color:#7a5b68}
.scene-clout .cs-rw1.lit em{color:#fff}
.scene-clout .cs-rw1.lit em::after{content:none}

.scene-clout .cs-board{position:absolute;left:16px;right:16px;top:76px;max-width:380px;margin:0 auto;opacity:0;visibility:hidden;padding:16px 18px 12px;border-radius:22px;background:#1a0b12;color:#fff;box-shadow:0 40px 80px -30px rgba(60,5,30,.7);z-index:3}
.scene-clout .cs-bk{margin:0;font:700 .68rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#ff7ab8}
.scene-clout .cs-bh{margin:6px 0 10px;font:800 1.7rem/1 var(--display);text-transform:uppercase}
.scene-clout .cs-lr{display:grid;grid-template-columns:22px 70px 1fr 48px;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(255,255,255,.08);font-size:.86rem}
.scene-clout .cs-lr span{font:800 1.1rem/1 var(--display);color:#ff7ab8}
.scene-clout .cs-lr:first-of-type span{color:#ffc24b}
.scene-clout .cs-lr i{height:6px;border-radius:6px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.scene-clout .cs-lr i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:6px;background:linear-gradient(90deg,#e6197a,#ff9a3d);transform-origin:0 50%;transform:scaleX(var(--g,0))}
.scene-clout .cs-lr em{font-style:normal;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.scene-clout .cs-bf{margin:6px 0 0;font-size:.68rem;color:#9b7f8b}

.scene-clout .cs-copy{position:absolute;left:0;right:0;bottom:0;padding:0 16px 28px;z-index:4;display:flex;flex-direction:column}
.scene-clout .cs-h2{order:-1;margin:0 0 10px;font:700 .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#b80f5f}
.scene-clout .cs-caps{list-style:none;margin:0;padding:0;position:relative;min-height:150px}
.scene-clout .cs-caps li{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.scene-clout .cs-caps li.on{opacity:1;transform:none}
.scene-clout .cs-k{display:inline-block;font:700 .7rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:#e6197a;color:#fff;margin-bottom:10px}
.scene-clout .cs-caps h3{margin:0 0 8px;font:800 clamp(2.3rem,10.5vw,4.6rem)/.9 var(--display);text-transform:uppercase;letter-spacing:-.005em;color:#1a0b12}
.scene-clout .cs-caps h3 em{font-style:normal;display:block;background:linear-gradient(90deg,#e6197a,#ff7a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.scene-clout .cs-caps p{margin:0;max-width:36ch;color:#5d3f4c;font-size:1rem}
@media(max-width:759px){
  .scene-clout .cs-track{height:360vh}
  .scene-clout .cs-phone{top:38%;width:min(210px,52vw)}
  .scene-clout .cs-meter{right:16px;top:76px;width:170px}
  .scene-clout .cs-caps{min-height:196px}
  .scene-clout .cs-rw i{display:none}
  .scene-clout .cs-rw div{white-space:nowrap}
}
@media(max-width:759px) and (max-height:720px){.scene-clout .cs-phone{width:min(170px,44vw);top:34%}}
@media(min-width:760px){
  .scene-clout .cs-fade{background:linear-gradient(90deg,rgba(255,246,250,.97),rgba(255,246,250,.82) 30%,transparent 56%)}
  .scene-clout .cs-copy{left:max(24px,calc(50vw - 560px));right:auto;top:50%;bottom:auto;transform:translateY(-50%);width:min(500px,44vw);padding:0}
  .scene-clout .cs-caps{min-height:270px}
  .scene-clout .cs-caps li{top:0;bottom:auto}
  .scene-clout .cs-caps p{font-size:1.1rem}
  .scene-clout .cs-phone{left:68%;top:52%;width:268px}
  .scene-clout .cs-board{left:auto;right:max(24px,calc(50vw - 560px));top:50%;margin-top:-170px;width:380px}
  .scene-clout .cs-meter{right:max(24px,calc(50vw - 560px));top:auto;bottom:40px;width:230px}
}

/* reduced motion: final frame, every caption listed */
.scene-clout.is-static .cs-track{height:auto}
.scene-clout.is-static .cs-stage{position:relative;height:auto;min-height:0;display:flex;flex-direction:column}
.scene-clout.is-static .cs-map{position:relative;height:420px;opacity:1}
.scene-clout.is-static .cs-phone,.scene-clout.is-static .cs-fade,.scene-clout.is-static .cs-drop{display:none}
.scene-clout.is-static .cs-board{position:relative;opacity:1;visibility:visible;top:auto;left:auto;right:auto;margin:-60px auto 0;transform:none}
.scene-clout.is-static .cs-meter{opacity:1;visibility:visible}
.scene-clout.is-static .cs-copy{position:relative;transform:none;top:auto;left:auto;right:auto;width:auto;max-width:1180px;margin:0 auto;padding:40px 16px}
.scene-clout.is-static .cs-caps{min-height:0;display:grid;gap:26px}
.scene-clout.is-static .cs-caps li{position:relative;opacity:1;transform:none}
.scene-clout.is-static .cs-lr i::after{transform:none}