/* ---- 木もれ日とカップ ---- */
.hero-art{cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hero-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.lights .sp{transform-box:fill-box;transform-origin:center;animation:dapple 7s ease-in-out infinite}
.lights .sp:nth-child(2){animation-delay:-2s;animation-duration:9s}
.lights .sp:nth-child(3){animation-delay:-4s}
.lights .sp:nth-child(4){animation-delay:-1s;animation-duration:8s}
.lights .sp:nth-child(5){animation-delay:-5s;animation-duration:6s}
.lights .sp:nth-child(6){animation-delay:-3s}
@keyframes dapple{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(14px,6px) scale(1.18)}}
.leaves .lf{transform-box:fill-box;transform-origin:left center;animation:sway 5s ease-in-out infinite}
.leaves g:nth-child(even) .lf{animation-delay:-2.5s;animation-duration:6s}
@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
#pot{transition:none}
#cup{transform-box:fill-box;transform-origin:50% 100%}
#cup.sip{animation:sip .6s ease}
#cup.full{animation:done .5s ease}
@keyframes sip{40%{transform:rotate(-7deg) translateY(-8px)}}
@keyframes done{40%{transform:scale(1.04)}}
.hint-touch{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);white-space:nowrap;background:rgba(58,42,32,.86);color:#fffaf2;font-size:13px;letter-spacing:.06em;padding:6px 16px;border-radius:99px;pointer-events:none;transition:opacity .6s}
.cup-count{position:absolute;right:16px;top:14px;background:rgba(255,250,242,.92);color:var(--bean);font-size:13px;font-weight:700;padding:3px 12px;border-radius:99px;pointer-events:none;transform-origin:center}
.cup-count.bump{animation:bump .5s cubic-bezier(.2,.9,.3,1.6)}
@keyframes bump{40%{transform:scale(1.25)}}
.pour-ui{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.pour-ui button{font-family:inherit;font-weight:700;font-size:15px;border-radius:99px;padding:10px 22px;cursor:pointer;border:2px solid var(--roast);background:var(--roast);color:var(--milk);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pour-ui button.sub{background:transparent;color:var(--roast)}
.pour-ui button:disabled{opacity:.4;cursor:default}
.pour-ui button[aria-pressed=true]{background:var(--bean);border-color:var(--bean)}
.pour-msg{flex-basis:100%;font-size:14px;color:var(--sub);min-height:1.9em}
.puff{position:absolute;pointer-events:none;font-family:"Zen Old Mincho",serif;font-weight:700;font-size:22px;color:#fffaf2;animation:puff 1.2s ease-out forwards;text-shadow:0 2px 8px rgba(0,0,0,.3)}
@keyframes puff{0%{opacity:0;transform:translate(-50%,0) scale(.8)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-48px) scale(1.1)}}

/* ---- メニューのタブ ---- */
.tabs{display:flex;gap:8px;margin-top:4px;border-bottom:2px solid var(--bean)}
.tab{flex:1;font-family:"Zen Old Mincho",serif;font-weight:700;font-size:17px;background:transparent;color:var(--sub);border:0;border-radius:16px 16px 0 0;padding:12px 6px 10px;cursor:pointer;transition:background .2s,color .2s}
.tab:hover{color:var(--bean)}
.tab[aria-selected=true]{background:var(--bean);color:var(--milk)}
.tabbed .menu-group{margin-top:8px}
.tabbed .menu-group h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tabbed .menu-group:not([hidden]){animation:fadein .4s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}}
.row.flash{animation:flash 1.8s ease}
@keyframes flash{0%,60%{background:rgba(240,198,110,.55)}100%{background:transparent}}

/* ---- 気分で選ぶ ---- */
.moods{display:flex;flex-wrap:wrap;gap:10px}
.mood-btn{font-family:inherit;font-weight:700;font-size:15px;background:var(--milk);color:var(--bean);border:2px solid var(--line);border-radius:99px;padding:10px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,border-color .2s,background .2s}
.mood-btn:hover{transform:translateY(-2px);border-color:var(--copper)}
.mood-btn[aria-pressed=true]{background:var(--roast);color:var(--milk);border-color:var(--roast)}
.mood-btn span{font-size:18px;line-height:1}
.pick{margin-top:24px;background:var(--milk);border-radius:28px;min-height:230px;padding:26px 24px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(58,42,32,.08)}
.pick-empty{text-align:center;color:var(--sub)}
.pick-empty svg{width:110px;display:block;margin:0 auto 6px}
.wisp{animation:wisp 2.4s ease-in-out infinite}
@keyframes wisp{50%{transform:translateY(-4px);opacity:.4}}
.card{width:100%;display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center}
.card svg{width:120px;height:120px}
.card .cat{display:inline-block;font-size:12px;font-weight:700;color:var(--milk);background:var(--leaf);border-radius:99px;padding:1px 12px}
.card .name{font-family:"Zen Old Mincho",serif;font-weight:700;font-size:clamp(22px,3vw,28px);line-height:1.4;margin-top:6px}
.card .name b{font-family:"Zen Maru Gothic",sans-serif;font-size:17px;color:var(--copper);margin-left:10px;white-space:nowrap}
.card .why{color:var(--sub);font-size:15px;margin-top:4px}
.card .pair{font-size:14px;margin-top:6px}
.card .go{margin-top:12px;font-family:inherit;font-weight:700;font-size:14px;background:transparent;border:0;color:var(--roast);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:4px 0}
.card.spin .name{animation:blink .09s steps(1) infinite}
.card.spin svg{animation:wob .3s ease-in-out infinite}
.card.land{animation:land .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes blink{50%{opacity:.5}}
@keyframes wob{50%{transform:rotate(8deg)}}
@keyframes land{0%{transform:scale(.94)}60%{transform:scale(1.02)}}

/* ---- いま営業中か ---- */
#open-now{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,250,242,.4);border-radius:99px;padding:5px 16px;font-size:14px;margin-top:18px}
#open-now i{width:9px;height:9px;border-radius:50%;background:#9b958a;flex:none}
#open-now.on i{background:#a9df8e;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(169,223,142,.7)}100%{box-shadow:0 0 0 12px rgba(169,223,142,0)}}

.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

@media (max-width:760px){
  .tab{font-size:15px}
  .card{grid-template-columns:80px 1fr;gap:14px}
  .card svg{width:80px;height:80px}
  .pick{padding:22px 18px}
  .mood-btn{font-size:14px;padding:9px 14px}
}
@media (prefers-reduced-motion:reduce){
  .lights .sp,.leaves .lf,.wisp,#open-now.on i,#cup.sip,#cup.full,.card.spin .name,.card.spin svg,.card.land,.tabbed .menu-group:not([hidden]),.cup-count.bump{animation:none}
  .rv{opacity:1;transform:none;transition:none}
}