@charset "UTF-8";
/* Benefit 02: a conversation that moves from a heavy heart to shared relief. */
#benefits #gift-talk .gift-talk-scene{position:relative;width:100%;max-width:420px;aspect-ratio:400/365;height:auto;margin:18px auto 8px;isolation:isolate;container-type:inline-size}
#benefits #gift-talk .gift-talk-scene:before{inset:40% 0 0;background:#fffdf65c;transform:rotate(-3deg)}
#gift-talk .talk-scene-pictures{position:absolute;left:-2%;right:-2%;bottom:0;aspect-ratio:3/2;pointer-events:none}
#gift-talk .talk-frame{position:absolute;inset:0;background-image:url('assets/toua-consultation-atlas-v1.webp');background-size:200% 200%;background-repeat:no-repeat;opacity:0;transition:opacity .28s ease;pointer-events:none}
#gift-talk .talk-frame-sad{background-position:0 0}
#gift-talk .talk-frame-arrive{background-position:100% 0}
#gift-talk .talk-frame-listen{background-position:100% 0}
#gift-talk .talk-frame-nod{background-image:url('assets/toua-consultation-nod-v2.webp');background-position:100% 0}
#gift-talk :is(.talk-frame-propose,.talk-frame-aha-ready,.talk-frame-aha-pon){bottom:-2%;background-image:url('assets/toua-consultation-proposal-v1.webp');background-size:200% auto;transform:translateY(-2%)}
#gift-talk .talk-frame-propose{background-position:0 0}
#gift-talk .talk-frame-aha-ready{background-position:100% 0}
#gift-talk .talk-frame-aha-pon{background-image:url('assets/toua-consultation-pon-v1.webp');background-position:100% 0}
#gift-talk [data-talk-state="propose"] .talk-frame-propose{opacity:1}
#gift-talk [data-talk-state="aha"] .talk-frame-aha-ready{transition:none;animation:talk-hand-ready .55s steps(1,end) both}
#gift-talk [data-talk-state="aha"] .talk-frame-aha-pon{opacity:1;transition:none;animation:talk-hand-pon .55s steps(1,end) both}
@keyframes talk-hand-ready{0%,64%{opacity:1}65%,100%{opacity:0}}
@keyframes talk-hand-pon{0%,64%{opacity:0}65%,100%{opacity:1}}
#gift-talk .talk-frame-tea{background-position:100% 100%;opacity:1}
#gift-talk [data-talk-state]:not([data-talk-state="tea"]):not([data-talk-state="complete"]) .talk-frame-tea{opacity:0}
#gift-talk :is([data-talk-state="ready"],[data-talk-state="sad"]) .talk-frame-sad{opacity:1}
#gift-talk :is([data-talk-state="arrive"],[data-talk-state="vent"]) .talk-frame-arrive{opacity:1}
#gift-talk [data-talk-state="listen"] .talk-frame-listen{opacity:1;transition:none;animation:talk-neck-up 1.05s steps(1,end) 3 both}
#gift-talk [data-talk-state="listen"] .talk-frame-nod{transition:none;animation:talk-neck-down 1.05s steps(1,end) 3 both}
/* These registered frames differ at the head; the table, torso and shoulders stay anchored. */
@keyframes talk-neck-up{0%,44%,100%{opacity:1}18%,28%{opacity:0}}
@keyframes talk-neck-down{0%,44%,100%{opacity:0}18%,28%{opacity:1}}
#gift-talk .talk-gloom{position:absolute;left:12%;top:10%;font-family:var(--hand);font-size:clamp(22px,7cqw,30px);color:#79748a;letter-spacing:.1em;transform:rotate(-8deg);opacity:0;transition:opacity .3s}
#gift-talk .talk-gloom::after{content:'';display:block;width:67%;height:21px;margin:3px 0 0 8px;background:repeating-linear-gradient(90deg,transparent 0 8px,#9b95aa80 8px 9px,transparent 9px 14px);mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent)}
#gift-talk :is([data-talk-state="ready"],[data-talk-state="sad"],[data-talk-state="arrive"]) .talk-gloom{opacity:1}
#gift-talk [data-talk-state="sad"] .talk-gloom{animation:talk-heavy 1.65s ease-out both}
@keyframes talk-heavy{from{transform:translateY(-7px) rotate(-8deg);opacity:0}30%{opacity:1}to{transform:translateY(3px) rotate(-8deg);opacity:1}}
#gift-talk .talk-emotions{position:absolute;inset:0;pointer-events:none;z-index:4}
#gift-talk .talk-emotion{--emotion:#8f80a7;position:absolute;display:grid;place-items:center;width:13%;aspect-ratio:1.24;border:1px solid var(--emotion);border-radius:47% 47% 45% 14%;background:#fffefa;color:var(--emotion);font:600 clamp(15px,4.8cqw,22px)/1 Georgia,serif;opacity:0;transform-origin:50% 110%;box-shadow:1px 2px 0 #4b365507}
#gift-talk .talk-emotion svg{display:block;width:60%;height:65%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#gift-talk .talk-emotion:nth-child(1){left:19%;top:22%;--delay:0s;--tilt:-10deg}
#gift-talk .talk-emotion:nth-child(2){left:35%;top:15%;--delay:.3s;--tilt:8deg;--emotion:#a88491}
#gift-talk .talk-emotion:nth-child(3){left:6%;top:12%;--delay:.6s;--tilt:-12deg;--emotion:#8ca8b7}
#gift-talk .talk-emotion:nth-child(4){left:23%;top:5%;--delay:.9s;--tilt:7deg;--emotion:#b98079}
#gift-talk .talk-emotion:nth-child(5){left:51%;top:7%;--delay:1.2s;--tilt:10deg}
#gift-talk .talk-emotion:nth-child(6){left:4%;top:27%;--delay:1.5s;--tilt:-7deg;--emotion:#ad93aa}
#gift-talk .talk-emotion:nth-child(7){left:38%;top:29%;--delay:1.8s;--tilt:9deg;--emotion:#8797b1}
#gift-talk .talk-emotion:nth-child(8){left:41%;top:0%;--delay:2.1s;--tilt:-8deg;--emotion:#b29a73}
#gift-talk .talk-emotion:nth-child(9){left:60%;top:20%;--delay:2.4s;--tilt:8deg;--emotion:#a784a4}
#gift-talk [data-talk-state="vent"] .talk-emotion{animation:talk-let-it-out .5s var(--delay) cubic-bezier(.2,.7,.3,1.2) both}
#gift-talk [data-talk-state="listen"] .talk-emotion{animation:talk-cloud-clear 1.1s calc(var(--delay)*.22) ease-out both}
@keyframes talk-let-it-out{from{opacity:0;transform:translateY(22px) scale(.4) rotate(var(--tilt))}65%{opacity:1;transform:translateY(-3px) scale(1.08) rotate(var(--tilt))}to{opacity:1;transform:translateY(0) scale(1) rotate(var(--tilt))}}
@keyframes talk-cloud-clear{from{opacity:.85;transform:translateY(0) scale(1) rotate(var(--tilt))}to{opacity:0;transform:translateY(-18px) scale(.8) rotate(var(--tilt))}}
#gift-talk .talk-acknowledge{position:absolute;right:2%;top:15%;font-family:var(--hand);font-size:clamp(20px,6.7cqw,29px);color:#607a5d;transform:rotate(7deg);opacity:0;z-index:5}
#gift-talk .talk-acknowledge::after{content:'';position:absolute;left:25%;bottom:-6px;width:35%;height:5px;border-bottom:1px solid #99b095;border-radius:50%}
#gift-talk [data-talk-state="listen"] .talk-acknowledge{animation:talk-yes 1.05s ease-in-out 3 both}
@keyframes talk-yes{0%{opacity:.8;transform:translateY(0) rotate(7deg)}23%{opacity:1;transform:translateY(3px) rotate(7deg)}50%,100%{opacity:1;transform:translateY(0) rotate(7deg)}}
#gift-talk .talk-proposal{position:absolute;right:6%;top:15%;padding:6px 14px 8px;border:1px solid #9eb194;border-radius:52% 47% 49% 43%;background:#fffef9;color:#607a5d;font:clamp(20px,6.5cqw,28px)/1.4 var(--hand);white-space:nowrap;transform:rotate(4deg);opacity:0;z-index:5;transition:opacity .25s}
#gift-talk .talk-proposal::after{content:'';position:absolute;bottom:-7px;left:36%;width:10px;height:12px;background:#fffef9;border-right:1px solid #9eb194;border-bottom:1px solid #9eb194;transform:skew(-22deg) rotate(38deg)}
#gift-talk :is([data-talk-state="propose"],[data-talk-state="aha"]) .talk-proposal{opacity:1}
#gift-talk [data-talk-state="propose"] .talk-proposal{animation:talk-propose-in .4s ease-out both}
@keyframes talk-propose-in{from{opacity:0;transform:translateY(5px) scale(.85) rotate(4deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(4deg)}}
#gift-talk .talk-idea-bulb{position:absolute;left:8%;top:9%;width:12%;height:auto;overflow:visible;opacity:0;transform:rotate(-24deg);transform-origin:50% 90%;z-index:5;pointer-events:none}
#gift-talk [data-talk-state="aha"] .talk-idea-bulb{opacity:1;animation:talk-idea-pop .65s .35s cubic-bezier(.2,.7,.3,1) both}
@keyframes talk-idea-pop{0%{opacity:0;transform:translateY(10px) scale(.25) rotate(-32deg)}55%{opacity:1;transform:translateY(-3px) scale(1.1) rotate(-19deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(-24deg)}}
#gift-talk .talk-pon-rays{position:absolute;left:37%;top:60%;width:10%;height:auto;fill:none;stroke:#d2ae47;stroke-width:2.5;stroke-linecap:round;opacity:0;z-index:5;pointer-events:none}
#gift-talk [data-talk-state="aha"] .talk-pon-rays{animation:talk-pon-pop .65s .35s ease-out both}
@keyframes talk-pon-pop{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:translateY(-4px) scale(1.2)}}
#gift-talk .talk-relief-note{position:absolute;left:32%;top:9%;font-family:var(--hand);font-size:clamp(24px,7.5cqw,32px);color:#73845f;transform:rotate(-7deg);opacity:0;transition:opacity .4s}
#gift-talk :is([data-talk-state="tea"],[data-talk-state="complete"]) .talk-relief-note{opacity:1}
#gift-talk .talk-tea-effects{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s}
#gift-talk :is([data-talk-state="tea"],[data-talk-state="complete"]) .talk-tea-effects{opacity:1}
#gift-talk .talk-sparkle{position:absolute;color:#d7b556;font:25px/1 Georgia,serif}
#gift-talk .talk-sparkle:nth-child(1){left:10%;top:28%;--delay:.1s}
#gift-talk .talk-sparkle:nth-child(2){right:3%;top:20%;font-size:31px;--delay:.4s}
#gift-talk .talk-sparkle:nth-child(3){right:13%;top:12%;font-size:15px;color:#b3c5a7;--delay:.7s}
#gift-talk [data-talk-state="tea"] .talk-sparkle{animation:talk-sparkle-pop .75s var(--delay) ease-out both}
@keyframes talk-sparkle-pop{from{opacity:0;transform:scale(0) rotate(-20deg)}65%{opacity:1;transform:scale(1.2) rotate(8deg)}to{opacity:1;transform:scale(1) rotate(0)}}
#gift-talk .talk-steam{position:absolute;width:5%;height:9%;top:48%;color:#a49c84;opacity:.55}
#gift-talk .talk-steam-one{left:43%}
#gift-talk .talk-steam-two{left:69%}
#gift-talk .talk-steam path{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round}
#gift-talk [data-talk-state="tea"] .talk-steam{animation:talk-tea-warm 1.5s ease-in-out 2}
#gift-talk [data-talk-state="tea"] .talk-steam-two{animation-delay:.25s}
@keyframes talk-tea-warm{0%,100%{opacity:.25;transform:translateY(2px)}55%{opacity:.7;transform:translateY(-5px)}}
@media(max-width:760px){#benefits #gift-talk .gift-talk-scene{max-width:360px;margin:12px auto 8px}}
@media(prefers-reduced-motion:reduce){#gift-talk .gift-talk-scene:not(.replay-motion) *{animation:none!important;transition:none!important}}