/* Small moments of play, with a single control for ambient motion. */
.hero-copy>p,.hero-copy>h1,.hero-copy>.hero-actions,.hero-copy>.hero-note{animation:welcome-in .8s both}
.hero-copy>h1{animation-delay:.08s}.hero-copy>.hero-description{animation-delay:.16s}.hero-copy>.hero-actions{animation-delay:.24s}.hero-copy>.hero-note{animation-delay:.32s}
.game-on{position:relative;display:inline-block;padding-right:34px}
.hero-spark{position:absolute;width:29px;height:29px;right:-7px;top:5px;stroke:var(--red);stroke-width:2;fill:none;stroke-linecap:round;animation:spark-turn 12s ease-in-out infinite}
.hero-underline{position:absolute;left:0;bottom:-8px;width:92%;height:15px;fill:none;stroke:var(--red);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:350;stroke-dashoffset:350;animation:draw-line 1s .5s forwards}
.hero-visual{perspective:1000px}
.hero-photo{box-shadow:0 18px 38px #31271916;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .45s ease,box-shadow .45s ease}
.hero-photo img{animation:photo-breathe 20s ease-in-out infinite alternate}
.play-seal{animation:seal-float 6s ease-in-out infinite;box-shadow:0 10px 24px #872b2429}
.photo-ticket{animation:ticket-float 7s ease-in-out infinite;box-shadow:0 12px 30px #25251d20}
.hero-note.dice-play{gap:13px;margin-top:32px;align-items:center}
.roll-die{display:block;flex:none;width:46px;height:46px;padding:2px;transform:rotate(-10deg);transition:transform .25s;touch-action:manipulation}
.roll-die:hover{transform:rotate(8deg) translateY(-3px)}
.roll-die svg{width:100%;height:100%;fill:#fffcf8;stroke:var(--red);stroke-width:1.5;filter:drop-shadow(0 4px 3px #76292315)}
.roll-die circle{fill:var(--red);stroke:none}
.roll-die.is-rolling{animation:die-tumble .55s ease-out}
.dice-play>div{display:flex;flex-direction:column;gap:3px}
.dice-invitation{font-size:11px;color:var(--ink)}
#dice-result{font-size:10px;color:var(--muted)}
.play-ribbon{position:relative;display:flex;align-items:center;overflow:hidden;background:var(--red);color:#fff;margin-top:30px;height:64px}
.ribbon-window{width:100%;overflow:hidden;mask-image:linear-gradient(to right,#000 92%,transparent)}
.ribbon-track{display:flex;width:max-content;animation:ribbon-run 42s linear infinite}
.ribbon-group{display:flex;align-items:center;justify-content:space-around;gap:44px;padding-right:44px;min-width:100vw;flex-shrink:0}
.ribbon-group>span{font-size:12px;letter-spacing:1.9px;white-space:nowrap;font-weight:600}
.ribbon-group>.icon{width:25px;height:25px;transform:rotate(-12deg);opacity:.7}
.motion-toggle{position:absolute;right:16px;top:10px;width:44px;height:44px;display:grid;place-items:center;background:var(--red);border:1px solid #ffffff60;border-radius:50%;box-shadow:0 0 14px 12px var(--red)}
.motion-toggle:hover{background:#a92921}
.motion-toggle:focus-visible{outline-color:#fff;outline-offset:3px}
.motion-toggle .icon{width:17px;height:17px}.motion-toggle .play-symbol{display:none}
.motion-paused .motion-toggle .pause-symbol{display:none}.motion-paused .motion-toggle .play-symbol{display:block}
.the-good-stuff{gap:20px}
.good-thing,.good-thing:first-child,.good-thing:last-child{padding:27px;border:1px solid #e2dfd8;border-radius:12px;background:#fffdfa;box-shadow:0 5px 16px #25251d05;transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease,opacity .65s ease}
.good-thing:nth-child(2){transition-delay:.07s}.good-thing:nth-child(3){transition-delay:.14s}
.feature-icon{transition:transform .4s ease}
.menu-teaser{position:relative;overflow:hidden}
.menu-teaser>div:first-child{position:relative}
.menu-teaser h2{position:relative;z-index:1}
.menu-card-art{position:absolute;left:400px;top:44px;width:100px;height:135px;pointer-events:none}
.mini-card{position:absolute;width:78px;height:108px;border:1px solid #d5c9be;border-radius:9px;background:#fffcf8;box-shadow:0 6px 15px #3f241510;padding:9px;color:var(--red);display:flex;flex-direction:column;justify-content:space-between}
.mini-card>span{font:12px var(--serif)}.mini-card>span:last-child{align-self:flex-end;transform:rotate(180deg)}
.mini-card>.icon{width:30px;height:30px;align-self:center}
.card-back{transform:rotate(-18deg);left:-14px;top:0;background:#eee7e0;animation:card-sway-back 7s ease-in-out infinite}
.card-front{left:22px;top:13px;transform:rotate(10deg);animation:card-sway-front 7s ease-in-out infinite}
.coffee-steam{width:49px;height:56px;stroke:var(--red);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.steam-lines path{animation:steam-rise 3s ease-in-out infinite;transform-origin:bottom}.steam-lines path:nth-child(2){animation-delay:.4s}.steam-lines path:nth-child(3){animation-delay:.8s}
.menu-dialog[open]{animation:panel-appear .3s cubic-bezier(.2,.8,.2,1)}
.menu-dialog[open]::backdrop{animation:backdrop-appear .3s ease}
.button .icon{transition:transform .3s ease}.button:hover .icon{transform:rotate(-8deg) scale(1.12)}
.button:active{transform:translateY(1px) scale(.98)}
.desktop-nav a{position:relative}.desktop-nav a::after{content:'';position:absolute;bottom:6px;left:0;width:100%;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s}.desktop-nav a:hover::after{transform:scaleX(1)}
.visit-photo{box-shadow:0 15px 35px #30261c12}.visit-photo-label{box-shadow:0 5px 15px #20211f16}
.site-footer::before{content:'';display:block;height:10px;opacity:.28;background:repeating-conic-gradient(var(--red) 0% 25%,transparent 0% 50%) 0 0/20px 20px}
@media(hover:hover) and (pointer:fine){.good-thing:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 16px 28px #35271f12;border-color:#d4b5a8}.good-thing:hover .feature-icon{transform:rotate(-9deg) scale(1.08)}.hero-photo:hover{box-shadow:0 23px 46px #31271922}}
@media(max-width:1100px){.menu-card-art{left:auto;right:3px;top:52px;transform:scale(.7);transform-origin:right top}.menu-teaser h2{max-width:290px}.good-thing,.good-thing:first-child,.good-thing:last-child{padding:22px}}
@media(max-width:760px){
  .hero-spark{width:24px;height:24px;right:0;top:6px}.hero-underline{height:10px;bottom:-5px}
  .hero-note.dice-play{margin-top:25px;gap:11px}.roll-die{width:43px;height:43px}.dice-invitation{font-size:10px}#dice-result{font-size:9px}
  .play-ribbon{height:54px;margin-top:20px}.ribbon-group{gap:26px;padding-right:26px}.ribbon-group>span{font-size:10px;letter-spacing:1.4px}.ribbon-group>.icon{width:21px;height:21px}.motion-toggle{right:10px;top:5px}
  .the-good-stuff{gap:14px}
  .good-thing,.good-thing:first-child,.good-thing:last-child{padding:24px 20px 24px 72px;border:1px solid #e2dfd8}
  .good-thing .feature-icon{left:20px;top:24px;width:32px;height:32px}.feature-top span{right:18px;top:23px}
  .good-thing h3{padding-right:20px}.good-thing p{font-size:12px}
  .menu-card-art{right:0;top:-12px;transform:scale(.45)}
  .coffee-steam{position:absolute;right:12px;bottom:51px;width:40px;height:49px;opacity:.8}
  .menu-teaser-copy{position:static}.menu-teaser-copy p{max-width:270px}
}
@media(max-width:360px){.menu-card-art{right:0;transform:scale(.38)}.menu-teaser h2{font-size:40px}.coffee-steam{right:4px;width:31px}.game-on{padding-right:25px}}
@keyframes welcome-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes draw-line{to{stroke-dashoffset:0}}
@keyframes photo-breathe{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes seal-float{0%,100%{transform:translateY(0) rotate(10deg)}50%{transform:translateY(-7px) rotate(4deg)}}
@keyframes ticket-float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-5px) rotate(-3deg)}}
@keyframes spark-turn{0%,65%,100%{transform:rotate(0deg) scale(1)}80%{transform:rotate(90deg) scale(.85)}}
@keyframes ribbon-run{to{transform:translateX(-50%)}}
@keyframes steam-rise{0%,100%{opacity:.25;transform:translateY(2px)}50%{opacity:.9;transform:translateY(-4px)}}
@keyframes card-sway-back{0%,100%{transform:rotate(-18deg)}50%{transform:translateY(-4px) rotate(-22deg)}}
@keyframes card-sway-front{0%,100%{transform:rotate(10deg)}50%{transform:translateY(-6px) rotate(14deg)}}
@keyframes die-tumble{0%{transform:rotate(-10deg)}30%{transform:translateY(-10px) rotate(150deg)}70%{transform:translateY(-3px) rotate(300deg)}100%{transform:rotate(350deg)}}
@keyframes panel-appear{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes backdrop-appear{from{opacity:0}to{opacity:1}}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
.motion-paused .hero-copy>*,.motion-paused .menu-dialog,.motion-paused .menu-category{animation:none!important}
.motion-paused .hero-underline{stroke-dashoffset:0}.motion-paused .reveal.is-waiting{opacity:1;transform:none}
.motion-paused .hero-photo{transform:none!important}.motion-paused .good-thing:hover{transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-underline{stroke-dashoffset:0}.hero-photo,.good-thing:hover{transform:none!important}
  .reveal.is-waiting{opacity:1;transform:none}
}
