@charset "UTF-8";
/* Copy stays still while a short illustrated story opens the benefits. */
#benefits .gift-opening{width:min(100%,680px);margin:17px auto 23px;position:relative;container-type:inline-size}
#benefits .gift-opening-stage{position:relative;width:100%;aspect-ratio:680/470;isolation:isolate}
#benefits .gift-opening-halo{position:absolute;left:27%;right:20%;bottom:4%;height:12%;background:#eed9c830;border-radius:50%;filter:blur(3px)}
#benefits .gift-character-sequence{position:absolute;left:25.5%;bottom:-7%;width:60%;aspect-ratio:1;z-index:3;transform-origin:43% 86%;pointer-events:none}
#benefits .gift-pose{position:absolute;inset:0;background:url('assets/toua-gift-box-sequence.webp') no-repeat;background-size:300% 200%;opacity:0;transform-origin:50% 90%;transform:translate(var(--pose-x,0),var(--pose-y,0)) scale(var(--pose-scale,1));clip-path:inset(0 1.5% 0 1.5%)}
/* Align the box front across the six illustrated poses. */
#benefits .gift-pose-closed{background-position:0 0;--pose-scale:.79;--pose-x:-10%;--pose-y:-6.1%}
#benefits .gift-pose-peek{background-position:50% 0;--pose-scale:.83;--pose-x:-8.7%;--pose-y:-6.2%}
#benefits .gift-pose-lift{background-position:100% 0;--pose-scale:.83;--pose-x:-7.7%;--pose-y:-6.2%}
#benefits .gift-pose-pop{background-position:0 100%;--pose-scale:.96;--pose-x:-3.1%;--pose-y:-.2%}
#benefits .gift-pose-burst{background-position:50% 100%;--pose-scale:.96;--pose-x:-5%;--pose-y:-.2%}
#benefits .gift-pose-doya{background-position:100% 100%;opacity:1}
#benefits .gift-doya-caption{position:absolute;right:10%;top:36%;z-index:5;font-family:var(--hand);font-size:25px;white-space:nowrap;color:#795746;transform:rotate(9deg);transform-origin:0 80%;pointer-events:none;font-style:oblique 6deg;font-weight:400;font-synthesis:style}
#benefits .gift-doya-caption span{display:inline-block;font-size:.85em;margin-left:2px}
#benefits .gift-launches{margin:0;padding:0;list-style:none}
#benefits .gift-launch-target{position:absolute;width:17.5%;z-index:4;--launch-x:0px;--launch-y:80px}
#benefits .launch-consult{left:1%;top:55%;--launch-tint:#f7e3d7;--launch-deep:#9a6659}
#benefits .launch-talk{left:13%;top:14%;--launch-tint:#f8edce;--launch-deep:#9a7d3f}
#benefits .launch-system{left:41.25%;top:0;--launch-tint:#eeebf4;--launch-deep:#7e719a}
#benefits .launch-create{left:69.5%;top:14%;--launch-tint:#e8eee3;--launch-deep:#607a5d}
#benefits .launch-share{left:81.5%;top:55%;--launch-tint:#f4e3e8;--launch-deep:#a16c81}
#benefits .gift-launch-icon{display:flex;align-items:center;justify-content:center;color:var(--launch-deep);text-decoration:none;transform-origin:50% 60%;opacity:1;visibility:visible;transform:translate(0,0) scale(1);border-radius:50%}
#benefits .gift-launch-symbol{display:block;position:relative;width:77%;aspect-ratio:1;background:var(--launch-tint);border:1px solid #ffffffd9;box-shadow:0 3px 0 #b7958714;border-radius:49% 51% 45% 55%;transform:rotate(-5deg)}
#benefits .launch-talk .gift-launch-symbol{transform:rotate(6deg)}
#benefits .launch-create .gift-launch-symbol{transform:rotate(5deg)}
#benefits .gift-launch-symbol svg{width:87%;height:87%;margin:6.5%;display:block}
#benefits .gift-launch-icon:hover .gift-launch-symbol{box-shadow:0 4px 0 #b7958730;border-color:#fff}
#benefits .gift-opening-replay{position:absolute;right:3px;bottom:0;border:1px solid #d9bda9;width:28px;height:28px;background:#fffaf478;border-radius:50%;color:#9d7865;font:21px/1 Georgia,serif;display:grid;place-items:center;padding:0;z-index:6}
#benefits .gift-opening-replay:hover{background:#fffaf4}
#benefits .gift-opening-replay[hidden]{display:none}
#benefits .gift-opening[data-gift-state="ready"] .gift-pose{opacity:0}
#benefits .gift-opening[data-gift-state="ready"] .gift-pose-closed{opacity:1}
#benefits .gift-opening[data-gift-state="ready"] .gift-doya-caption{opacity:0}
#benefits .gift-opening[data-gift-state="ready"] .gift-launch-icon{opacity:0;visibility:hidden;transform:translate(var(--launch-x),var(--launch-y)) scale(.12)}
#benefits .gift-opening[data-gift-state="playing"] .gift-character-sequence{animation:gift-story-body 5.6s linear both}
#benefits .gift-opening[data-gift-state="playing"] .gift-pose{animation-duration:5.6s;animation-timing-function:steps(1,end);animation-fill-mode:both}
#benefits .gift-opening[data-gift-state="playing"] .gift-pose-closed{animation-name:gift-story-closed}
#benefits .gift-opening[data-gift-state="playing"] .gift-pose-peek{animation-name:gift-story-peek}
#benefits .gift-opening[data-gift-state="playing"] .gift-pose-lift{animation-name:gift-story-lift}
#benefits .gift-opening[data-gift-state="playing"] .gift-pose-pop{animation-name:gift-story-pop}
#benefits .gift-opening[data-gift-state="playing"] .gift-pose-burst{animation-name:gift-story-burst}
#benefits .gift-opening[data-gift-state="playing"] .gift-pose-doya{animation-name:gift-story-doya}
#benefits .gift-opening[data-gift-state="playing"] .gift-doya-caption{animation:gift-doya-caption .45s 4.6s cubic-bezier(.2,.8,.3,1.2) both}
#benefits .gift-opening[data-gift-state="playing"] .gift-launch-icon{animation:present-icon-pop .64s var(--launch-delay) cubic-bezier(.22,.75,.3,1) both}
@keyframes gift-story-closed{0%{opacity:1}11%,100%{opacity:0}}
@keyframes gift-story-peek{0%{opacity:0}11%{opacity:1}23%,100%{opacity:0}}
@keyframes gift-story-lift{0%{opacity:0}23%{opacity:1}35%,100%{opacity:0}}
@keyframes gift-story-pop{0%{opacity:0}35%{opacity:1}45%,100%{opacity:0}}
@keyframes gift-story-burst{0%{opacity:0}45%{opacity:1}78%,100%{opacity:0}}
@keyframes gift-story-doya{0%{opacity:0}78%,100%{opacity:1}}
@keyframes gift-story-body{0%,10%,100%{transform:rotate(0) translateY(0) scale(1)}2%,6%{transform:rotate(-2deg)}4%,8%{transform:rotate(2deg)}23%{transform:translateY(1px)}28%{transform:translateY(-3px)}35%{transform:translateY(0)}38%{transform:translateY(-5px)}43%{transform:translateY(0) scale(1)}45%{transform:translateY(0) scale(.98)}49%{transform:translateY(-8px) scale(1.03)}55%,78%{transform:translateY(0) scale(1)}81%{transform:rotate(-1deg)}87%{transform:rotate(0)}}
@keyframes gift-doya-caption{0%{opacity:0;transform:translateY(6px) rotate(3deg) scale(.8)}75%{opacity:1;transform:translateY(-2px) rotate(11deg) scale(1.05)}100%{opacity:1;transform:translateY(0) rotate(9deg) scale(1)}}
@keyframes present-icon-pop{0%{transform:translate(var(--launch-x),var(--launch-y)) scale(.12) rotate(-12deg);opacity:0;visibility:hidden}3%{visibility:visible}28%{opacity:1}74%{transform:translate(0,-8px) scale(1.05) rotate(3deg);opacity:1;visibility:visible}100%{transform:translate(0,0) scale(1) rotate(0);opacity:1;visibility:visible}}
@media(max-width:760px){
 #benefits .gift-opening{width:calc(100% + 8px);margin:23px -4px 26px}
 #benefits .gift-opening-stage{aspect-ratio:680/480}
 #benefits .gift-doya-caption{font-size:clamp(12px,3.7vw,24px);right:9%;top:37%}
 #benefits .gift-opening-replay{width:24px;height:24px;font-size:18px;bottom:-10px;right:1px}
 #benefits .launch-consult,#benefits .launch-share{top:57%}
}
@media(prefers-reduced-motion:reduce){#benefits .gift-opening:not(.replay-motion) *{animation:none!important;transition:none!important}#benefits .gift-opening-replay{display:none}}