/* JavaScript adds reversible states; the original HTML is readable without it. */
[data-reveal-state="pending"]{opacity:0}
[data-reveal-state="entering"],[data-reveal-state="leaving"]{will-change:opacity,translate}

/* Each complete word keeps its natural width while letters are written inside it. */
reveal-word{display:inline-block;vertical-align:baseline;font:inherit;letter-spacing:inherit;color:inherit;white-space:nowrap}
.writing-ready reveal-word{clip-path:inset(-.18em clamp(0%,calc((var(--word-end) - var(--written)) * var(--letter-width)),100%) -.18em 0)}
/* Release the mask after typing so Safari can paint the entire final glyph. */
.writing-ready[data-reveal-state="shown"] reveal-word{clip-path:none}
.care-word{font-weight:750;color:#3b4533;text-shadow:0 1px 0 #fff8}

/* The original ceramic scene keeps its size and its slow, shared float. */
.tea-assembly{pointer-events:none}
.tea-canvas{position:absolute;top:50%;left:0;width:100%;aspect-ratio:1536 / 1024;transform:translateY(-50%);isolation:isolate}
.tea-piece{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;transform-origin:50% 74%}
.tea-piece--saucer{z-index:1}
.tea-piece--cup{z-index:2;top:-3.5%}
.tea-canvas[data-assembly-state="pending"] .tea-piece{opacity:0}
.tea-canvas[data-assembly-state="entering"] .tea-piece,.tea-canvas[data-assembly-state="leaving"] .tea-piece{will-change:transform,opacity}

.object-3d[data-object="heart"] .object-fallback{transform-origin:50% 53%;animation:heart-pulse 1.8s ease-in-out infinite}
@keyframes heart-pulse{
 0%,9%,46%,100%{scale:1}
 17%{scale:1.10}
 27%{scale:1.015}
 35%{scale:1.065}
}

@media(prefers-reduced-motion:reduce){
 [data-reveal-state],.tea-canvas[data-assembly-state] .tea-piece{opacity:1!important}
 .writing-ready reveal-word{clip-path:none!important}
 .object-3d[data-object="heart"] .object-fallback{animation:none}
}
html[data-motion="paused"] .writing-ready reveal-word{clip-path:none!important}
@media print{
 [data-reveal-state],.tea-canvas[data-assembly-state] .tea-piece{opacity:1!important;translate:none!important;transform:none!important;filter:none!important}
 .writing-ready reveal-word{clip-path:none!important}
}