/* Campaign cards share the reel section's perspective, with intact original artwork. */
.case-visual.has-creatives{min-height:550px}
.creative-poster{padding:0;background:radial-gradient(ellipse at 50% 65%,#5c382d2b,transparent 70%),radial-gradient(ellipse at 15% 10%,#203248,transparent 70%),#101824}
.creative-poster .case-poster-category{top:25px;left:28px}
.creative-poster .case-logo-plate{position:absolute;top:55px;left:50%;transform:translateX(-50%);width:172px;height:65px;padding:14px 23px;border-radius:13px;background:#101824b8;box-shadow:inset 0 1px 0 #ffffff0a,0 12px 25px #0002;z-index:5}
.creative-poster .case-logo-plate img{width:auto;max-width:100%;height:100%;max-height:44px}
.case-creative-stage{position:absolute;top:146px;left:50%;transform:translateX(-50%);width:86%;max-width:465px;height:316px;perspective:1000px;perspective-origin:50% 50%;isolation:isolate}
.case-creative{position:absolute;display:block;line-height:0;left:50%;padding:0;width:43%;max-width:210px;border:1px solid #d4e4f54a;border-radius:13px;overflow:hidden;background:#0b0e15;box-shadow:0 22px 35px #0008,inset 0 1px 0 #ffffff38;transition:transform .35s,border-color .25s,box-shadow .35s;cursor:default;transform-style:preserve-3d;backface-visibility:hidden}
.case-creative img{display:block;width:100%;height:auto;object-fit:contain;filter:none}
.case-creative[data-card-position='left']{top:28px;transform:translateX(-110%) rotateY(14deg) rotateZ(-10deg);z-index:1}
.case-creative[data-card-position='right']{top:28px;transform:translateX(10%) rotateY(-14deg) rotateZ(10deg);z-index:2}
.case-creative[data-card-position='center']{top:0;width:35%;max-width:166px;transform:translateX(-50%);z-index:3}
.case-creative:focus-visible{outline:3px solid #70acff;outline-offset:5px;z-index:6}
.case-creative:hover{border-color:#93bcf7;box-shadow:0 24px 45px #000a;z-index:5}
.case-creative[data-card-position='left']:hover{transform:translateX(-110%) translateY(-8px) rotateY(4deg) rotateZ(-6deg)}
.case-creative[data-card-position='right']:hover{transform:translateX(10%) translateY(-8px) rotateY(-4deg) rotateZ(6deg)}
.case-creative[data-card-position='center']:hover{transform:translateX(-50%) translateY(-8px)}
.creative-poster .case-poster-name{position:absolute;bottom:57px;left:20px;right:20px;font-size:15px;line-height:1.4;margin:0}
.case-creative-hint{position:absolute;left:20px;right:20px;bottom:28px;text-align:center;font-size:10px;color:#99acc5;line-height:1.4}
.case-creative-hint>span{color:#84b5ff;margin-right:6px}
@media(max-width:1100px) and (min-width:681px){.case-visual.has-creatives{min-height:495px}.case-creative-stage{top:150px;height:260px;width:90%}.creative-poster .case-poster-name{font-size:13px;bottom:60px}.case-creative-hint{font-size:9px}.case-creative{border-radius:10px}}
@media(max-width:680px){.case-visual.has-creatives{aspect-ratio:auto;min-height:465px}.creative-poster .case-poster-category{font-size:9px;top:20px;left:21px}.creative-poster .case-logo-plate{top:47px;width:147px;height:55px;padding:12px 20px;border-radius:11px}.case-creative-stage{top:127px;width:84%;max-width:390px;height:265px}.case-creative{max-width:170px;border-radius:10px}.case-creative[data-card-position='center']{max-width:142px}.creative-poster .case-poster-name{bottom:54px;font-size:14px}.case-creative-hint{bottom:27px;font-size:9px}}
@media(max-width:420px){.case-visual.has-creatives{min-height:415px}.case-creative-stage{top:125px;width:86%;height:220px}.case-creative[data-card-position='left'],.case-creative[data-card-position='right']{top:21px}.creative-poster .case-poster-name{bottom:49px;font-size:13px}.case-creative-hint{bottom:24px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.case-creative{transition:none}}

/* Accommodate the original square ads and tall video screenshots without cropping. */
.case-creative.is-portrait:not([data-card-position="center"]){width:33%;max-width:156px;top:18px}
.case-creative.is-portrait[data-card-position="left"]{transform:translateX(-125%) rotateY(14deg) rotateZ(-10deg)}
.case-creative.is-portrait[data-card-position="right"]{transform:translateX(25%) rotateY(-14deg) rotateZ(10deg)}
.case-creative.is-portrait[data-card-position="left"]:hover{transform:translateX(-125%) translateY(-8px) rotateY(4deg) rotateZ(-6deg)}
.case-creative.is-portrait[data-card-position="right"]:hover{transform:translateX(25%) translateY(-8px) rotateY(-4deg) rotateZ(6deg)}
.case-creative.is-square{top:64px}
.case-creative[data-card-position="back-left"]{top:66px;width:36%;transform:translateX(-145%) rotateY(14deg) rotateZ(-18deg);z-index:0}
.case-creative[data-card-position="back-left"]:hover{transform:translateX(-145%) translateY(-8px) rotateY(4deg) rotateZ(-14deg);z-index:5}
.has-four-cards .case-creative[data-card-position="left"]{width:36%;transform:translateX(-110%) rotateY(14deg) rotateZ(-7deg)}
.has-four-cards .case-creative[data-card-position="left"]:hover{transform:translateX(-110%) translateY(-8px) rotateY(4deg) rotateZ(-3deg)}
.creative-poster .case-poster-name{bottom:35px}
.case-video-link{margin-top:23px;display:inline-flex;gap:20px;align-items:center;border:1px solid #bad3ef33;background:#ffffff06;border-radius:10px;padding:12px 16px;font-size:11px;color:#e1eaf7}
.case-video-link:hover{background:#ffffff12}
@media(max-width:680px){.case-creative.is-portrait:not([data-card-position="center"]){max-width:135px}.case-creative.is-square,.case-creative[data-card-position="back-left"]{top:51px}.creative-poster .case-poster-name{bottom:31px}}
@media(max-width:420px){.case-creative.is-square,.case-creative[data-card-position="back-left"]{top:40px}.creative-poster .case-poster-name{bottom:30px}}