@charset "UTF-8";
/* 喫茶 余白：営業状況、湯気、紙の質感、写真の光 */
body::after { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* 営業状況 */
.open-status { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; letter-spacing: .06em; line-height: 1.6; }
.open-status.is-hero { align-self: flex-start; margin: 0 0 26px; padding: 8px 15px 8px 12px; border: 1px solid var(--line); border-radius: 30px; background: #fffdf8b0; }
.open-status.is-visit { margin: 22px 0 4px; padding: 16px 18px; background: #ede6d8; }
.open-title { font-weight: 600; color: var(--ink); }
.open-detail { color: var(--muted); }
.open-note { flex-basis: 100%; font-size: 9px; color: var(--muted); }
.open-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #a39a88; flex: none; }
[data-state="open"] .open-dot { background: #6f8a52; }
[data-state="open"] .open-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: yh-ping 2.6s ease-out infinite; }
[data-state="last"] .open-dot, [data-state="before"] .open-dot { background: var(--accent); }
@keyframes yh-ping { from { transform: scale(1); opacity: .6; } to { transform: scale(3.2); opacity: 0; } }

/* ヒーロー写真：ゆっくり寄る、差し込む光、縦書き */
.hero-photo { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .hero-photo > img { animation: yh-drift 30s ease-in-out infinite alternate; }
  .hero h1 { animation: yh-ink 1.8s cubic-bezier(.2, .6, .2, 1) .1s both; }
  .light-leak { animation: yh-leak 14s ease-in-out infinite alternate; }
}
@keyframes yh-drift { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, 1%); } }
@keyframes yh-ink { from { opacity: 0; filter: blur(8px); } }
@keyframes yh-leak { from { transform: translate(-4%, -3%) rotate(-4deg); opacity: .65; } to { transform: translate(5%, 4%) rotate(3deg); opacity: 1; } }
.light-leak { position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(30% 24% at 72% 22%, #ffd9a055, transparent 70%), radial-gradient(22% 30% at 88% 46%, #ffe7bf40, transparent 70%), linear-gradient(115deg, transparent 45%, #fff2d626 52%, transparent 60%); }
.vertical-copy { position: absolute; left: 34px; top: 34px; z-index: 1; writing-mode: vertical-rl; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 15px; letter-spacing: .5em; color: #fff; text-shadow: 0 1px 14px #2a1a0d99; }

/* お品書き：湯気とカード */
.cup-art .steam { position: absolute; z-index: 2; left: 50%; top: 18px; width: 54px; margin-left: -30px; pointer-events: none; }
.steam svg { width: 100%; overflow: visible; }
.steam path { fill: none; stroke: #fffaf0; stroke-width: 3; stroke-linecap: round; opacity: 0; filter: blur(1.5px); }
@media (prefers-reduced-motion: no-preference) {
  .steam path { animation: yh-steam 4.2s ease-in-out infinite; }
  .steam path:nth-child(2) { animation-delay: 1.4s; }
  .steam path:nth-child(3) { animation-delay: 2.8s; }
  [role="tabpanel"]:not([hidden]) .menu-card { animation: yh-card .8s cubic-bezier(.2, .7, .2, 1) both; }
  [role="tabpanel"]:not([hidden]) .menu-card:nth-child(2) { animation-delay: .08s; }
  [role="tabpanel"]:not([hidden]) .menu-card:nth-child(3) { animation-delay: .16s; }
}
@keyframes yh-steam { 0% { opacity: 0; transform: translateY(14px) scaleX(.8); } 35% { opacity: .85; } 100% { opacity: 0; transform: translateY(-22px) scaleX(1.25); } }
@keyframes yh-card { from { opacity: 0; translate: 0 14px; } }
.cup-art, .sweet-symbol { transition: background-color .5s; }
.cup-art > span { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.menu-card:hover .cup-art { background: #e4dccb; }
.menu-card:hover .cup-art > span { transform: translateY(-4px) rotate(-3deg); }
.sweet-symbol { transition: transform .6s cubic-bezier(.2, .8, .2, 1), background-color .5s; }
.menu-card:hover .sweet-symbol { background: #e3d6c1; }

/* 過ごし方の写真：スクロールに合わせてわずかに動く */
.space-photo { overflow: hidden; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .space-photo img { animation: yh-parallax linear both; animation-timeline: view(); }
  }
}
@keyframes yh-parallax { from { transform: scale(1.15) translateY(-5%); } to { transform: scale(1.15) translateY(5%); } }

@media (max-width: 700px) {
  .open-status { font-size: 10px; }
  .open-status.is-hero { margin-bottom: 20px; }
  .vertical-copy { left: 20px; top: 20px; font-size: 12px; }
  .cup-art .steam { top: 6px; width: 40px; margin-left: -22px; }
}