.creative-stage { height: 445px; isolation: isolate; }
.creative-stage .creative-piece { background:#fff; border:1px solid var(--ink); overflow:hidden; position:absolute; }
.creative-stage .piece-format { background:#fff; color:#6e6d73; font:8px 'DM Mono',monospace; left:10px; padding:5px 7px; position:absolute; top:10px; z-index:2; }
.creative-stage .recipient-tag { align-items:center; background:var(--ink); bottom:10px; color:#fff; display:flex; font:8px 'DM Mono',monospace; gap:6px; left:10px; padding:7px 9px; position:absolute; z-index:4; }
.creative-stage .recipient-tag i { background:var(--mint); border-radius:50%; height:6px; width:6px; }

.presentation-piece { height:230px; right:4px; top:5px; transform:rotate(5deg); width:310px; z-index:0; }
.presentation-piece .recipient-tag { bottom:auto; left:auto; right:10px; top:10px; }
.presentation-art { background:#f5efe9; height:100%; overflow:hidden; padding:51px 23px; position:relative; }
.presentation-art::after { background:var(--pink); border-radius:50%; content:''; height:185px; position:absolute; right:-45px; top:30px; width:185px; }
.presentation-art i { border:1px solid var(--ink); height:128px; left:39px; position:absolute; top:54px; transform:rotate(13deg); width:128px; z-index:1; }
.presentation-art b { font:31px/.85 'Playfair Display',Georgia,serif; letter-spacing:-2px; position:relative; z-index:2; }

.video-piece { bottom:9px; height:210px; left:1px; transform:rotate(-6deg); width:326px; z-index:1; }
.video-art { background:var(--ink); height:100%; overflow:hidden; position:relative; }
.video-art::before { background:var(--mint); border-radius:50%; content:''; height:240px; left:-55px; position:absolute; top:20px; width:240px; }
.video-art::after { background:var(--pink); content:''; height:280px; position:absolute; right:-60px; top:-105px; transform:rotate(35deg); width:135px; }
.video-art>i { border:26px solid #fff; border-bottom-color:transparent; border-radius:50%; height:150px; left:74px; opacity:.9; position:absolute; top:30px; transform:rotate(22deg); width:150px; }
.play-symbol { align-items:center; background:#fff; border-radius:50%; display:flex; font-size:13px; height:38px; justify-content:center; left:144px; padding-left:3px; position:absolute; top:82px; width:38px; z-index:2; }
.video-art small { bottom:12px; color:#fff; font:7px 'DM Mono',monospace; position:absolute; right:12px; z-index:2; }

.campaign-piece { box-shadow:13px 14px 0 var(--ink); height:315px; padding:0; right:67px; top:65px; transform:rotate(-2deg); width:390px; z-index:2; }
.campaign-piece .doc-header { background:#fff; left:0; padding:13px 16px 10px; position:absolute; right:0; top:0; z-index:4; }
.campaign-piece .doc-header b { color:var(--pink); }
.campaign-art { background:#f3efe7; height:100%; overflow:hidden; padding:73px 25px 20px; position:relative; }
.campaign-art::before { background:var(--pink); border-radius:50%; content:''; height:270px; position:absolute; right:-75px; top:55px; width:270px; }
.campaign-art::after { border:45px solid var(--mint); border-left-color:transparent; border-radius:50%; content:''; height:175px; left:86px; position:absolute; top:101px; transform:rotate(-20deg); width:175px; }
.campaign-art>span { font:8px 'DM Mono',monospace; position:relative; z-index:1; }
.campaign-art>strong { display:block; font:45px/.82 'Playfair Display',Georgia,serif; letter-spacing:-3px; margin-top:9px; position:relative; z-index:2; }
.campaign-art>i { border:1px solid var(--ink); height:180px; left:12px; position:absolute; top:111px; transform:rotate(7deg); width:180px; z-index:1; }
.campaign-recipient { bottom:13px !important; left:auto !important; right:12px; }
.campaign-piece .hidden-identity,
.campaign-piece .revealed-identity { left:0; right:0; top:72px; }
.campaign-piece::before { display:none; }
.campaign-piece .hidden-identity { font-size:10px; line-height:1.55; opacity:0; }
.campaign-piece .revealed-identity { animation:reveal-campaign 12s linear infinite; color:#087f6d; font-size:18px; height:302px; line-height:1.55; padding-top:52px; top:0; z-index:6; }
.campaign-piece .hidden-identity span,
.campaign-piece .revealed-identity span { display:block; margin:0 0 3px; text-align:center; white-space:nowrap; width:100%; }
.campaign-piece .scan-line { z-index:5; }
.campaign-piece .scan-line::before { background:rgba(255,255,255,.78); bottom:0; content:''; height:360px; left:10px; position:absolute; right:10px; z-index:-1; }
.creative-stage .scan-caption { right:112px !important; top:274px; transform:rotate(-2deg); width:300px; }

@keyframes scan-slow { 0%,12%{opacity:0;top:0} 13%{opacity:1;top:0} 55%{opacity:1;top:302px} 58%,100%{opacity:0;top:302px} }
@keyframes reveal-campaign { 0%,12%{clip-path:inset(0 0 100% 0);opacity:0} 13%{clip-path:inset(0 0 100% 0);opacity:.92} 55%{clip-path:inset(0 0 0 0);opacity:.92} 58%,100%{clip-path:inset(0 0 0 0);opacity:0} }

@media(max-width:520px){
  .creative-stage{height:375px;margin-top:20px}
  .presentation-piece{height:170px;right:0;width:230px}
  .presentation-art{padding:42px 15px}.presentation-art::after{height:135px;width:135px}.presentation-art b{font-size:24px}
  .video-piece{bottom:9px;height:155px;left:0;width:240px}.video-art::before{height:180px;width:180px}.video-art>i{height:110px;left:50px;top:27px;width:110px}.play-symbol{left:102px;top:62px}
  .campaign-piece{height:255px;right:14px;top:60px;width:calc(100% - 45px)}
  .campaign-piece .hidden-identity{font-size:8px}
  .campaign-piece .revealed-identity{font-size:14px;height:242px;padding-top:40px}
  .campaign-art{padding:65px 19px}.campaign-art::before{height:215px;width:215px}.campaign-art::after{height:135px;left:65px;top:91px;width:135px}.campaign-art>strong{font-size:37px}.campaign-art>i{height:140px;top:98px;width:140px}
  .creative-stage .scan-caption{left:calc(50% + 9px);right:auto!important;top:218px;transform:translateX(-50%) rotate(-2deg);width:220px}
  @keyframes scan-mobile{0%,12%{opacity:0;top:0}13%{opacity:1;top:0}55%{opacity:1;top:242px}58%,100%{opacity:0;top:242px}}
}