@font-face{font-family:Trade;src:url(assets/trade-gothic.woff2) format('woff2');font-display:swap}
@font-face{font-family:Univers;src:url(assets/univers-roman.woff2) format('woff2');font-display:swap}
*{box-sizing:border-box}html,body{margin:0;width:300px;height:250px;overflow:hidden}body{background:#24190f}.ad{width:300px;height:250px;position:relative;overflow:hidden;font-family:Trade,Arial,sans-serif;border:1px solid #463021;isolation:isolate;touch-action:none;cursor:grab;background:#24190f url(assets/christmas-workbench.webp) center/cover}.ad.revealed{touch-action:pan-y;cursor:auto}
.offer{position:absolute;inset:0;background:linear-gradient(90deg,#120d08bb,transparent 75%);color:#fff2d4}
.front-logo{position:absolute;left:17px;top:18px;width:119px;filter:brightness(0) invert(1);z-index:3}.offer-brand{position:absolute;left:13px;top:13px;padding:8px 9px;background:#f1e5cb;transform:rotate(-3deg);filter:drop-shadow(2px 3px 2px #0006);clip-path:polygon(1% 3%,34% 0,65% 3%,99% 0,100% 97%,70% 100%,37% 97%,0 100%)}.offer-brand img{display:block;width:106px}
.product{position:absolute;right:-55px;top:10px;width:254px;height:335px;object-fit:contain;filter:drop-shadow(6px 8px 5px #090a0877);transform-origin:50% 65%}.name{position:absolute;left:17px;top:62px;margin:0;font-size:29px;line-height:1;letter-spacing:-.3px}.name span{font:8px Univers,sans-serif;vertical-align:top;margin:3px 0 0 2px;display:inline-block}.price{position:absolute;left:17px;top:98px;margin:0;color:#efc269;font-size:44px;line-height:1;letter-spacing:-1px}.price span{font-size:29px;letter-spacing:0}.warranty{position:absolute;left:18px;top:149px;margin:0;font-size:14px;line-height:1.05}.origin{position:absolute;left:18px;top:169px;margin:0;font-size:14px;line-height:1.1}.origin span{display:block;font:9px/1.5 Univers,sans-serif;letter-spacing:.15px}.cta{position:absolute;left:17px;bottom:15px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0 13px 0 22px;background:#a43828;color:#fff3d7;text-decoration:none;font:16px Trade,sans-serif;white-space:nowrap;clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%);transform-origin:center}.cta:before{content:'';position:absolute;left:8px;top:14px;width:4px;height:4px;border-radius:50%;background:#f3dfb8}.cta:hover{background:#be4634}.cta:focus-visible{outline:2px solid white;outline-offset:-3px}
.sheet{position:absolute;left:10px;top:61px;width:263px;height:177px;transform:rotate(-3deg);transform-origin:50% 50%;z-index:3;filter:drop-shadow(4px 6px 5px #0006)}.paper{position:absolute;inset:0;width:263px;height:177px;border:0;padding:0;text-align:left;cursor:grab;color:#263229;background-color:#f0e4c9;background-image:repeating-linear-gradient(3deg,#80664107 0 1px,transparent 1px 4px),radial-gradient(ellipse at 10% 0,#fff8e6,transparent 75%);touch-action:none;z-index:3;outline-offset:-4px}.paper:active{cursor:grabbing}.paper:focus-visible{outline:3px solid #934026}.hook{position:absolute;left:16px;top:14px;font:34px/.88 Trade,Arial,sans-serif;letter-spacing:-.2px}.hook strong{display:block;font-size:26px;font-weight:400;color:#9b3528;margin-top:7px;line-height:1}.peel-copy{position:absolute;left:16px;top:126px;color:#8a3025;font:italic 15px/1.12 Georgia,serif}.drawn-arrow{position:absolute;left:133px;top:125px;width:66px;height:31px;transform:rotate(14deg);transform-origin:center;pointer-events:none}.fold{position:absolute;inset:0;width:263px;height:177px;z-index:4;pointer-events:none;overflow:visible}.gripper{position:absolute;left:0;top:0;width:0;height:0;z-index:5;pointer-events:none;will-change:transform}.gripper img{position:absolute;left:-81px;top:-22px;width:145px;height:191px;transform:rotate(-37deg);transform-origin:81px 22px;filter:drop-shadow(4px 5px 3px #0008);max-width:none}
.lights{position:absolute;right:-6px;top:0;width:162px;height:72px;z-index:0;pointer-events:none}.lights svg{width:100%;height:100%;overflow:visible}.lamp-glow{animation:glow 3.2s ease-in-out infinite;animation-delay:var(--delay)}@keyframes glow{0%,12%,100%{opacity:0}45%,65%{opacity:1}}
.enter{opacity:0;transform:translateY(17px);transition:none}.product.enter{transform:translate(45px,15px) rotate(0deg)}.revealing .enter,.revealed .enter{opacity:1;transform:translate(0,0) rotate(0);transition:opacity .36s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}.revealing .product,.revealed .product{transition-delay:0s;transform:translate(0,0) rotate(-12deg)}.revealing .name,.revealed .name{transition-delay:.04s}.revealing .price,.revealed .price{transition-delay:.10s}.revealing .warranty,.revealed .warranty{transition-delay:.18s}.revealing .origin,.revealed .origin{transition-delay:.24s}.revealing .cta,.revealed .cta{transition-delay:.32s}.revealed .sheet,.revealed .front-logo{visibility:hidden}.still .sheet,.still .front-logo{display:none}.still .enter{transition:none;opacity:1;transform:none}.still .product{transform:rotate(-12deg)}.still .lamp-glow{animation:none;opacity:.7}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.enter{transition:none!important}.sheet,.front-logo{display:none}.enter{opacity:1;transform:none!important}.lamp-glow{animation:none;opacity:.7}.still .product,.revealed .product{transform:rotate(-12deg)!important}}
