/*!
 * Spin the Wheel — stylesheet (v2 — responsive layout overhaul)
 * Loaded once per page (not once per section instance) via:
 *   {{ 'spin-wheel.css' | asset_url | stylesheet_tag }}
 *
 * Scoping strategy:
 *   - Structural rules are scoped by CLASS (.spin-wheel-section, .spin-wheel, ...)
 *     so this file's size is constant no matter how many wheels are on the page.
 *   - Per-instance values (colors, sizes, angles) are CSS custom properties set
 *     inline on the section root by Liquid. Every rule below reads them with a
 *     sane fallback, so the section still renders correctly even before the
 *     inline vars are present (e.g. in the theme editor while a block is added).
 *
 * Animation performance:
 *   - Every keyframe animates transform / opacity / filter only — never
 *     top/left/width/box-shadow — so animations stay on the GPU compositor.
 *   - Idle animations (float, shadow breathe) are OFF by default and only run
 *     while the section carries [data-idle-active]. JS toggles that attribute
 *     using an IntersectionObserver so off-screen wheels never animate, and
 *     merchants can disable idle motion entirely from the theme editor.
 *
 * Layout system:
 *   - CSS Grid for the main content area (wheel + controls).
 *   - Mobile-first: single-column stack, switches to 55/45 side-by-side
 *     at ≥1200 px.
 *   - Wheel wrapper width is set directly per breakpoint (bypassing the
 *     inline --sw-wheel-size set by Liquid) so responsive caps are always
 *     respected regardless of the merchant's "Wheel Size" picker.
 *   - clamp() used for typography, spacing, hub, pointer, and label sizing.
 */.spin-wheel-section{--sw-orange: #f58220;--sw-orange-dark: #d96c0f;--sw-orange-light: #ffb066;--sw-white: #ffffff;--sw-ink: #201a14;--sw-ink-soft: #5a5148;--sw-pointer: #f58220;--sw-btn-bg: #f58220;--sw-btn-text: #ffffff;--sw-popup-bg: #ffffff;--sw-wheel-size: min(90vw, 340px);--sw-hub-size: clamp(52px, 15vw, 80px);--sw-gap: clamp(1.25rem, 3.5vw, 2rem);--sw-radius-lg: clamp(16px, 2.5vw, 28px);--sw-border-width: clamp(3px, .8vw, 6px);--sw-segment-angle: 60deg;--sw-shadow-ambient: 0 2px 6px rgba(32, 26, 20, .06), 0 12px 28px rgba(32, 26, 20, .1), 0 32px 64px rgba(32, 26, 20, .12);--sw-shadow-wheel: 0 0 0 1px rgba(245, 130, 32, .08), 0 18px 40px rgba(32, 26, 20, .18), 0 4px 12px rgba(32, 26, 20, .1), inset 0 0 0 1px rgba(255, 255, 255, .6);display:block;position:relative;padding:clamp(2rem,5vw,4.5rem) clamp(1rem,4vw,2rem);background:var( --sw-section-bg, radial-gradient(120% 140% at 50% -10%, #fff7ef 0%, #fdf1e4 38%, #f7e6d3 100%) );color:var(--sw-ink);overflow:hidden;font-family:inherit}.spin-wheel-section,.spin-wheel-section *,.spin-wheel-section *:before,.spin-wheel-section *:after{box-sizing:border-box}.spin-wheel-container{max-width:1200px;margin-inline:auto;padding-inline:0}.spin-wheel-header{text-align:center;margin-bottom:clamp(1.5rem,4vw,3rem)}.spin-wheel-heading{margin:0 0 .5em;font-size:clamp(1.5rem,1rem + 2.2vw,2.75rem);font-weight:700;letter-spacing:-.01em;line-height:1.15;color:var(--sw-ink)}.spin-wheel-heading:after{content:"";display:block;width:clamp(40px,7vw,64px);height:3px;margin:.5em auto 0;border-radius:999px;background:linear-gradient(90deg,var(--sw-orange),var(--sw-orange-light))}.spin-wheel-subheading{margin:0 auto;max-width:46ch;font-size:clamp(.88rem,.8rem + .35vw,1.05rem);line-height:1.6;color:var(--sw-ink-soft)}.spin-wheel-content{display:grid;grid-template-columns:1fr;place-items:center;gap:var(--sw-gap)}.spin-wheel-wrapper{position:relative;width:var(--sw-wheel-size);max-width:100%;aspect-ratio:1 / 1;isolation:isolate;transform:translateZ(0)}[data-idle-active=true] .spin-wheel-wrapper{animation:sw-float 5.5s ease-in-out infinite}.spin-wheel-wrapper.is-spinning{animation-play-state:paused}.spin-wheel-wrapper:before{content:"";position:absolute;left:50%;bottom:-6%;width:78%;height:14%;background:radial-gradient(closest-side,#201a1447,#201a1400);transform:translate3d(-50%,0,0) scale(1);transform-origin:center;will-change:transform,opacity;pointer-events:none;z-index:0}[data-idle-active=true] .spin-wheel-wrapper:before{animation:sw-shadow-breathe 5.5s ease-in-out infinite}.spin-wheel-wrapper.is-spinning:before{animation-play-state:paused;opacity:1;transform:translate3d(-50%,0,0) scale(1.08)}@media(hover:hover)and (pointer:fine){.spin-wheel-wrapper:hover{animation-play-state:paused}.spin-wheel-wrapper:hover .spin-wheel{transform:translateZ(0) scale(1.025);box-shadow:0 0 0 1px #f582201f,0 26px 52px #201a1438,0 6px 16px #201a1424,inset 0 0 0 1px #fff9}.spin-wheel-wrapper:hover .spin-wheel-pointer{transform:translate3d(-50%,-3px,0) scale(1.05)}}.spin-wheel-pointer{position:absolute;top:-4px;left:50%;z-index:3;width:clamp(24px,5.5vw,40px);aspect-ratio:1 / 1;transform:translate3d(-50%,0,0);transform-origin:50% 20%;filter:drop-shadow(0 4px 8px rgba(32,26,20,.35));transition:transform .25s ease,filter .25s ease;will-change:transform}.spin-wheel-pointer--dot{border-radius:50%;background:var(--sw-pointer);box-shadow:0 0 0 4px var(--sw-white),0 6px 10px #201a1459}.spin-wheel-pointer--dot .spin-wheel-pointer-icon{display:none}.spin-wheel-wrapper.is-spinning .spin-wheel-pointer{animation:sw-pointer-bounce .18s ease-in-out infinite alternate;filter:drop-shadow(0 8px 14px rgba(32,26,20,.45))}.spin-wheel-pointer-icon{width:100%;height:100%;fill:var(--sw-pointer);stroke:var(--sw-white);stroke-width:1}.spin-wheel{position:relative;width:100%;height:100%;border-radius:50%;background:var(--sw-white);box-shadow:var(--sw-shadow-wheel);padding:clamp(6px,1.4vw,12px);transform:translateZ(0) scale(1);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;will-change:transform}.spin-wheel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;padding:var(--sw-border-width);background:conic-gradient(from 0deg,var(--sw-orange-light),var(--sw-orange) 25%,var(--sw-orange-dark) 50%,var(--sw-orange) 75%,var(--sw-orange-light) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.spin-wheel-inner{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;transform:translateZ(0) rotate(0);will-change:transform;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.55) 0deg .5deg,rgba(32,26,20,.22) .5deg 1.1deg,transparent 1.1deg var(--sw-segment-angle)),conic-gradient(from 0deg,var(--sw-conic-stops, #fff));box-shadow:inset 0 0 0 2px #ffffffe6}.spin-wheel-inner:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:linear-gradient(180deg,#ffffff47,#fff0 45%);pointer-events:none}.spin-wheel-inner:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,transparent var(--sw-winner-start, 0deg),rgba(255,255,255,.9) calc(var(--sw-winner-start, 0deg) + var(--sw-winner-angle, 0deg) / 2),transparent calc(var(--sw-winner-start, 0deg) + var(--sw-winner-angle, 0deg)),transparent 360deg);opacity:0;pointer-events:none;will-change:opacity}.spin-wheel-wrapper.is-winner-reveal .spin-wheel-inner:after{animation:sw-segment-glow 1.1s ease-in-out 2}.spin-wheel-segment{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(var(--segment-mid-angle));transform-origin:50% 50%;pointer-events:none}.spin-wheel-segment-content{position:absolute;top:10%;left:50%;display:flex;flex-direction:column;align-items:center;gap:.2em;width:clamp(36px,20%,90px);text-align:center;transform:translate3d(-50%,0,0) scale(1);will-change:transform}.spin-wheel-segment.is-winner-segment .spin-wheel-segment-content{animation:sw-segment-pop .7s cubic-bezier(.34,1.56,.64,1) 1}.spin-wheel-segment-icon{width:clamp(14px,4.5vw,26px);height:clamp(14px,4.5vw,26px);object-fit:contain;flex-shrink:0;filter:drop-shadow(0 1px 3px rgba(0,0,0,.12))}.spin-wheel-segment-label{font-size:clamp(.45rem,.38rem + .4vw,.68rem);font-weight:700;line-height:1.15;color:var(--segment-text-color, var(--sw-ink));text-shadow:0 1px 2px rgba(255,255,255,.3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;overflow-wrap:break-word}.spin-wheel-hub{position:absolute;top:50%;left:50%;z-index:2;width:var(--sw-hub-size);aspect-ratio:1 / 1;transform:translate3d(-50%,-50%,0);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sw-white);box-shadow:0 8px 20px #201a1438,0 2px 6px #201a141f,inset 0 0 0 3px var(--sw-orange);padding:10%}.spin-wheel-hub:before{content:"";position:absolute;top:-14%;right:-14%;bottom:-14%;left:-14%;border-radius:50%;background:radial-gradient(closest-side,#f582208c,#f5822000);opacity:0;transform:scale(.9);pointer-events:none;will-change:transform,opacity}.spin-wheel-wrapper.is-winner-reveal .spin-wheel-hub:before{animation:sw-winner-glow 1.4s ease-out 2}.spin-wheel-hub img{width:100%;height:100%;object-fit:contain}.spin-wheel-hub-text{font-size:clamp(.65rem,.5rem + .7vw,1rem);font-weight:800;color:var(--sw-orange);letter-spacing:-.02em}.spin-wheel-controls{display:flex;flex-direction:column;align-items:center;gap:clamp(.6rem,1.2vw,1rem);text-align:center;width:100%;max-width:360px}.spin-wheel-instructions{margin:0;font-size:clamp(.85rem,.8rem + .2vw,.98rem);line-height:1.55;color:var(--sw-ink-soft)}.spin-wheel-button{-webkit-appearance:none;appearance:none;border:none;cursor:pointer;padding:clamp(.85rem,1vw + .5rem,1.15rem) clamp(2.25rem,4vw,3.25rem);border-radius:999px;font-size:clamp(.95rem,.85rem + .3vw,1.1rem);font-weight:700;letter-spacing:.01em;color:var(--sw-btn-text);background:linear-gradient(135deg,var(--sw-btn-bg),var(--sw-orange-dark));box-shadow:0 10px 24px #f5822059,0 2px 6px #f5822040;transform:translateZ(0);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;will-change:transform}.spin-wheel-button:hover{transform:translate3d(0,-2px,0);box-shadow:0 14px 30px #f5822066,0 4px 10px #f582204d}.spin-wheel-button:active{transform:translateZ(0) scale(.97)}.spin-wheel-button:focus-visible{outline:3px solid var(--sw-ink);outline-offset:3px}.spin-wheel-button:disabled{cursor:not-allowed;filter:grayscale(.3) brightness(.95);transform:none}.spin-wheel-disclaimer{margin:0;font-size:clamp(.72rem,.68rem + .15vw,.82rem);line-height:1.45;color:var(--sw-ink-soft);opacity:.8}.spin-wheel-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.spin-wheel-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;display:flex;align-items:center;justify-content:center;padding:1.25rem;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .35s ease,visibility .35s ease}.spin-wheel-modal.is-open{visibility:visible;opacity:1;pointer-events:auto}.spin-wheel-modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#201a1473}@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){.spin-wheel-modal-overlay{backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%)}}.spin-wheel-modal-content{position:relative;z-index:1;width:min(100%,420px);padding:clamp(1.75rem,3vw,2.75rem) clamp(1.5rem,3vw,2.25rem);text-align:center;border-radius:var(--sw-radius-lg);background:var(--sw-popup-bg);border:1px solid rgba(255,255,255,.5);box-shadow:var(--sw-shadow-ambient);transform:translate3d(0,12px,0) scale(.96);opacity:0;will-change:transform,opacity}@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){.spin-wheel-modal-content{background:color-mix(in srgb,var(--sw-popup-bg) 65%,transparent);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}}.spin-wheel-modal.is-open .spin-wheel-modal-content{animation:sw-modal-pop .55s cubic-bezier(.34,1.56,.64,1) forwards}.spin-wheel-modal:not(.is-open) .spin-wheel-modal-content{transition:transform .25s ease,opacity .25s ease}.spin-wheel-modal-close{position:absolute;top:.75rem;right:.75rem;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#201a140f;color:var(--sw-ink);font-size:1.25rem;line-height:1;cursor:pointer;transition:background .2s ease,transform .2s ease}.spin-wheel-modal-close:hover{background:#201a141f;transform:rotate(90deg)}.spin-wheel-modal-close:focus-visible,.spin-wheel-modal-cta:focus-visible,.spin-wheel-modal-overlay:focus-visible{outline:3px solid var(--sw-ink);outline-offset:2px}.spin-wheel-modal-heading{margin:0 0 .5em;font-size:clamp(1.25rem,1rem + 1vw,1.6rem);font-weight:800;color:var(--sw-ink)}.spin-wheel-modal-result{margin:0 0 .35em;font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);font-weight:700;color:var(--sw-orange-dark)}.spin-wheel-modal-subtext{margin:0 0 1.25em;font-size:clamp(.85rem,.8rem + .2vw,.95rem);color:var(--sw-ink-soft);line-height:1.5}.spin-wheel-modal-coupon{display:inline-flex;align-items:center;gap:.5em;margin:0 0 1.25em;padding:.5em .9em;border-radius:999px;border:1px dashed var(--sw-orange);font-weight:700;letter-spacing:.04em;color:var(--sw-orange-dark)}.spin-wheel-modal-cta{-webkit-appearance:none;appearance:none;border:none;cursor:pointer;width:100%;padding:.85rem 1.5rem;border-radius:999px;font-size:.95rem;font-weight:700;color:var(--sw-btn-text);background:linear-gradient(135deg,var(--sw-btn-bg),var(--sw-orange-dark));box-shadow:0 8px 18px #f582204d;transition:transform .2s ease,box-shadow .2s ease}.spin-wheel-modal-cta:hover{transform:translate3d(0,-1px,0);box-shadow:0 10px 22px #f5822059}.spin-wheel-confetti{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:none}@media(max-width:374px){.spin-wheel-section{--sw-hub-size: clamp(40px, 18vw, 58px)}.spin-wheel-wrapper{width:min(88vw,280px)}.spin-wheel-pointer{width:clamp(20px,7vw,28px);top:-2px}.spin-wheel-segment-content{width:clamp(30px,22%,66px);top:12%;gap:.15em}.spin-wheel-segment-icon{width:clamp(12px,4.5vw,20px);height:clamp(12px,4.5vw,20px)}.spin-wheel-segment-label{font-size:clamp(.38rem,.33rem + .35vw,.54rem)}.spin-wheel-hub-text{font-size:clamp(.55rem,.45rem + .5vw,.72rem)}}@media(min-width:375px)and (max-width:479px){.spin-wheel-wrapper{width:min(90vw,340px)}}@media(min-width:480px){.spin-wheel-wrapper{width:min(85vw,340px)}}@media(max-width:767px){.spin-wheel-button{order:-1}.spin-wheel-controls{max-width:100%}}@media(min-width:768px){.spin-wheel-section{--sw-hub-size: clamp(58px, 11vw, 96px);--sw-gap: 2.5rem}.spin-wheel-wrapper{width:min(65vw,500px)}.spin-wheel-content{gap:40px}.spin-wheel-segment-content{width:clamp(42px,19%,100px);top:9%}.spin-wheel-segment-label{font-size:clamp(.48rem,.4rem + .38vw,.7rem)}.spin-wheel-segment-icon{width:clamp(16px,3.5vw,28px);height:clamp(16px,3.5vw,28px)}.spin-wheel-pointer{width:clamp(26px,4vw,36px)}.spin-wheel-controls{max-width:420px}.spin-wheel-hub-text{font-size:clamp(.6rem,.5rem + .6vw,.9rem)}}@media(min-width:1024px){.spin-wheel-section{--sw-hub-size: clamp(62px, 8vw, 110px)}.spin-wheel-wrapper{width:min(48vw,500px)}}@media(min-width:1200px){.spin-wheel-section{--sw-hub-size: clamp(62px, 6.5vw, 120px);--sw-gap: clamp(2rem, 3vw, 4rem)}.spin-wheel-wrapper{width:min(33vw,650px);justify-self:end}.spin-wheel-content{grid-template-columns:55fr 45fr;align-items:center}.spin-wheel-controls{justify-self:start;align-items:flex-start;text-align:left;max-width:380px;width:auto}.spin-wheel-segment-content{width:clamp(46px,17%,96px);top:8%}.spin-wheel-segment-label{font-size:clamp(.5rem,.42rem + .3vw,.76rem)}.spin-wheel-segment-icon{width:clamp(18px,2.8vw,26px);height:clamp(18px,2.8vw,26px)}.spin-wheel-pointer{width:clamp(28px,2.2vw,42px)}.spin-wheel-hub-text{font-size:clamp(.65rem,.55rem + .5vw,1.05rem)}}@media(min-width:1440px){.spin-wheel-container{max-width:1340px}.spin-wheel-section{padding-block:clamp(3rem,4.5vw,5.5rem)}.spin-wheel-wrapper{width:min(29vw,650px)}.spin-wheel-controls{max-width:420px}}@keyframes sw-float{0%,to{transform:translateZ(0)}50%{transform:translate3d(0,-3%,0)}}@keyframes sw-shadow-breathe{0%,to{transform:translate3d(-50%,0,0) scale(1);opacity:.7}50%{transform:translate3d(-50%,0,0) scale(.88);opacity:.45}}@keyframes sw-pointer-bounce{0%{transform:translate3d(-50%,0,0) rotate(-6deg)}to{transform:translate3d(-50%,10%,0) rotate(6deg)}}@keyframes sw-segment-glow{0%,to{opacity:0}50%{opacity:1}}@keyframes sw-segment-pop{0%{transform:translate3d(-50%,0,0) scale(1)}50%{transform:translate3d(-50%,0,0) scale(1.28)}to{transform:translate3d(-50%,0,0) scale(1.1)}}@keyframes sw-winner-glow{0%{opacity:.9;transform:scale(.85)}70%{opacity:0;transform:scale(1.35)}to{opacity:0;transform:scale(1.35)}}@keyframes sw-modal-pop{0%{transform:translate3d(0,16px,0) scale(.9);opacity:0}60%{transform:translate3d(0,-2px,0) scale(1.02);opacity:1}to{transform:translateZ(0) scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.spin-wheel-wrapper,.spin-wheel-wrapper:before,.spin-wheel-pointer,.spin-wheel-inner:after,.spin-wheel-segment-content,.spin-wheel-hub:before,.spin-wheel-button,.spin-wheel-modal,.spin-wheel-modal-content,.spin-wheel-modal-close{animation:none!important;transition-duration:.01ms!important}}
/*# sourceMappingURL=/cdn/shop/t/154/assets/spin-wheel.css.map */