/*
 * あさつゆ（架空のカフェ・Ai-de の制作見本）  2026-10-04  v2
 * 動きの部分だけをここに集める（基本の見た目は style.css）。
 * 方針: ゆっくり・やわらかく・あたたかく。動かすのは transform と opacity が中心。
 * 「動きを減らす」設定のときは、いちばん下で全部とめる。
 *
 * 目次
 *  1. 色を滑らかに変えるための登録
 *  2. トップの大きな写真（湯気・光・ゆっくり視差・名前が1文字ずつ）
 *  3. ボタン（コーヒーを注ぐように満ちる）
 *  4. コーヒーのしずくの区切り線
 *  5. 写真のあらわれ方（ぜんぶ同じ: 下から上へのやわらかいマスク＋写真が落ちつく）
 *  6. 朝→昼→夕
 *  7. メニューのカード（横にスワイプ）
 *  8. 動画（スマホ型の枠）
 *  9. 手描き風の「季節限定」ラベル
 * 10. PCだけ、カーソルに寄りそう光
 * 11. サブページの軽い演出
 * 12. 入口のとびら（トップだけ・最初に開いたとき）
 * 13. 動きを減らす設定
 */

/* ===== 1. 色の変化をなめらかにする（対応していない古いブラウザでは、すっと切り替わるだけ） ===== */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #f4ecdc; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #2c382f; }
@property --fg-soft { syntax: "<color>"; inherits: true; initial-value: #586459; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #44604d; }
@property --orb { syntax: "<color>"; inherits: true; initial-value: #ffe1a0; }

@keyframes fade-up { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes fade-blur { from { opacity: 0; filter: blur(12px); transform: translate3d(0, .2em, 0); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes ch-in { from { opacity: 0; filter: blur(18px); transform: translate3d(0, .28em, 0) scale(1.06); } to { opacity: 1; filter: blur(0); transform: none; } }

/* ===== 2. トップの大きな写真 ===== */
.hero {
  position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: min(86vh, 760px); min-height: min(86svh, 760px);
  color: #fff; overflow: hidden; background: #3a2a1e;
  /* 写真の縦横比と、カップの位置（写真の中の％）。湯気はここから立ちのぼる
     ※ここはスマホ用（latte-m-914.webp = ラテの写真を、カップが真ん中に来るよう切り出したもの） */
  --ar: .8926; --cx: 48%; --cy: 47%; --sw: 50%; --sh: 44%;
}
@media (min-width: 701px) {
  .hero { min-height: min(80vh, 760px); --ar: 1.5; --cx: 63.5%; --cy: 50%; --sw: 12%; --sh: 32%; }
}
/* 写真の台（視差でうごく）。上に12%はみ出させて、動いても端が見えないようにする */
.hero__media { position: absolute; inset: -12% 0 0 0; z-index: -3; container-type: size; }
.hero__stage { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 100%; height: 100%; will-change: transform; }
@supports (width: 1cqw) {
  /* 写真の縦横比を保ったまま、枠いっぱいに広げる（object-fit: cover と同じ考え方）→ 湯気の位置が写真とずれない */
  .hero__stage { width: max(100cqw, calc(100cqh * var(--ar))); height: auto; aspect-ratio: var(--ar); }
}
.hero__kb { position: absolute; inset: 0; transform-origin: var(--cx) var(--cy); animation: kb 30s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.04); } to { transform: scale(1.12); } }
.hero__kb picture, .hero__kb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* スマホ: コーヒーを大きく真ん中に。写真は幅いっぱい（ほぼ正方形）で上に置き、下は暗い茶色へとけこませて、その上に文字をのせる */
@media (max-width: 700px) {
  .hero { min-height: max(min(86vh, 760px), 640px); min-height: max(min(86svh, 760px), 640px); }  /* 背の低いスマホでも、カップが文字に隠れないように */
  .hero__stage { top: 10.714%; translate: -50% 0; width: 100%; height: auto; aspect-ratio: var(--ar); }
  .hero__kb picture { -webkit-mask-image: linear-gradient(#000 70%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(#000 70%, rgba(0, 0, 0, 0) 100%); }
}

/* 湯気: やわらかくぼかした白いかたまりが、ゆらゆら昇って消える */
.steam { position: absolute; left: var(--cx); top: var(--cy); width: var(--sw); height: var(--sh); translate: -50% -100%; pointer-events: none; }
.wisp {
  position: absolute; bottom: 0; left: calc(var(--x) * 1%); width: 62%; height: 62%; margin-left: -31%;
  border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(255, 251, 242, .62), rgba(255, 251, 242, .26) 55%, rgba(255, 251, 242, 0));
  filter: blur(7px);
  animation: steam-rise var(--t, 7s) ease-in-out var(--dl, 0s) infinite;
}
.wisp:nth-child(1) { --x: 28; --t: 7.2s; --dl: -1s; --dx: 12%; }
.wisp:nth-child(2) { --x: 52; --t: 8.4s; --dl: -4s; --dx: -14%; }
.wisp:nth-child(3) { --x: 70; --t: 6.6s; --dl: -2.5s; --dx: 10%; }
.wisp:nth-child(4) { --x: 40; --t: 9s; --dl: -6s; --dx: -9%; }
.wisp:nth-child(5) { --x: 60; --t: 7.8s; --dl: -3.2s; --dx: 16%; }
.wisp:nth-child(6) { --x: 46; --t: 10s; --dl: -7.5s; --dx: -12%; }
/* 小さな画面では、湯気をひとまわり濃く（ひと目で湯気とわかるように） */
@media (max-width: 700px) {
  .wisp { background: radial-gradient(closest-side, rgba(255, 251, 242, .82), rgba(255, 251, 242, .38) 55%, rgba(255, 251, 242, 0)); }
}
@keyframes steam-rise {
  0% { transform: translate3d(0, 30%, 0) scale(.5, .4); opacity: 0; }
  18% { opacity: .8; }
  55% { transform: translate3d(var(--dx, 8%), -75%, 0) scale(1, 1.25); opacity: .5; }
  100% { transform: translate3d(calc(var(--dx, 8%) * -1.5), -170%, 0) scale(1.5, 2); opacity: 0; }
}

/* 光: 窓の光がゆっくり揺れ、斜めの光の筋が横切る */
.hero__light { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.hero__light::before { content: ""; position: absolute; inset: -20% -10% 35% -30%; background: radial-gradient(ellipse at 25% 25%, rgba(255, 226, 170, .5), rgba(255, 226, 170, 0) 62%); animation: flicker 7s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: .55; } 22% { opacity: .85; } 41% { opacity: .62; } 63% { opacity: .95; } 80% { opacity: .7; } }
.beam { position: absolute; top: -25%; bottom: -25%; left: -30%; width: 36%; filter: blur(16px); will-change: transform, opacity;
  background: linear-gradient(90deg, rgba(255, 236, 196, 0), rgba(255, 236, 196, .24) 50%, rgba(255, 236, 196, 0)); animation: beam-sweep 18s ease-in-out infinite alternate; }
.beam--2 { width: 16%; animation-duration: 25s; animation-delay: -9s; opacity: .8; }
@keyframes beam-sweep {
  from { transform: translate3d(0, 0, 0) skewX(-18deg); opacity: .35; }
  50% { opacity: 1; }
  to { transform: translate3d(420%, 0, 0) skewX(-18deg); opacity: .45; }
}
/* 光のつぶ: 光の中をふわふわ漂う、ほこりのような小さなつぶ */
.motes span { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 220, .95), rgba(255, 244, 220, 0) 70%); opacity: 0; animation: mote var(--t, 14s) linear var(--dl, 0s) infinite; }
.motes span:nth-child(1) { left: 12%; bottom: 20%; width: 8px; height: 8px; --t: 15s; --dl: -2s; }
.motes span:nth-child(2) { left: 28%; bottom: 36%; width: 5px; height: 5px; --t: 12s; --dl: -7s; }
.motes span:nth-child(3) { left: 44%; bottom: 14%; width: 10px; height: 10px; --t: 18s; --dl: -4s; }
.motes span:nth-child(4) { left: 58%; bottom: 44%; width: 6px; height: 6px; --t: 13s; --dl: -9s; }
.motes span:nth-child(5) { left: 72%; bottom: 24%; width: 7px; height: 7px; --t: 16s; --dl: -1s; }
.motes span:nth-child(6) { left: 84%; bottom: 40%; width: 5px; height: 5px; --t: 14s; --dl: -11s; }
.motes span:nth-child(7) { left: 20%; bottom: 52%; width: 9px; height: 9px; --t: 20s; --dl: -13s; }
@keyframes mote { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: .85; } 85% { opacity: .5; } 100% { transform: translate3d(34px, -150px, 0); opacity: 0; } }

.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(30, 22, 15, .82) 0%, rgba(30, 22, 15, .46) 38%, rgba(30, 22, 15, 0) 70%),
              linear-gradient(to right, rgba(30, 22, 15, .32), rgba(30, 22, 15, 0) 56%); }

.hero__in { padding-block: 0 3.2rem; will-change: transform; }
.hero__sub { margin: 0 0 .2rem; font-size: 1rem; letter-spacing: .3em; }
.hero__name { font-size: clamp(3.6rem, 17vw, 5.6rem); line-height: 1.15; letter-spacing: .2em; margin-left: .1em; text-shadow: 0 2px 22px rgba(0, 0, 0, .35); }
.hero__name .ch { display: inline-block; animation: ch-in 1.7s cubic-bezier(.2, .7, .2, 1) both; }
/* ※ h1 の最初の子は読み上げ用の .sr-only なので、「あ」は2番目の子。1文字ずつ、順に登場する */
.hero__name .ch:nth-child(2) { animation-delay: .7s; }
.hero__name .ch:nth-child(3) { animation-delay: 1s; }
.hero__name .ch:nth-child(4) { animation-delay: 1.3s; }
.hero__name .ch:nth-child(5) { animation-delay: 1.6s; }
.hero__catch { margin: .9rem 0 1.6rem; font-family: var(--serif); font-size: clamp(1.2rem, 5vw, 1.6rem); line-height: 1.8; letter-spacing: .1em; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.hero__btns { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__sub, .hero__catch, .hero__btns, .hero__scroll { animation: fade-up 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.hero__sub { animation-delay: .25s; }
.hero__catch { animation-delay: 2.1s; }
.hero__btns { animation-delay: 2.5s; }

/* スクロールのあいず: 細い線を、しずくが伝って落ちる */
.hero__scroll { display: none; position: absolute; right: var(--gutter); bottom: 2.2rem; width: 44px; height: 96px; justify-content: center; animation-delay: 3s; }
.hero__scroll::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .45); }
.hero__scroll::after { content: ""; position: absolute; top: 0; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: scroll-drop 2.6s ease-in infinite; }
@keyframes scroll-drop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(88px); opacity: 0; } }

@media (min-width: 701px) {
  .hero__in { padding-bottom: 4.8rem; }
  .hero__name { font-size: clamp(4rem, 7.4vw, 5.8rem); }
  .hero__scroll { display: flex; }
}
/* 画面の外に出たら、動きをとめる（電池と処理をむだにしない） */
.hero.is-off *, .hero.is-off *::before, .hero.is-off *::after { animation-play-state: paused !important; }

/* ===== 3. ボタン: コーヒーを注ぐように、上から色が満ちていく ===== */
.btn { position: relative; overflow: hidden; isolation: isolate; --pour: #6b4a32; transition: color .35s ease .12s, border-color .35s ease; }
.btn::before { content: ""; position: absolute; z-index: -1; left: -6%; right: -6%; top: 0; height: 100%; background: var(--pour);
  border-radius: 0 0 50% 50% / 0 0 30px 30px; transform: translate3d(0, -104%, 0);
  transition: transform .65s cubic-bezier(.3, .7, .2, 1), border-radius .65s ease; }
.btn--light { --pour: var(--sage-deep); }
.btn--line { --pour: var(--sage-deep); }
.btn--ghost { --pour: rgba(255, 255, 255, .22); }
@media (hover: hover) {
  .btn:hover::before { transform: none; border-radius: 0; }
  .btn--light:hover, .btn--line:hover { color: #fff; }
  .btn--ghost:hover { border-color: #fff; }
}
.btn:focus-visible::before { transform: none; border-radius: 0; }
.btn--light:focus-visible, .btn--line:focus-visible { color: #fff; }

/* ===== 4. 区切り線: コーヒーのしずくが、すっと線を引いて落ちる ===== */
.drip-wrap { padding-block: 0; }
.drip-wrap--left .drip { margin-left: 0; }
.drip { display: block; width: 40px; height: 112px; margin: 0 auto; color: #6b4a32; }
.drip svg { display: block; width: 100%; height: 100%; overflow: visible; }
.drip__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 58; stroke-dashoffset: 58; transition: stroke-dashoffset 1.4s cubic-bezier(.5, 0, .2, 1); }
.drip__drop { fill: currentColor; opacity: 0; transform-box: fill-box; transform-origin: 50% 0; }
.drip__ripple { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.2); }
.drip.is-in .drip__line { stroke-dashoffset: 0; }
.drip.is-in .drip__drop { animation: drip-drop 1.5s cubic-bezier(.5, 0, .9, .6) 1.2s both; }
.drip.is-in .drip__ripple { animation: drip-ripple 1.8s ease-out 2.55s both; }
@keyframes drip-drop {
  0% { opacity: 0; transform: translateY(0) scale(.2); }
  28% { opacity: 1; transform: translateY(0) scale(1); }
  92% { opacity: 1; transform: translateY(28px) scale(.9, 1.15); }
  100% { opacity: 0; transform: translateY(30px) scale(.3); }
}
@keyframes drip-ripple { 0% { opacity: .8; transform: scale(.2); } 100% { opacity: .35; transform: scale(1); } }
.js:not(.js-ready) .drip:not(.is-in) .drip__line { animation: drip-line-fallback .01s linear 6s forwards; }   /* main.js が動かなかったときの保険だけ */
@keyframes drip-line-fallback { to { stroke-dashoffset: 0; } }

/* ===== 5. 写真のあらわれ方 =====
 * 写真は、ぜんぶ同じ1つの動きにそろえる（場所ごとに変えると、かえって安っぽく見えるため）:
 *   下から上へ、境目のやわらかいマスクがひらく。中の写真は「少し大きい → ふつう」へ落ちつく。1.5秒・ease-out。
 * 動かさないもの: メニューのカード／動画の枠／サブページの帯の写真／トップの大きな写真（トップは別の演出）。
 * 「動きを減らす」設定のときは、何も起きない（最初から全部見える）。
 */
@property --rv { syntax: "<number>"; inherits: false; initial-value: -24; }   /* マスクのひらき具合（-24 → 100） */
.wipe { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; background: var(--cream); }
.wipe--4x3 { aspect-ratio: 4 / 3; }
.wipe--5x4 { aspect-ratio: 5 / 4; }
.wipe--4x5 { aspect-ratio: 4 / 5; }
.wipe .px { position: absolute; left: 0; right: 0; top: -8%; bottom: -8%; will-change: transform; }
.wipe .px img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; transform-origin: 50% 60%; }
.photo .wipe + figcaption { margin-top: .6rem; }

@media (prefers-reduced-motion: no-preference) {
  .js .wipe {
    --rv: -24;
    -webkit-mask-image: linear-gradient(to top, #000 calc(var(--rv) * 1%), rgba(0, 0, 0, 0) calc(var(--rv) * 1% + 24%));
            mask-image: linear-gradient(to top, #000 calc(var(--rv) * 1%), rgba(0, 0, 0, 0) calc(var(--rv) * 1% + 24%));
    transition: --rv 1.5s cubic-bezier(.22, .61, .36, 1);
  }
  .js .wipe.is-in { --rv: 100; }
  .js .wipe .px img { transform: scale(1.14); transition: transform 1.5s cubic-bezier(.22, .61, .36, 1); }
  .js .wipe.is-in .px img { transform: scale(1); }
}
/* main.js が動かなかったときの保険（動いているときは効かせない。効かせると、下の方の写真の演出が飛んでしまう） */
.js:not(.js-ready) .wipe { animation: wipe-fallback .01s linear 5s forwards; }
.js:not(.js-ready) .wipe .px img { animation: wipe-img-fallback .01s linear 5s forwards; }
@keyframes wipe-fallback { to { --rv: 100; -webkit-mask-image: none; mask-image: none; } }
@keyframes wipe-img-fallback { to { transform: none; } }

/* ===== 6. 朝→昼→夕: スクロールにあわせて、光の色あいが変わる ===== */
.day { --bg: #f4ecdc; --fg: #2c382f; --fg-soft: #586459; --accent: #44604d; --orb: #ffe1a0;
  position: relative; overflow-x: clip; padding-block: 6rem 9rem; background: var(--bg); color: var(--fg);
  transition: --bg 1.8s ease, --fg 1.8s ease, --fg-soft 1.8s ease, --accent 1.8s ease, --orb 1.8s ease; }
.day[data-tone="noon"] { --bg: #fffdf8; --fg: #2c382f; --fg-soft: #586459; --accent: #44604d; --orb: #fff3c4; }
.day[data-tone="evening"] { --bg: #efcf9f; --fg: #3a2616; --fg-soft: #5b4330; --accent: #8c4a1c; --orb: #ff9b4e; }
.day::before, .day::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.day::before { top: 0; height: 6rem; background: linear-gradient(to bottom, var(--paper), rgba(251, 248, 241, 0)); }
.day::after { bottom: 0; height: 9rem; background: linear-gradient(to bottom, rgba(251, 248, 241, 0), var(--paper)); }
.day .eyebrow { color: var(--accent); }
.day .lead, .day p { color: var(--fg-soft); }
.day .title, .day h3 { color: var(--fg); }
.day__sky { position: sticky; top: 0; height: 0; z-index: 0; pointer-events: none; }
.day__orb { position: absolute; left: 0; top: 0; width: min(54vw, 280px); aspect-ratio: 1; border-radius: 50%; opacity: .75; will-change: transform;
  background: radial-gradient(circle, var(--orb) 0%, rgba(255, 255, 255, 0) 68%); filter: blur(6px); transform: translate3d(-9vw, 18vh, 0); }
.day > .container { position: relative; z-index: 2; }
.day__head { margin-bottom: 1.2rem; max-width: 34rem; }
.scene { display: grid; gap: 1.6rem; align-items: center; padding-block: clamp(2.4rem, 9vh, 6rem); }
.scene__kanji { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(5rem, 24vw, 8.5rem); line-height: 1; color: var(--accent); opacity: .92; }
.scene__label { margin: 0 0 .6rem; font-size: .875rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.scene__title { font-size: clamp(1.35rem, 5.4vw, 1.9rem); margin-bottom: .9rem; }
.scene__text > p:last-child { margin-bottom: 0; }
@media (min-width: 860px) {
  .day { padding-block: 8rem 11rem; }
  .scene { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .scene:nth-of-type(even) .scene__media { order: 2; }
  .scene__text { padding-inline: 1rem; }
}

/* ===== 7. メニューのカード: 横にスワイプ ===== */
.cards__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.cards__nav { display: none; gap: .6rem; flex: none; padding-bottom: 1.1rem; }
.cards__btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--sage-deep); background: transparent; color: var(--sage-deep); display: grid; place-items: center; cursor: pointer; transition: background .3s, color .3s, opacity .3s; }
.cards__btn svg { width: 20px; height: 20px; }
.cards__btn:hover { background: var(--sage-deep); color: #fff; }
.cards__btn:disabled { opacity: .3; cursor: default; background: transparent; color: var(--sage-deep); }
.cards__list { display: flex; gap: 1rem; width: max-content; }
.cards__row { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 1.6rem var(--gutter) 2.2rem; margin-inline: calc(var(--gutter) * -1); scroll-padding-inline: var(--gutter); }
.cards__row::-webkit-scrollbar { display: none; }
.cards__row:focus-visible { outline-offset: -3px; }
.cards__row.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.cards__row.is-dragging * { pointer-events: none; }
.card { position: relative; flex: 0 0 min(78vw, 300px); scroll-snap-align: start; display: flex; flex-direction: column; background: #fffdf8; border-radius: 14px;
  box-shadow: 0 10px 26px -16px rgba(74, 51, 34, .5); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
.card__photo { overflow: hidden; border-radius: 14px 14px 0 0; aspect-ratio: 4 / 5; background: var(--cream); }
.card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.card__body { padding: 1rem 1.1rem 1.3rem; }
.card__top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.card__name { font-size: 1.125rem; letter-spacing: .06em; line-height: 1.5; }
.card__price { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.card__desc { margin: .3rem 0 0; font-size: 1rem; line-height: 1.8; color: var(--ink-soft); }
@media (hover: hover) {
  .card:hover { transform: translate3d(0, -8px, 0); box-shadow: 0 26px 40px -20px rgba(74, 51, 34, .55); }
  .card:hover .card__photo img { transform: scale(1.06); }
}
.card--season { justify-content: flex-start; padding: 2.4rem 1.3rem 1.4rem; background: linear-gradient(165deg, #f8ebcf, #efd7a9); }
/* 右下に、コーヒーに落ちたしずくの波紋のような輪（CSSだけ。文字の下に敷く） */
.card--season::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: repeating-radial-gradient(circle at 90% 106%, rgba(140, 74, 28, .17) 0 2px, rgba(140, 74, 28, 0) 2px 16px);
  -webkit-mask-image: radial-gradient(circle at 90% 106%, #000 0, rgba(0, 0, 0, 0) 58%); mask-image: radial-gradient(circle at 90% 106%, #000 0, rgba(0, 0, 0, 0) 58%); }
.card--season > *:not(.tag-hand) { position: relative; z-index: 1; }
.card--season .card__body { padding: .5rem 0 0; }
.card--season .card__price { margin-top: auto; padding-top: 1.2rem; }
.card--season .card__top { flex-direction: column; align-items: flex-start; gap: .4rem; }
.card--season .card__name { font-size: 1.5rem; line-height: 1.5; text-decoration: underline wavy rgba(140, 74, 28, .55) 1.5px; text-underline-offset: .32em; }
.card--season .card__price { align-self: flex-end; font-family: var(--serif); font-size: 1.25rem; color: #6b3a14; }
.card--season .card__desc { color: #5b4330; }
.card--season .tag-hand { top: -.9rem; left: 1rem; }
.cards__bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: -.6rem; }
.cards__bar i { display: block; height: 100%; width: 40%; background: var(--sage-deep); border-radius: 3px; transform-origin: 0 50%; will-change: transform; }
@media (min-width: 860px) {
  .cards__nav { display: flex; }
  .cards__row { cursor: grab; margin-right: calc(50% - 50vw); padding-right: var(--gutter); }
}
.section--bleed { overflow-x: clip; }

/* ===== 8. 動画: スマホの形の枠に入れる ===== */
.video { background: linear-gradient(180deg, var(--paper), var(--cream)); overflow: hidden; }
.video__grid { display: grid; gap: 2.4rem; align-items: center; }
.video__note { font-size: 1rem; color: var(--ink-soft); }
.video__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.4rem; }
.video__actions--pc { display: none; justify-content: flex-start; margin-top: 1.6rem; }
.video[data-state="sound"] [data-video-sound] { display: none; }   /* 「音なしにもどす」の出し入れは js（hidden 属性） */
.video__stage { position: relative; }
.video__stage::before { content: ""; position: absolute; inset: 6% -14% 0; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 150, .5), rgba(255, 214, 150, 0)); pointer-events: none; }
.phone { position: relative; z-index: 1; width: min(72vw, 300px); margin-inline: auto; padding: 11px; border-radius: 44px; background: linear-gradient(150deg, #4a3a2e, #1d1713);
  box-shadow: 0 40px 60px -30px rgba(40, 26, 14, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .12); animation: phone-float 8s ease-in-out infinite; }
.phone__screen { position: relative; overflow: hidden; border-radius: 34px; aspect-ratio: 9 / 16; background: #000; isolation: isolate; }
.phone__screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone__sound { position: absolute; z-index: 2; left: 50%; top: 9%; translate: -50% 0; display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .5rem 1.2rem .5rem 1rem; border: 0; border-radius: 999px;
  background: rgba(251, 248, 241, .94); color: var(--sage-deep); font: 700 1rem/1.2 var(--sans); letter-spacing: .08em; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); transition: transform .3s ease, background .3s; }
.phone__sound svg { width: 22px; height: 22px; flex: none; }
.phone__sound:hover { transform: translateY(-2px); background: #fff; }
.video[data-state="sound"] .phone__sound { display: none; }
@keyframes phone-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-.4deg); } 50% { transform: translate3d(0, -8px, 0) rotate(.4deg); } }
@media (min-width: 860px) {
  .video__grid { grid-template-columns: 1.05fr .95fr; gap: 5rem; }
  .video__actions--pc { display: flex; }
  .video__actions--sp { display: none; }
}

/* ===== 9. 手描き風のラベル（CSSだけで作る。絵は使わない） ===== */
.tag-hand { position: absolute; z-index: 3; display: inline-block; transform: rotate(-6deg); padding: .1rem .95rem .2rem; font-family: "Zen Kurenaido", var(--sans); font-size: 1.125rem; line-height: 1.5; letter-spacing: .08em; color: #7a3f1a; background: #f9e5b2;
  border: 2px solid #7a3f1a; border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; box-shadow: 2px 3px 0 rgba(122, 63, 26, .28); }
.tag-hand--inline { position: relative; top: -.2rem; margin-left: .9rem; font-size: 1rem; vertical-align: middle; }

/* ===== 10. PCだけ: カーソルに、あたたかい光がついてくる ===== */
.cursor-glow { position: fixed; left: 0; top: 0; z-index: 60; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform;
  background: radial-gradient(circle, rgba(255, 210, 140, .38) 0%, rgba(255, 210, 140, .14) 42%, rgba(255, 210, 140, 0) 68%); transition: opacity .6s ease; }
.cursor-glow.is-on { opacity: 1; }

/* ===== 11. サブページの軽い演出 ===== */
.pagehead picture { transform-origin: 60% 50%; animation: kb 30s ease-in-out infinite alternate; }
.pagehead__eyebrow { animation: fade-up 1.2s cubic-bezier(.2, .7, .2, 1) .2s both; }
.pagehead__title { animation: fade-blur 1.6s cubic-bezier(.2, .7, .2, 1) .45s both; }
.menu-item { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .menu-item:hover { transform: translate3d(6px, 0, 0); } }
.news-item { transition: background-color .4s ease; }
@media (hover: hover) { .news-item:hover { background: rgba(138, 162, 140, .10); } }
.js .cards__list[data-render] { opacity: 1; animation: none; transition: none; }

/* 画面には出さず、読み上げだけに使う文字 */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.drip-wrap { margin-bottom: 1rem; }

/* ===== 12. 入口のとびら（トップだけ・そのセッションで最初に開いたとき） =====
 * お店の扉が画面いっぱいに出て、両開きの扉がゆっくり奥へひらき、あたたかい光がこぼれて、トップへつながる。
 * 扉は生成した写真（img/door-v.webp / door-h.webp）を左右半分ずつに分けて使う。コードでは絵を描かない。
 * 出す・出さないは index.html の <head> のスクリプトが決める（<html> に gate-on がつく）。動かすのは js/gate.js。
 * 保険: ① <head> のスクリプトが7秒で gate-on を外す ② このCSSが6.5秒で枠を消す。どちらかが動けば、ページは必ず見える。
 */
.gate { display: none; }
.gate-on .gate { display: block; position: fixed; inset: 0; z-index: 300; overflow: hidden; cursor: pointer; touch-action: none; background: #2a1d14;
  -webkit-tap-highlight-color: transparent; animation: gate-failsafe .01s linear 6.5s forwards; }
.gate-on .gate.is-run { animation: gate-failsafe .01s linear 6.5s forwards, gate-clear .01s linear .6s forwards; }   /* 扉が動き出す瞬間に、うしろ（トップ）が見えるようにする */
@keyframes gate-clear { to { background-color: transparent; } }
.gate.is-skip { opacity: 0; transition: opacity .38s ease; pointer-events: none; }
@keyframes gate-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
.gate-on { overflow: hidden; scrollbar-gutter: stable; }

/* 扉のうしろからこぼれる光（トップの写真の上に重なる） */
.gate__glow { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform-origin: 50% 50%;
  background: radial-gradient(ellipse 46% 80% at 50% 50%, rgba(255, 242, 206, .96) 0%, rgba(255, 214, 142, .6) 36%, rgba(255, 190, 110, 0) 74%); }
.gate__stage { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 50%; opacity: 0; }
@media (min-width: 701px) { .gate__stage { perspective: 2600px; } }   /* 広い画面では、遠近をゆるやかに（台形になりすぎないように） */
.gate__leaf { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: #2a1d14; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; }
/* ↑ overflow: hidden が大事。中の写真は画面ぜんぶの幅（扉の2倍）なので、これが無いと、ひらくとき左右の扉が「半分」でなく
     「写真まるごと」をのせて回り、扉が重なって、屏風のように折れて見える（2026-10-04 に修正） */
.gate__leaf--l { left: 0; transform-origin: 0 50%; }
.gate__leaf--r { right: 0; transform-origin: 100% 50%; }
/* 1枚の写真を、左の扉・右の扉で半分ずつ見せる（どちらも画面ぜんぶの大きさの写真を、半分だけ見せる） */
.gate__leaf img { position: absolute; top: 0; width: 200%; height: 100%; max-width: none; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.gate__leaf--l img { left: 0; }
.gate__leaf--r img { left: -100%; }
/* 奥へ向かうほど、扉に影がかかる */
.gate__leaf::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.gate__leaf--l::after { background: linear-gradient(to right, rgba(20, 12, 6, 0) 15%, rgba(20, 12, 6, .72)); }
.gate__leaf--r::after { background: linear-gradient(to left, rgba(20, 12, 6, 0) 15%, rgba(20, 12, 6, .72)); }

.gate.is-run .gate__stage { animation: door-appear .35s ease both; }
.gate.is-run .gate__leaf--l { animation: door-l 1.9s cubic-bezier(.6, 0, .2, 1) .6s both; }
.gate.is-run .gate__leaf--r { animation: door-r 1.9s cubic-bezier(.6, 0, .2, 1) .6s both; }
.gate.is-run .gate__leaf::after { animation: door-shade 1.9s cubic-bezier(.6, 0, .2, 1) .6s both; }
.gate.is-run .gate__glow { animation: door-glow 2.5s ease .6s both; }
@keyframes door-appear { from { opacity: 0; } to { opacity: 1; } }
/* 終わりは 116 度まで回す（真横の 90 度で止めると、広い画面では扉が画面の端に細く残って、最後にぷつっと消えてしまう。
   116 度なら、扉は画面の外へすっかり引っ込む） */
@keyframes door-l { from { transform: rotateY(0deg); } to { transform: rotateY(116deg); } }
@keyframes door-r { from { transform: rotateY(0deg); } to { transform: rotateY(-116deg); } }
@keyframes door-shade { from { opacity: 0; } to { opacity: 1; } }
@keyframes door-glow { 0% { opacity: 0; transform: scaleX(.2); } 35% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1.5); } }

/* 扉がひらくあいだ、うしろのトップの写真は、ほんの少しだけ手前へ寄ってくる（歩いて入っていくような感じ。画面ぜんたいの大きな拡大はしない） */
.gate-run .hero__media { animation: hero-step 3.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hero-step { from { transform: scale(1.07); } to { transform: scale(1); } }
/* 扉がひらくまで、トップの文字の登場はとめておく（ひらいたころに始まる）。始まったあとは待たせないよう、間隔をつめる */
.gate-run .hero__sub { animation-delay: .1s; }
.gate-run .hero__name .ch:nth-child(2) { animation-delay: .35s; }
.gate-run .hero__name .ch:nth-child(3) { animation-delay: .6s; }
.gate-run .hero__name .ch:nth-child(4) { animation-delay: .85s; }
.gate-run .hero__name .ch:nth-child(5) { animation-delay: 1.1s; }
.gate-run .hero__catch { animation-delay: 1.5s; }
.gate-run .hero__btns { animation-delay: 1.9s; }
.gate-run .hero__scroll { animation-delay: 2.2s; }
.gate-hold .hero__sub, .gate-hold .hero__name .ch, .gate-hold .hero__catch, .gate-hold .hero__btns, .gate-hold .hero__scroll { animation-play-state: paused; }

/* ===== 13. 動きを減らす設定: すべて静止して見せる ===== */
@media (prefers-reduced-motion: reduce) {
  .gate { display: none !important; }
  .hero__kb, .wisp, .beam, .motes span, .hero__light::before, .hero__scroll::after, .phone, .pagehead picture { animation: none !important; }
  .steam, .beam, .motes, .hero__scroll { display: none; }
  .hero__light::before { opacity: .6; }
  .hero__name .ch, .hero__sub, .hero__catch, .hero__btns, .hero__scroll, .pagehead__eyebrow, .pagehead__title { animation: none !important; opacity: 1; filter: none; transform: none; }
  .drip__line { stroke-dashoffset: 0; transition: none; }
  .drip__ripple { opacity: .35; transform: none; }
  .drip.is-in .drip__drop, .drip.is-in .drip__ripple { animation: none; }
  .day, .day * { transition: none !important; }
  .day__orb, .cursor-glow { display: none; }
  .btn::before { transition: none; }
  .card, .card__photo img, .menu-item, .news-item { transition: none; }
  .cards__row { scroll-behavior: auto; }
}