/* Reversible hero experiment: roof blades / screen textile. */
.g-hero-gift.g-bonus-object{width:350px;max-width:100%;margin-top:-125px;padding:0;border-radius:2px;background:#f4f0f5;color:#4f2856;isolation:isolate;box-shadow:0 14px 30px #38223918;transform:rotate(-2deg)}
.g-bonus-object .g-bonus-copy{position:relative;z-index:2;padding:28px 27px 29px}
.g-bonus-object .g-bonus-copy p{font-size:16px;margin:0 0 13px;line-height:1.4}
.g-bonus-object .g-bonus-value-label{font-size:13px;line-height:1.4;display:block;margin-bottom:4px}
.g-bonus-object .g-bonus-copy strong{display:block;white-space:nowrap;font-size:44px;font-weight:500;line-height:1.1;letter-spacing:-.045em;margin:0 0 18px}
.g-bonus-object .g-bonus-copy small{display:inline;font-size:26px;font-weight:400;color:inherit;letter-spacing:-.025em;margin:0}
.g-bonus-object .g-bonus-includes{display:block;font-size:15px;line-height:1.65}
.g-bonus-roof{height:69px;padding:5px 8px;display:flex;flex-direction:column;gap:1px;background:#302d32;border:4px solid #444047;perspective:280px;overflow:hidden}
.g-bonus-roof i{display:block;flex:1;background:#98919c;border-top:1px solid #d2cbd4;transform:rotateX(48deg);transform-origin:center;transition:transform 650ms cubic-bezier(.22,1,.36,1),background 650ms}
.g-bonus-led{height:2px;margin:0 8px;background:#d6c7ab;transition:background 500ms,box-shadow 500ms}
.g-bonus-object[data-bonus-design=lamely] .g-bonus-copy{border-left:5px solid #444047;border-right:5px solid #444047}
.g-bonus-object[data-bonus-design=screen]{background:#57315e;color:#fff;border-left:5px solid #342638;border-right:5px solid #342638;border-bottom:8px solid #342638}
.g-bonus-roller{height:22px;position:relative;background:#342638;box-shadow:0 5px 7px #0002;z-index:3}
.g-bonus-mesh{position:absolute;inset:22px 0 0;background-image:repeating-linear-gradient(0deg,transparent 0 2px,#ffffff0a 2px 3px),repeating-linear-gradient(90deg,transparent 0 2px,#ffffff09 2px 3px);pointer-events:none;transform-origin:top;transition:transform 650ms cubic-bezier(.22,1,.36,1)}
.g-bonus-object[data-bonus-design=screen] .g-bonus-copy{padding:31px 24px 33px}
.g-bonus-object[data-bonus-design=screen]::after{content:'';position:absolute;top:22px;left:0;right:0;height:54px;background:#34263825;transform-origin:top;transition:transform 650ms cubic-bezier(.22,1,.36,1);pointer-events:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.g-hero-gift.g-bonus-object:hover{transform:perspective(900px) translateY(-6px) rotateX(3deg) rotateY(-4deg) rotateZ(0deg) scale(1.04)}
.g-bonus-object:hover .g-bonus-roof i{transform:rotateX(8deg);background:#b6acba}
.g-bonus-object:hover .g-bonus-led{background:#fff0c4;box-shadow:0 2px 13px #ffe29ab0}
.g-bonus-object[data-bonus-design=screen]:hover::after{transform:scaleY(.2)}
.g-bonus-object[data-bonus-design=screen]:hover .g-bonus-mesh{transform:translateY(-6px)}
}
@keyframes bonus-blades{0%,100%{transform:rotateX(48deg)}55%{transform:rotateX(8deg)}}
@keyframes bonus-led{0%,100%{box-shadow:none}55%{background:#fff0c4;box-shadow:0 2px 13px #ffe29ab0}}
@keyframes bonus-screen{0%,100%{transform:scaleY(1)}55%{transform:scaleY(.2)}}
@media(prefers-reduced-motion:no-preference){
.g-gift-arrive.g-bonus-object{animation-duration:1100ms}
.g-gift-arrive .g-bonus-roof i,.g-bonus-demo .g-bonus-roof i{animation:bonus-blades 1100ms ease-in-out}
.g-gift-arrive .g-bonus-led,.g-bonus-demo .g-bonus-led{animation:bonus-led 1100ms ease-in-out}
.g-gift-arrive[data-bonus-design=screen]::after,.g-bonus-demo[data-bonus-design=screen]::after{animation:bonus-screen 1100ms ease-in-out}
.g-bonus-demo{animation:g-gift-arrive 720ms cubic-bezier(.16,1,.3,1)}
}
@media(max-width:800px){.g-hero-gift.g-bonus-object{width:330px;margin-top:-32px}}
@media(max-width:520px){.g-hero-gift.g-bonus-object{width:300px}.g-bonus-object .g-bonus-copy{padding:24px 22px}.g-bonus-object .g-bonus-copy strong{font-size:40px}.g-bonus-object .g-bonus-copy p{font-size:15px}.g-bonus-object .g-bonus-includes{font-size:14px}.g-bonus-roof{height:61px}}
@media(prefers-reduced-motion:reduce){.g-bonus-object,.g-bonus-object *,.g-bonus-object::after{animation:none!important;transition:none!important}}