/* 動き（全版共通）。参考サイトの「写真がゆっくり切り替わる・見出しが浮き上がる・文字が流れる・出勤がスライドする」を自前で作ったもの。
   動きを減らす設定の端末では止める */

/* トップ：読み込み時に文字とロゴが順に浮き上がる */
@keyframes ah-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ah-fade { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.hero-logo { animation: ah-fade 1.4s ease-out both; }
.hero-text > * { animation: ah-up 1s ease-out both; }
.hero-text > *:nth-child(1) { animation-delay: .2s; }
.hero-text > *:nth-child(2) { animation-delay: .45s; }
.hero-text > *:nth-child(3) { animation-delay: .7s; }
.hero-text > *:nth-child(4) { animation-delay: .9s; }
.hero-text > *:nth-child(5) { animation-delay: 1.1s; }

/* トップの写真：3枚を順に重ねて切り替え、ゆっくり寄っていく（写真を持つ版だけ表示） */
.hero { position: relative; overflow: hidden; }
.hero-slides { display: none; position: absolute; inset: 0; z-index: 0; }
.hero-slides i { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; animation: ah-slide 21s linear infinite; }
.hero-slides i:nth-child(2) { animation-delay: 7s; }
.hero-slides i:nth-child(3) { animation-delay: 14s; }
@keyframes ah-slide {
  0% { opacity: 0; transform: scale(1); }
  8% { opacity: 1; }
  33% { opacity: 1; }
  45% { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}
.hero-inner { position: relative; z-index: 2; }

/* スクロールで現れる */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* 流れる帯 */
.ticker { overflow: hidden; background: var(--night); color: var(--gold-light); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.ticker-track { display: flex; width: max-content; animation: ah-ticker 38s linear infinite; }
.ticker-dup { display: flex; }
.ticker-track a { padding: 11px 28px; font-size: 13.5px; letter-spacing: .14em; white-space: nowrap; position: relative; color: inherit; text-decoration: none; }
.ticker-track a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ticker-track a::before { content: "◆"; position: absolute; left: -6px; font-size: 8px; top: 50%; transform: translateY(-50%); opacity: .6; }
@keyframes ah-ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* 本日の出勤スライド */
.today-slider { position: relative; }
.ts-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 0 8px; }
.ts-track::-webkit-scrollbar { display: none; }
.ts-item { scroll-snap-align: start; text-decoration: none; color: var(--ink); text-align: center; }
.ts-item figure { margin: 0 0 10px; aspect-ratio: 357 / 556; overflow: hidden; background: #e9e3d8; }
.ts-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ts-item:hover img { transform: scale(1.05); }
.ts-item.is-soldout img { filter: grayscale(.6); opacity: .75; }
.ts-name { font-family: var(--serif); margin: 0; font-size: 16px; }
.ts-time { margin: 0; font-size: 13px; color: var(--ink-soft); min-height: 1.6em; }
.ts-state { margin: 2px 0 0; font-size: 12px; }
.ts-open { display: inline-block; padding: 1px 10px; background: var(--gold); color: #fff; }
.ts-close { color: var(--ink-soft); }
.ts-nav { position: absolute; top: 38%; z-index: 3; width: 40px; height: 40px; border: 1px solid var(--line); background: rgba(255,255,255,.92); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.ts-prev { left: -14px; } .ts-next { right: -14px; }
@media (max-width: 960px) { .ts-track { grid-auto-columns: calc((100% - 40px) / 3); } }
@media (max-width: 640px) { .ts-track { grid-auto-columns: 46%; gap: 12px; } .ts-nav { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-logo, .hero-text > *, .hero-slides i, .ticker-track { animation: none !important; }
  .hero-slides i:first-child { opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* 版ごとの色合わせ */
.v-fresh .ticker { background: #2f8a90; color: #fff; border-color: transparent; }
.v-fresh .ts-open { background: #3c9a9f; border-radius: 999px; }
.v-fresh .ts-item figure { border-radius: 12px; }
.v-fresh .ts-nav { border-radius: 50%; }
.v-lounge .ticker { background: #000; color: var(--gold-light); }
.v-lounge .ts-open { background: var(--gold-deep); }

/* ラウンジ版：写真3枚を切り替える。文字が読めるよう上に暗い膜を重ねる */
.v-lounge .hero { background: #000; }
.v-lounge .hero-slides { display: block; }
.v-lounge .hero-slides i:nth-child(1) { background-image: url("assets/lounge-hero.jpg"); }
.v-lounge .hero-slides i:nth-child(2) { background-image: url("assets/lounge-2.jpg"); }
.v-lounge .hero-slides i:nth-child(3) { background-image: url("assets/lounge-3.jpg"); }
.v-lounge .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.75) 100%); }