@charset "UTF-8";
/* Both visible silhouettes have the same upright height, excluding transparent image margins. */
#benefits .gift-courier-scene{--courier-height:190px;--courier-floor:28px;--courier-arrival:calc(100% - var(--courier-height)*1.287 - 10px)}
#benefits .gift-courier-actor{position:absolute;left:var(--courier-arrival);bottom:var(--courier-floor);width:calc(var(--courier-height)*.7);height:var(--courier-height);z-index:3}
#benefits .courier-body{position:absolute;inset:0;transform-origin:55% 100%}
#benefits .courier-frame{position:absolute;left:calc(var(--courier-height)*-.2263);top:calc(var(--courier-height)*-.01165);width:calc(var(--courier-height)*1.0433);height:calc(var(--courier-height)*1.0433);background-image:url('assets/benefit-toua-courier-side-sheet.webp');background-size:200% 200%;background-repeat:no-repeat;background-position:0 100%;transform-origin:54% 76%}
#benefits .courier-frame-bow{background-position:100% 100%;opacity:0;transition:opacity .14s ease}
#benefits .courier-frame-standing{opacity:1;transition:opacity .14s ease}
#benefits .gift-courier-scene[data-delivery-state="bow"] .courier-frame-standing{opacity:0}
#benefits .gift-courier-scene[data-delivery-state="bow"] .courier-frame-bow{opacity:1}
#benefits .gift-courier-scene[data-delivery-state="walking"] .gift-courier-actor{animation:courier-travel 2.6s linear both}
#benefits .gift-courier-scene[data-delivery-state="walking"] .courier-body{animation:courier-bob .28s ease-in-out infinite}
#benefits .gift-courier-scene[data-delivery-state="walking"] .courier-frame-standing{animation:courier-feet .56s steps(1,end) infinite;transition:none}
#benefits .gift-courier-scene[data-delivery-state="waiting"] .gift-courier-actor{left:4px}
#benefits .gift-courier-scene[data-delivery-state="waiting"] .courier-frame-standing{background-position:0 0}
#benefits .courier-guide{position:absolute;right:6px;bottom:var(--courier-floor);width:calc(var(--courier-height)*.60034);height:var(--courier-height);z-index:2}
#benefits .courier-guide>img{position:absolute;width:calc(var(--courier-height)*1.06633);height:calc(var(--courier-height)*1.06633);max-width:none;left:calc(var(--courier-height)*-.23384);top:calc(var(--courier-height)*-.03231);object-fit:contain}
#benefits .courier-name{position:absolute;bottom:-22px;left:0;width:100%;font-size:11px;line-height:1.7;color:#927262;text-align:center}
#benefits .courier-bubble{position:absolute;left:2px;top:-47px;white-space:nowrap;border:1px solid #d6b6a1;border-radius:13px 13px 13px 3px;background:#fffaf2;color:#846052;box-shadow:2px 3px 0 #dfbc9b38;padding:5px 11px;font-family:var(--hand);font-size:19px;line-height:1.7;transform:rotate(-4deg);opacity:1;transition:opacity .15s ease;z-index:5;font-style:oblique 6deg;font-weight:400;font-synthesis:style}
#benefits .courier-bubble:after{content:"";position:absolute;left:17px;bottom:-6px;width:10px;height:10px;background:#fffaf2;border-right:1px solid #d6b6a1;border-bottom:1px solid #d6b6a1;transform:rotate(45deg)}
#benefits .gift-courier-scene:is([data-delivery-state="waiting"],[data-delivery-state="walking"],[data-delivery-state="offering"]) .courier-bubble{opacity:0}
#benefits .courier-sweat{position:absolute;right:5px;top:-7px;width:30px;height:22px;opacity:0;z-index:4}
#benefits .courier-sweat>i{position:absolute;display:block;left:0;top:3px;width:8px;height:13px;background:#83b8ca;border:1px solid #6c9cad80;border-radius:70% 60% 60% 12%;transform:rotate(-35deg)}
#benefits .courier-sweat>i:nth-child(2){left:14px;top:-3px;width:6px;height:10px}
#benefits .courier-sweat>i:nth-child(3){left:22px;top:12px;width:5px;height:8px}
#benefits .gift-courier-scene[data-delivery-state="walking"] .courier-sweat{opacity:1}
#benefits .gift-courier-scene[data-delivery-state="walking"] .courier-sweat>i{animation:courier-sweat .75s ease-out infinite}
#benefits .gift-courier-scene[data-delivery-state="walking"] .courier-sweat>i:nth-child(2){animation-delay:.2s}
#benefits .gift-courier-scene[data-delivery-state="walking"] .courier-sweat>i:nth-child(3){animation-delay:.4s}
#benefits .gift-replay{position:absolute;right:18px;top:33px;width:31px;height:31px;padding:0;border:1px solid #d9bda9;border-radius:50%;background:#fffaf478;color:#9d7865;display:grid;place-items:center;font:23px/1 Georgia,serif;z-index:5;transition:background .2s}
#benefits .gift-replay:hover{background:#fffbf5}
#benefits .gift-replay[hidden]{display:none}
@keyframes courier-travel{from{left:4px}to{left:var(--courier-arrival)}}
@keyframes courier-feet{0%,49.99%{background-position:0 0}50%,100%{background-position:100% 0}}
@keyframes courier-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes courier-sweat{0%{opacity:0;transform:translate(-2px,4px) rotate(-35deg) scale(.75)}25%{opacity:1}100%{opacity:0;transform:translate(8px,-7px) rotate(-15deg) scale(1)}}
@media(min-width:761px) and (max-width:1000px){#benefits .gift-courier-scene{--courier-height:166px}#benefits .courier-bubble{font-size:17px;top:-42px}#benefits .gift-replay{top:29px;right:12px;width:27px;height:27px;font-size:21px}}
@media(max-width:760px){
 #benefits .gift-courier-scene{--courier-height:146px;--courier-floor:23px}
 #benefits .courier-bubble{font-size:16px;top:-41px;left:-5px;padding:4px 9px}
 #benefits .courier-name{bottom:-20px;font-size:10px}
 #benefits .gift-replay{top:24px;right:16px;width:28px;height:28px;font-size:21px}
 #benefits .courier-sweat{right:0;top:-6px;transform:scale(.85)}
}
@media(max-width:360px){#benefits .gift-courier-scene{--courier-height:134px}#benefits .courier-bubble{font-size:15px}}
@media(prefers-reduced-motion:reduce){#benefits .gift-courier-scene:not(.replay-motion) *{animation:none!important;transition:none!important}#benefits .gift-replay{display:none}}
