.hero-illustration{position:relative;width:100%;max-width:552px;line-height:0}
.hero-art.cafe-concept .hero-illustration img{display:block;width:100%;height:auto;max-height:none}
.hero-details{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hero-record-spin{animation:hero-vinyl-turn 16s linear infinite;transform-origin:0 0}
.hero-steam{stroke-width:3.1}
.steam-wisp{opacity:0;animation:hero-coffee-steam 6.8s ease-in-out infinite}
.steam-second{animation-delay:-3.5s;animation-duration:7.5s}
.steam-table{animation-delay:-1.8s;animation-duration:8s}
.steam-table-second{animation-delay:-5s;animation-duration:7.3s}
@keyframes hero-vinyl-turn{to{transform:rotate(360deg)}}
@keyframes hero-coffee-steam{0%,100%{opacity:0;transform:translate(0,3px)}25%{opacity:.38}65%{opacity:.23}85%{opacity:0;transform:translate(3px,-18px)}}
.hero-motion-toggle{position:absolute;top:34px;right:28px;border:0;border-bottom:1px solid var(--line);padding:2px 0;background:var(--cream);font-size:10px;color:var(--muted);z-index:1}
.hero-is-paused .hero-record-spin,.hero-is-paused .steam-wisp,.hero-is-outside .hero-record-spin,.hero-is-outside .steam-wisp{animation-play-state:paused}
@media(max-width:700px){.hero-illustration{max-width:464px}.hero-motion-toggle{top:29px;right:10px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.hero-details,.hero-motion-toggle{display:none}.hero-record-spin,.steam-wisp{animation:none}}