/* Satomi v3: noren curtain entrance and kaiten conveyor hero. */
:root { --indigo: #1E2B45; --indigo-2: #26365A; --lacquer: #B23A2E; --night: #15120F; --night-2: #201B17; --gold: #C9A55A; }

/* The old hero heading becomes an h2 in this version; keep its look. */
.hero h2#hero-title { font-size: clamp(3.4rem, 8.6vw, 6.9rem); line-height: .9; }
.hero h2#hero-title .line { display: block; }
.hero h2#hero-title .accent { color: var(--olive); }
@media (max-width: 640px) { .hero h2#hero-title { font-size: clamp(3rem, 15vw, 4rem); } }

/* ---------- Noren curtain ---------- */
.noren { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: grid; place-items: center; }
.noren-panel {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px),
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 18%, transparent 82%, rgba(0,0,0,.28)),
    linear-gradient(180deg, var(--indigo-2), var(--indigo) 70%, #172036);
  box-shadow: inset 0 -14px 0 rgba(0,0,0,.18);
  display: grid; place-items: center;
  animation: noren-open 1.5s cubic-bezier(.7,0,.2,1) .7s forwards;
}
.noren-panel::after { /* top rod */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: linear-gradient(180deg, #5A3E26, #3A2716); box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
.noren-panel--l { left: 0; transform-origin: top left; }
.noren-panel--r { right: 0; transform-origin: top right; animation-name: noren-open-r; }
.noren-kanji {
  font-family: "Noto Serif JP", serif; font-weight: 700; color: #F4EEE2;
  font-size: clamp(64px, 14vw, 170px); line-height: 1;
  width: 1.5em; height: 1.5em; display: grid; place-items: center; border-radius: 50%;
  border: 3px solid rgba(244,238,226,.85); opacity: .92;
}
.noren-panel--l .noren-kanji { margin-left: 30%; }
.noren-panel--r .noren-kanji { margin-right: 30%; }
.noren-logo {
  position: relative; z-index: 2; width: clamp(110px, 16vw, 160px); height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
  animation: noren-logo 1s ease .5s forwards;
}
.noren { animation: noren-gone 0s linear 2.3s forwards; }
@keyframes noren-open { 0% { transform: none; } 25% { transform: skewX(4deg) translateX(-2%); } 100% { transform: skewX(-8deg) translateX(-106%); } }
@keyframes noren-open-r { 0% { transform: none; } 25% { transform: skewX(-4deg) translateX(2%); } 100% { transform: skewX(8deg) translateX(106%); } }
@keyframes noren-logo { to { opacity: 0; transform: scale(1.15); } }
@keyframes noren-gone { to { visibility: hidden; } }
.noren.is-skip { display: none; }
@media (prefers-reduced-motion: reduce) { .noren { display: none; } }

/* ---------- Kaiten conveyor hero ---------- */
.kaiten {
  position: relative; overflow: hidden; isolation: isolate;
  color: #F4EEE2; padding-block: clamp(36px, 5vw, 60px) clamp(36px, 6vw, 72px);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(201,102,63,.22), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, var(--night-2), var(--night));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 32px);
}
.kaiten-glow { position: absolute; inset: auto 0 0 0; height: 55%; z-index: -1;
  background: radial-gradient(50% 60% at 50% 100%, rgba(201,165,90,.16), transparent 70%); }
.kaiten-head { display: grid; gap: 14px; justify-items: center; text-align: center; }
.kaiten .eyebrow { color: var(--gold); }
.kaiten-title { font-size: clamp(2.8rem, 7vw, 5.2rem); line-height: .9; color: #F4EEE2; max-width: 14ch; }
.kaiten-jp {
  display: block; margin: 0 auto 12px; width: max-content;
  font-family: "Noto Serif JP", serif; font-size: .32em; letter-spacing: .2em;
  color: #fff; background: var(--lacquer); padding: .35em .5em .35em .7em; border-radius: 4px;
}
.kaiten-sub { max-width: 46ch; color: #CFC6B6; font-size: 1.0625rem; margin: 0; }
.kaiten-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.kaiten-ghost { border-color: rgba(244,238,226,.6) !important; color: #F4EEE2 !important; }
.kaiten-ghost:hover { background: #F4EEE2 !important; color: var(--ink) !important; }

/* The belt: a steel counter with moving slats */
.belt {
  --plate: clamp(150px, 19vw, 210px);
  position: relative; overflow: hidden; padding-block: 22px 26px; cursor: grab; touch-action: pan-y;
  background:
    linear-gradient(180deg, #8C8F93 0, #D9DCDF 5px, #6E7175 9px, transparent 9px),
    linear-gradient(0deg, #8C8F93 0, #D9DCDF 5px, #6E7175 9px, transparent 9px),
    #2A2724;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), inset 0 0 40px rgba(0,0,0,.5);
  outline-offset: -4px;
}
.belt::before { /* slats, moved by JS through --slat */
  content: ""; position: absolute; inset: 9px 0; z-index: 0;
  background: repeating-linear-gradient(90deg, #3A3632 0 46px, #24211E 46px 49px);
  background-position-x: var(--slat, 0px);
}
.belt.is-drag { cursor: grabbing; }
.belt-track { position: relative; z-index: 1; display: flex; gap: clamp(22px, 3vw, 40px); width: max-content; padding-inline: 20px; will-change: transform; }
.kp { flex: none; width: var(--plate); display: grid; justify-items: center; gap: 10px; text-decoration: none; color: inherit; -webkit-user-drag: none; }
.kp-dish {
  position: relative; width: var(--plate); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, #FBF8F2 0 58%, var(--rim) 59% 66%, #FBF8F2 67% 70%, var(--rim) 71% 100%);
  box-shadow: 0 12px 18px -6px rgba(0,0,0,.6), inset 0 -4px 8px rgba(0,0,0,.18), inset 0 3px 6px rgba(255,255,255,.5);
  transition: transform .35s cubic-bezier(.3,1.4,.5,1);
}
.kp-dish img, .kp-poke {
  width: 64%; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  box-shadow: 0 4px 10px rgba(0,0,0,.35); pointer-events: none;
}
.kp-poke { overflow: hidden; display: block; }
.kp-poke .pb { width: 100%; height: 100%; }
.kp-label {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: .95rem; background: rgba(0,0,0,.55); padding: 3px 10px; border-radius: 999px;
}
.kp:hover .kp-dish, .kp:focus-visible .kp-dish { transform: translateY(-10px) rotate(-6deg) scale(1.05); }
.kp--red { --rim: #B23A2E; } .kp--gold { --rim: #C9A55A; } .kp--blue { --rim: #3B5C8C; }
.kp--black { --rim: #2B2B2B; } .kp--green { --rim: #5E7D4A; } .kp--pink { --rim: #D88A9A; }

/* Steam wisps */
.steam { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.steam i { position: absolute; bottom: 30%; width: 120px; height: 220px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.08), transparent); filter: blur(10px);
  animation: steam 9s ease-in-out infinite; opacity: 0; }
.steam i:nth-child(1) { left: 12%; } .steam i:nth-child(2) { left: 48%; animation-delay: 3s; } .steam i:nth-child(3) { left: 80%; animation-delay: 6s; }
@keyframes steam { 0% { transform: translateY(40px) scale(.8); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-220px) scale(1.4); opacity: 0; } }

/* Lantern-red reveal on the section headings below */
.wow-in { opacity: 0; transform: translateY(24px); clip-path: inset(0 0 100% 0); transition: opacity .7s ease, transform .7s ease, clip-path .8s cubic-bezier(.6,0,.2,1); }
.wow-in.is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

@media (max-width: 640px) {
  .belt { --plate: 140px; }
  .kaiten-actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .belt { overflow-x: auto; cursor: auto; }
  .steam { display: none; }
  .kp-dish { transition: none; }
  .wow-in { opacity: 1; transform: none; clip-path: none; transition: none; }
}