/* Payment reveal starts with the result, after the shared action animation. */
.date-treat{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid color-mix(in srgb,var(--mint) 30%,transparent);border-radius:12px;background:color-mix(in srgb,var(--mint) 8%,var(--surface));}
.date-treat-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--mint);background:color-mix(in srgb,var(--mint) 13%,transparent)}
.date-treat-icon .icon{width:20px;height:20px}
.date-treat-copy{min-width:0}.date-treat-copy>strong{font-size:13px;line-height:1.5;color:var(--mint)}
.date-treat-copy>p{margin:3px 0 0;font-size:11px;line-height:1.5;word-break:keep-all;color:var(--muted)}
.date-treat-amount{display:flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap}
.date-treat-amount>span{font-size:9px;color:var(--muted)}.date-treat-amount>strong{font-size:24px;line-height:1.2;color:var(--mint)}
.date-treat.is-animated{animation:result-item-in 550ms 220ms ease-out both}
.date-treat.is-animated .date-treat-icon{animation:date-treat-pop 650ms 480ms ease-out both}
.date-treat.is-animated .date-treat-amount>strong{animation:date-treat-pop 600ms 660ms ease-out both}
.date-treat.is-animated::after{content:'';position:absolute;inset:-35% -70%;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 42%,color-mix(in srgb,var(--mint) 22%,transparent) 50%,transparent 58%);animation:date-treat-shine 1100ms 450ms ease-out both}
@keyframes date-treat-pop{from{opacity:0;transform:translateY(5px) scale(.85)}60%{opacity:1;transform:translateY(0) scale(1.06)}to{opacity:1;transform:none}}
@keyframes date-treat-shine{from{transform:translateX(-45%);opacity:0}20%{opacity:1}to{transform:translateX(45%);opacity:0}}
@media(max-width:600px){.date-treat{grid-template-columns:28px minmax(0,1fr) auto;gap:8px;padding:10px}.date-treat-icon{width:28px;height:28px}.date-treat-copy>strong{font-size:12px}.date-treat-copy>p{font-size:10px}.date-treat-amount>strong{font-size:21px}}
@media(max-width:800px) and (max-height:650px){.modal.relationship-result:has(.date-treat)>.result-content{gap:8px}}
.action-reveal { --action-duration: 1200ms; position: absolute; inset: 0; z-index: 3; isolation: isolate; color: var(--accent); overflow: hidden; }
.action-reveal::before { content: ''; position: absolute; inset: 0 0 0 44%; background: var(--surface); }
.action-reveal::after { content: ''; position: absolute; inset: 0 56% 0 0; pointer-events: none; background: linear-gradient(110deg,transparent 30%,#30223735); }
.action-reveal-panel { position: absolute; inset: 0 0 0 44%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 28px 20px; text-align: center; }
.action-reveal-heading .eyebrow { display: block; margin: 0 0 12px; font-size: 10px; letter-spacing: 2px; }
.action-reveal-heading h2 { margin: 0; color: var(--ink); font-size: clamp(20px,2vw,27px); line-height: 1.35; letter-spacing: -.7px; }
.action-reveal-heading p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.action-reveal-stage { position: relative; display: grid; place-items: center; width: 200px; height: 155px; flex: 0 1 155px; min-height: 65px; }
.action-drawing { position: relative; width: 100%; height: 100%; overflow: visible; }
.action-aura { position: absolute; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,currentColor 18%,transparent),transparent 69%); }
.action-reveal[data-action="growth"] { color: var(--mint); }
.action-sparkles { position: absolute; inset: 0; pointer-events: none; }
.action-sparkles>span { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; opacity: 0; }
.action-sparkles .icon { width: 100%; height: 100%; }
.action-reveal.is-playing .action-aura { animation: action-aura var(--action-duration) ease-in-out both; }
.action-reveal.is-playing .date-cup { animation: cup-arrive var(--action-duration) ease-out both; }
.cup-second { --cup-direction: 1; }
.cup-first { --cup-direction: -1; }
.action-reveal.is-playing .cup-steam { animation: steam-rise var(--action-duration) ease-out both; }
.action-reveal.is-playing .steam-second { animation-delay: 80ms; }
.gift-ribbon { transform-box: fill-box; transform-origin: center; }
.action-reveal.is-playing .gift-ribbon { animation: gift-open var(--action-duration) ease-in-out both; }
.action-reveal.is-playing .gift-glimmer { animation: gift-glimmer var(--action-duration) ease-out both; }
.action-reveal.is-playing .message-first { animation: message-in var(--action-duration) ease-out both; }
.action-reveal.is-playing .message-second { animation: message-reply var(--action-duration) ease-out both; }
.action-reveal.is-playing .message-dot { animation: message-dot 500ms ease-in-out 2 both; }
.action-reveal.is-playing .dot-two { animation-delay: 100ms; }
.action-reveal.is-playing .dot-three { animation-delay: 200ms; }
.growth-star { transform-origin: 100px 80px; }
.action-reveal.is-playing .growth-star { animation: growth-bloom var(--action-duration) ease-out both; }
.action-reveal.is-playing .growth-rays { animation: gift-glimmer var(--action-duration) ease-out both; }
.action-reveal.is-playing .action-sparkles>span { animation: action-sparkle var(--action-duration) ease-out both; animation-delay: var(--delay); }
.is-action-revealing .growth-result-art::after { content: ''; position: absolute; inset: -20% -50%; background: linear-gradient(105deg,transparent 35%,#ffffff60 50%,transparent 65%); animation: activity-light 900ms ease-in-out both; pointer-events: none; }
.action-result>.growth-result-art { position: relative; overflow: hidden; }
.action-result>.growth-result-art img { position: absolute; inset: 0; }
@keyframes action-result-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes action-aura { 0% { opacity: .3; transform: scale(.8); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: .5; transform: scale(1); } }
@keyframes cup-arrive { 0% { opacity: 0; transform: translateX(calc(var(--cup-direction)*13px)); } 35%,100% { opacity: 1; transform: none; } }
@keyframes steam-rise { 0%,15% { opacity: 0; transform: translateY(9px); } 55% { opacity: .85; } 100% { opacity: .25; transform: translateY(-7px); } }
@keyframes gift-open { 0%,30% { transform: none; } 65%,100% { transform: translate(-5px,-20px) rotate(-8deg); } }
@keyframes gift-glimmer { 0%,38% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: .4; } }
@keyframes message-in { 0% { opacity: 0; transform: translate(-10px,5px); } 25%,100% { opacity: 1; transform: none; } }
@keyframes message-reply { 0%,40% { opacity: 0; transform: translate(9px,8px); } 75%,100% { opacity: 1; transform: none; } }
@keyframes message-dot { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes growth-bloom { 0% { opacity: .15; transform: scale(.65) rotate(-10deg); } 65% { opacity: 1; transform: scale(1.08) rotate(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes action-sparkle { 0%,25% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 60% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) rotate(var(--turn)) scale(.8); } }
@keyframes activity-light { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
@media(max-width:800px) {
  .dialog-illustrated .action-reveal::before { inset: var(--result-art-height) 0 0; }
  .dialog-illustrated .action-reveal::after { inset: 0 0 auto; height: var(--result-art-height); }
  .dialog-illustrated .action-reveal-panel { inset: var(--result-art-height) 0 0; }
  .action-reveal-panel { gap: 12px; padding: 16px; }
  .action-reveal-stage { width: 140px; flex-basis: 105px; height: 105px; }
  .action-aura { width: 125px; height: 125px; }
  .action-reveal-heading .eyebrow { margin-bottom: 7px; font-size: 9px; }
  .action-reveal-heading h2 { font-size: 22px; }
  .action-reveal-heading p { margin-top: 5px; font-size: 12px; }
}
@media(max-width:600px) {
  .growth-result .action-reveal-panel { gap: 9px; padding: 12px; }
  .growth-result .action-reveal-stage { flex-basis: 80px; height: 80px; width: 110px; }
  .growth-result .action-reveal-heading .eyebrow { display: none; }
  .growth-result .action-reveal-heading h2 { font-size: 20px; }
}