/* Animated pairs and scroll-led pillars, joining the next section without a gap. */
/* Let airborne caps clear the top edge; keep the pillar fronts clipped at the bottom. */
.pep-character-stage {min-height:clamp(800px,72vw,1160px);perspective:none;margin:0;overflow:visible;clip-path:inset(-320px 0 0);}
.pep-character-stage__pals {z-index:3;left:10%;right:10%;width:min(80%,1200px);margin-inline:auto;bottom:0;gap:0;perspective:none;}
.pep-character-pal {--depth:clamp(28px,3vw,48px);--roof:calc(var(--depth)*.57735);--step:clamp(180px,18vw,290px);transform-style:flat;}
.pep-character-pal--mango {--step:clamp(285px,28vw,450px);}
.pep-character-pal--fire {--step:clamp(390px,38vw,610px);}
.pep-character-stage .pep-character-pal__art {
 z-index:2;left:calc(var(--depth)*.3);right:calc(var(--depth)*.7);bottom:calc(100% + var(--roof)*.48);
 display:flex;align-items:flex-end;justify-content:center;gap:3%;height:clamp(300px,27vw,400px);padding:0;
 transform:none!important;opacity:1;transition:none;isolation:isolate;
}
.pep-character-stage .pep-character-pal__art::before {left:4%;right:4%;bottom:-5px;height:10px;filter:blur(5px);opacity:.24;transform:none;}
.pep-character-stage :is(.pep-character-pal__bottle,.pep-character-pal__mascot) {
 position:relative;display:block;flex:0 0 auto;width:auto;height:100%;aspect-ratio:var(--asset-aspect,.33);
 transform:none!important;transition:none;filter:drop-shadow(3px 2px 2px #00000018);overflow:visible;
}
.pep-character-stage .pep-character-pal__mascot {height:62%;aspect-ratio:var(--asset-aspect,.72);}
.pep-character-stage .pep-character-pal__bottle > video,
.pep-character-stage .pep-character-pal__mascot > video,
.pep-character-stage .pep-character-pal__mascot > img {
 display:block;position:absolute;max-width:none;object-fit:fill;
 left:var(--asset-left,0%);top:var(--asset-top,0%);width:var(--asset-width,100%);height:var(--asset-height,100%);
}
.pep-character-pal figcaption::before {display:none;}
.pep-character-pal figcaption {z-index:1;padding:clamp(26px,2.6vw,42px) clamp(20px,2.3vw,38px);}
.pep-character-pal__top {z-index:1;}
.pep-character-pal__side {z-index:0;}
.pep-character-pal__name {font-family:'Pep Pals identity',Impact,sans-serif;font-weight:400;font-synthesis:none;font-size:clamp(23px,2.1vw,34px);letter-spacing:-.025em;}
.pep-character-pal__voice {font-size:clamp(9px,.74vw,12px);letter-spacing:.12em;}
@media(max-width:1100px) and (min-width:701px) {
 .pep-character-stage {min-height:800px;}
 .pep-character-stage .pep-character-pal__art {height:310px;}
 .pep-character-pal {--step:180px;}.pep-character-pal--mango {--step:285px;}.pep-character-pal--fire {--step:390px;}
 .pep-character-pal figcaption {padding:25px 15px;}
 .pep-character-pal__name {font-size:clamp(16px,2vw,22px);}.pep-character-pal__voice {font-size:8px;letter-spacing:.04em;}
}
@media(max-width:700px) {
 .pep-character-stage {min-height:480px;padding:0;}
 .pep-character-stage__pals {position:absolute;left:6%;right:6%;width:88%;bottom:0;height:auto;margin:0;}
 .pep-character-pal {--depth:12px;--step:115px;}.pep-character-pal--mango {--step:175px;}.pep-character-pal--fire {--step:235px;}
 .pep-character-stage .pep-character-pal__art {height:clamp(142px,38vw,200px);gap:1%;}
 .pep-character-stage .pep-character-pal__mascot {height:57%;}
 .pep-character-pal figcaption {padding:18px 8px;}
 .pep-character-pal__name {font-size:clamp(16px,4vw,24px);}
 .pep-character-pal__voice {font-size:7px;letter-spacing:.015em;}
}

/* Positions belong to the pillar, so scroll never changes the pepper's placement. */
.pep-character-stage .pep-character-pal__bottle {position:absolute;left:12%;bottom:-6px;}
.pep-character-stage .pep-character-pal__mascot {
 position:absolute;left:var(--pepper-x,58%);bottom:var(--pepper-y,0%);height:var(--pepper-size,62%);
}
@media(max-width:700px) {
 .pep-character-stage .pep-character-pal__bottle {left:7%;}
 .pep-character-stage .pep-character-pal__mascot {left:var(--pepper-x,54%);height:var(--pepper-size,57%);}
}
/* Approved placement from the local editor; shared by every visitor. */
@media(min-width:701px) {
 .pep-character-pal--joe {--pepper-x:51.25%;--pepper-y:-17.75%;--pepper-size:62%;}
 .pep-character-pal--mango {--pepper-x:44%;--pepper-y:-18.25%;--pepper-size:62%;}
 .pep-character-pal--fire {--pepper-x:50.5%;--pepper-y:-19%;--pepper-size:62%;}
}

/* Bring this scene closer to its project introduction. */
.case-overview:has(+ .pep-character-stage) {padding-bottom:24px;}