.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; }
.charm-reward>b { position: relative; display: inline-block; animation: charm-rise 550ms cubic-bezier(.18,.8,.3,1) both; }
.charm-reward>b::after { content: '✦'; position: absolute; right: -19px; top: -9px; font-size: 15px; opacity: 0; animation: charm-twinkle 550ms 150ms ease-out both; }
.charm-reward>.icon { animation: charm-icon 650ms ease-out both; }
@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%); } }
@keyframes charm-rise { 0% { opacity: 0; transform: translateY(12px) scale(.9); } 65% { opacity: 1; transform: translateY(-2px) scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes charm-twinkle { 0% { opacity: 0; transform: scale(.3); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-7px) scale(1.15) rotate(35deg); } }
@keyframes charm-icon { 0% { transform: scale(.75) rotate(-15deg); } 55% { transform: scale(1.2) rotate(12deg); } 100% { transform: none; } }
@media(max-width:800px) {
  .hero-result .action-reveal::before { inset: var(--result-art-height) 0 0; }
  .hero-result .action-reveal::after { inset: 0 0 auto; height: var(--result-art-height); }
  .hero-result .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::before { inset: min(30dvh,235px) 0 0; }
  .growth-result .action-reveal::after { inset: 0 0 auto; height: min(30dvh,235px); }
  .growth-result .action-reveal-panel { inset: min(30dvh,235px) 0 0; 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; }
}