.ritual-art{display:block;width:100%;height:auto;overflow:visible}.cup-stage.illustrated{height:auto;aspect-ratio:560/440;width:100%;max-width:600px}.illustrated .stage-word{top:8%;left:4%;font-size:clamp(60px,8vw,110px);opacity:.12}.ritual-art .milk-pour,.ritual-art .ritual-jug,.ritual-art .ritual-ball,.ritual-art .ritual-spoon,.ritual-art .ritual-steam,.ritual-art .ritual-toppings,.ritual-art .ritual-ripples{opacity:0;transform-box:fill-box;transform-origin:center}.ritual-art .liquid-top{fill:#fff1d0;transition:fill .8s}.illustrated[data-step="0"] .ritual-jug{opacity:1;animation:jug-pour 2.4s ease both}.illustrated[data-step="0"] .milk-pour{animation:milk-pour 2.4s ease both;transform-origin:top}.illustrated[data-step="1"] .ritual-ball{animation:bomb-drop 2.1s cubic-bezier(.22,.65,.36,1) both}.illustrated[data-step="1"] .ritual-ripples{animation:ripples 1.5s .9s ease-out both}.illustrated[data-step="1"] .liquid-top,.illustrated[data-step="2"] .liquid-top{fill:#80513b}.illustrated[data-step="2"] .ritual-spoon{opacity:1;animation:spoon-stir 2.4s ease-in-out both;transform-origin:50% 82%}.illustrated[data-step="2"] .ritual-toppings{opacity:1;animation:toppings .7s ease-out both}.illustrated[data-step="2"] .ritual-steam{opacity:1;animation:steam-rise 3s ease-out both}.ritual-replay{display:inline-flex;align-items:center;gap:8px;background:none;border:0;border-bottom:1px solid currentColor;padding:8px 0;min-height:44px;margin-top:12px;font-size:12px;color:var(--cocoa)}.ritual-replay svg{width:16px;height:16px}@keyframes jug-pour{0%{opacity:0;transform:translate(12px,-12px) rotate(-8deg)}20%,75%{opacity:1;transform:rotate(10deg)}100%{opacity:1;transform:rotate(0)}}@keyframes milk-pour{0%,12%{opacity:0;transform:scaleY(0)}25%,72%{opacity:1;transform:scaleY(1)}95%,100%{opacity:0;transform:scaleY(0)}}@keyframes bomb-drop{0%{opacity:0;transform:translateY(-35px) rotate(-16deg)}15%,35%{opacity:1;transform:translateY(0) rotate(-8deg)}65%{opacity:1;transform:translateY(88px) rotate(15deg) scale(.9)}85%,100%{opacity:0;transform:translateY(115px) scale(.55)}}@keyframes ripples{0%{opacity:0;transform:scale(.3)}25%{opacity:.8}100%{opacity:0;transform:scale(1.25)}}@keyframes spoon-stir{0%{transform:rotate(-12deg)}25%{transform:rotate(10deg)}50%{transform:rotate(-10deg)}75%{transform:rotate(8deg)}100%{transform:rotate(0)}}@keyframes toppings{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes steam-rise{from{opacity:0;transform:translateY(15px)}35%{opacity:.7}to{opacity:.65;transform:translateY(-8px)}}@media(max-width:640px){.cup-stage.illustrated{margin-top:14px;max-width:420px}.illustrated .stage-word{font-size:72px}.ritual-replay{font-size:11px}}@media(prefers-reduced-motion:reduce){.ritual-art *{animation:none!important;transition:none!important}.illustrated[data-step="0"] .milk-pour{opacity:1;transform:none}.illustrated[data-step="1"] .ritual-ball{opacity:1;transform:none}.illustrated[data-step="2"] .ritual-spoon,.illustrated[data-step="2"] .ritual-steam,.illustrated[data-step="2"] .ritual-toppings{opacity:1;transform:none}}
/* The illustration and all three captions stay together while scroll sets progress. */
.ritual{height:220vh;min-height:1100px;padding-top:0;padding-bottom:0;position:relative;overflow:visible}.ritual-sticky{position:sticky;top:24px;padding:40px 0 24px}.ritual-heading h2{font-size:clamp(40px,5vw,68px)}.ritual-workspace{margin-top:8px;grid-template-columns:1.1fr 1fr;gap:6%}.cup-stage.illustrated{max-width:550px}.ritual-buttons button{min-height:94px;opacity:.48;transition:opacity .3s}.ritual-buttons button[aria-pressed=true]{opacity:1}.ritual-buttons button>.ritual-step-copy{display:block;border:0;border-radius:0;width:auto;height:auto;text-align:left;background:transparent;color:inherit;font:inherit}.ritual-step-copy strong{display:block;font-size:18px;font-weight:600}.ritual-step-copy small{display:block;font-size:13px;line-height:1.5;margin-top:5px;font-weight:400}.ritual-buttons button[aria-pressed=true]>.ritual-step-copy{background:transparent;color:inherit}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.illustrated .ritual-art .milk-landing{opacity:0}.illustrated .ritual-art .liquid-top{transition:none}.illustrated[data-step="0"] .ritual-jug{opacity:1;animation:none;transform:none}.illustrated[data-step="0"] .milk-pour{opacity:1;animation:none;stroke-dasharray:100;stroke-dashoffset:clamp(0,calc(100 - var(--phase,0)*210),100)}.illustrated[data-step="0"] .milk-landing{opacity:clamp(0,calc(var(--phase,0)*6 - 2.8),1)}.illustrated[data-step="1"] .ritual-ball{animation:bomb-scroll 1s linear both paused;animation-delay:calc(var(--phase,0)*-1s)}.illustrated[data-step="1"] .ritual-ripples{animation:ripple-scroll 1s linear both paused;animation-delay:calc(var(--phase,0)*-1s)}.illustrated[data-step="1"] .liquid-top{fill:#fff1d0;animation:chocolate-melt 1s linear both paused;animation-delay:calc(var(--phase,0)*-1s)}.illustrated[data-step="2"] .ritual-spoon{animation:spoon-stir 1s linear both paused;animation-delay:calc(var(--phase,0)*-1s)}.illustrated[data-step="2"] .ritual-toppings{animation:none;opacity:1}.illustrated[data-step="2"] .ritual-steam{animation:none;opacity:.6;transform:translateY(calc(var(--phase,0)*-15px))}.illustrated .stage-word{font-size:clamp(58px,7vw,90px);top:6%;left:0}
@keyframes bomb-scroll{0%{opacity:1;transform:translateY(-8px)}35%{opacity:1;transform:translateY(30px) rotate(8deg)}70%{opacity:1;transform:translateY(101px) scale(.85)}100%{opacity:0;transform:translateY(115px) scale(.4)}}@keyframes ripple-scroll{0%,40%{opacity:0;transform:scale(.4)}75%{opacity:.8;transform:scale(.85)}100%{opacity:0;transform:scale(1.1)}}@keyframes chocolate-melt{0%,40%{fill:#fff1d0}100%{fill:#80513b}}
@media(max-width:640px){.ritual{height:230vh;min-height:1150px;padding:0 6%}.ritual-sticky{top:12px;padding-top:22px;padding-bottom:15px}.ritual-heading h2{font-size:34px;line-height:1}.ritual-heading h2 br{display:none}.ritual-heading>p{font-size:11px;margin-top:10px}.ritual-workspace{margin-top:0;gap:0}.cup-stage.illustrated{max-width:310px;margin:0 auto;aspect-ratio:560/440}.illustrated .stage-word{font-size:60px;top:8%;left:2%}.ritual-buttons{margin-top:0}.ritual-buttons button{min-height:71px;padding:9px 2px;gap:12px}.ritual-step-copy strong{font-size:15px}.ritual-step-copy small{font-size:11px;margin-top:3px}.ritual-buttons button>span:first-child{width:27px;height:27px}.ritual-panel{margin-top:-6px}}@media(max-height:650px) and (min-width:641px){.ritual-sticky{top:8px;padding-top:15px}.ritual-heading h2{font-size:38px}.cup-stage.illustrated{max-width:390px}.ritual-buttons button{min-height:75px}}@media(max-height:700px) and (max-width:640px){.ritual-heading h2{font-size:29px}.cup-stage.illustrated{max-width:240px}.ritual-buttons button{min-height:62px}.ritual-sticky{padding-top:12px;top:5px}}
@media(prefers-reduced-motion:reduce){.illustrated .ritual-art *{animation:none!important;transition:none!important}.illustrated[data-step="1"] .ritual-ball{opacity:1;transform:translateY(15px)}.illustrated[data-step="0"] .milk-pour{stroke-dashoffset:0}.ritual-buttons button{transition:none}}
.illustrated[data-step="0"] .ritual-jug{transform:rotate(23deg);transform-origin:218px 102px;transform-box:view-box}.ritual-buttons button>.ritual-step-copy{flex:1;min-width:0;place-items:normal}.ritual-step-copy strong,.ritual-step-copy small{text-align:left}
.ritual-buttons button{opacity:1;color:#705c55}.ritual-buttons button[aria-pressed=true]{color:var(--cocoa)}.ritual-buttons button[aria-pressed=false] .ritual-step-copy strong{font-weight:400}.ritual-buttons button:hover{color:var(--cocoa)}