/* Freestanding campaign objects: no rectangular scenery or surrounding card. */
.offline .offline-scene{height:auto;aspect-ratio:4/3;border:0;border-radius:0;background:radial-gradient(ellipse at 54% 49%,#a553191c,transparent 63%);box-shadow:none;isolation:isolate;overflow:visible}
.offline .format-scene{inset:0;scale:1;display:block;opacity:0;transform:scale(1.035);transition:opacity .65s ease,transform 1.15s cubic-bezier(.22,.65,.25,1);pointer-events:none}
.offline .format-scene:before{display:none}
.offline .format-scene img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 16px #0004);animation:campaign-float 8s ease-in-out infinite;will-change:transform}
.offline-scene[data-format="0"] .format-scene-0,.offline-scene[data-format="1"] .format-scene-1,.offline-scene[data-format="2"] .format-scene-2,.offline-scene[data-format="3"] .format-scene-3{opacity:1;transform:scale(1)}
.offline .scene-meta{z-index:2;bottom:-15px;left:0;right:0;border-top:1px solid #b9875226;padding:13px 0;background:none;font-size:8px;color:#b99c82;pointer-events:none}
.offline .scene-meta span+span{color:#d4b89c}
@keyframes campaign-float{0%,100%{transform:translateY(-5px) rotate(-.7deg)}50%{transform:translateY(5px) rotate(.7deg)}}
.offline-scene:not([data-motion-visible="true"]) img,.paused .offline-scene img{animation-play-state:paused}
.offline-scene .format-scene:not(.active) img{animation-play-state:paused}
.offline-scene[data-format="0"] .format-scene-0 img,.offline-scene[data-format="1"] .format-scene-1 img,.offline-scene[data-format="2"] .format-scene-2 img,.offline-scene[data-format="3"] .format-scene-3 img{animation-play-state:running}
.offline-scene:not([data-motion-visible="true"]) .format-scene img,.paused .offline-scene .format-scene img{animation-play-state:paused}

/* Finished poster designs, animated as one physical stack. */
.creative-stack .creative-poster.browser-study{aspect-ratio:3/4;background:#181410;transition:inset .85s cubic-bezier(.22,.68,0,1),transform .85s cubic-bezier(.22,.68,0,1),filter .85s,opacity .5s;will-change:transform}
.creative-stack .creative-poster[data-depth="0"]{filter:none}
.creative-stack .creative-poster .campaign-product{object-fit:cover}
.creative-stack .creative-poster.is-leaving{transform:translate(-68px,-9px) rotate(-15deg) scale(.97)!important;opacity:.7;z-index:5;transition:transform .44s cubic-bezier(.4,0,.3,1),opacity .44s ease}
.creative-stack .creative-poster.is-leaving .campaign-product{filter:none}
.creative-selector{width:100%;gap:18px;align-items:center}
.creative-selector button{position:relative;min-height:38px;border:0}
.creative-selector button[data-creative-select]:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:#ed6a1a;transform:scaleX(0);transform-origin:left}
.creative-selector button[data-creative-select][aria-pressed="true"]:after{transform:scaleX(1)}
.creative-stack[data-auto="true"] .creative-selector button[data-creative-select][aria-pressed="true"]:after{animation:creative-wait 5s linear both}
.creative-selector .creative-motion-toggle{margin-left:auto;color:#b59b83;border:1px solid #9c714737;border-radius:50%;width:29px;height:29px;min-height:29px;display:grid;place-items:center;font-size:10px;flex-shrink:0}
.creative-motion-toggle:before{content:'Ⅱ'}.creative-motion-toggle[aria-pressed="true"]:before{content:'▷'}
@keyframes creative-wait{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* The closing halo has a visible expansion and a separate, phased bloom. */
.closing .ring-field:before{border-color:#ee9a5ca3;box-shadow:0 0 20px #ff903252,0 0 58px #e4692430,inset 0 0 32px #ed7b2529;background:radial-gradient(circle,transparent 58%,#e4742623 69%,transparent 74%);animation:closing-ring-expand 6.5s ease-in-out infinite}
.closing .ring-field:after{border-color:#e4945a75;box-shadow:0 0 34px #fb8c3542,inset 0 0 40px #d870252b;animation:closing-ring-expand 6.5s -1.05s ease-in-out infinite}
.closing .ring-field i:first-child{border-color:#d58c4c48;animation:closing-inner-light 6.5s -.55s ease-in-out infinite}
.closing .ring-field i:last-child{width:91%;height:91%;box-shadow:0 0 90px #f37d314d,inset 0 0 65px #e4712733;background:radial-gradient(circle,transparent 59%,#e47c2f12 68%,transparent 73%);animation:closing-bloom 6.5s -.5s ease-in-out infinite}
@keyframes closing-ring-expand{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.988)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.035)}}
@keyframes closing-inner-light{0%,100%{opacity:.38;transform:translate(-50%,-50%) scale(.99)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.015)}}
@keyframes closing-bloom{0%,100%{opacity:.18;transform:translate(-50%,-50%) scale(.98)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.055)}}
.closing:not([data-motion-visible="true"]) .ring-field:before,.closing:not([data-motion-visible="true"]) .ring-field:after,.closing:not([data-motion-visible="true"]) .ring-field i,.paused .closing .ring-field i{animation-play-state:paused}
@media(max-width:650px){.offline .offline-scene{height:auto;aspect-ratio:4/3;border-radius:0;margin-block:10px 18px}.offline .scene-meta{font-size:6px;padding:10px 0}.creative-selector{gap:16px;width:calc(100% - 16px)}.creative-selector button{font-size:9px}.creative-stack .creative-poster.is-leaving{transform:translate(-28px,-8px) rotate(-12deg) scale(.96)!important}.creative-stack .creative-poster.browser-study{aspect-ratio:3/4}}
@media(prefers-reduced-motion:reduce){.offline .format-scene,.creative-stack .creative-poster{transition:none!important}.offline .format-scene img{transform:none;will-change:auto}.closing .ring-field:before,.closing .ring-field:after,.closing .ring-field i{animation:none!important;opacity:.55;transform:translate(-50%,-50%)}.creative-selector button:after{animation:none!important}}
.reduce-motion .closing .ring-field:before,.reduce-motion .closing .ring-field:after,.reduce-motion .closing .ring-field i{animation:none!important;opacity:.55;transform:translate(-50%,-50%)}
.reduce-motion .creative-stack .creative-poster{transition:none!important}
.reduce-motion .offline .format-scene img{animation:none!important}
@media(prefers-reduced-motion:reduce){.offline .format-scene img{animation:none!important}}
