:root {
  /* Compliance language: Interprets street-style Japanese patina—wheat-pasted storefront paper as quiet material texture. */
  --roasted-anko: #4A2118;
  --mochi-cream: #F7E8C7;
  --kuromitsu-amber: #B66A2C;
  --azuki-red: #8F2F2A;
  --noren-indigo: #24394A;
  --kinako-gold: #D8A84E;
  --rain-asphalt: #191514;
  --serif-latin: "Cormorant Garamond", Georgia, serif;
  --serif-jp: "Noto Serif JP", "Shippori Mincho", serif;
  --gothic: "Zen Kaku Gothic New", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--rain-asphalt);
  color: var(--mochi-cream);
  font-family: var(--gothic);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .28;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(247, 232, 199, .35) 0 1px, transparent 1px),
    radial-gradient(circle at 76% 42%, rgba(74, 33, 24, .35) 0 1px, transparent 1px),
    linear-gradient(115deg, rgba(255,255,255,.06), transparent 38%, rgba(0,0,0,.16));
  background-size: 17px 17px, 23px 23px, 100% 100%;
  animation: grainDrift 9s steps(6) infinite;
}

.cursor-steam {
  position: fixed;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 25;
  transform: translate(-50%, -50%);
  opacity: .18;
  background: radial-gradient(circle, var(--kinako-gold), transparent 64%);
  filter: blur(18px);
}

.scene {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background: radial-gradient(circle at 18% 20%, rgba(216,168,78,.25), transparent 20%), radial-gradient(circle at 82% 80%, rgba(143,47,42,.25), transparent 22%);
  filter: blur(3px);
}

.scene-shutter {
  display: grid;
  grid-template-columns: .8fr 1.1fr .9fr .7fr .5fr;
  align-items: center;
  background: linear-gradient(100deg, #191514 0%, #24394A 48%, #191514 100%);
}

.shutter-lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(247,232,199,.05) 0 2px, transparent 2px 36px), linear-gradient(90deg, transparent, rgba(182,106,44,.2), transparent);
}

.poster-strip {
  position: absolute;
  top: 0;
  left: 7vw;
  width: 64vw;
  padding: 13px 26px;
  background: var(--mochi-cream);
  color: var(--roasted-anko);
  font-family: var(--serif-jp);
  letter-spacing: .28em;
  transform: rotate(-1.5deg);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.torn-flyer {
  position: absolute;
  width: 220px;
  padding: 22px;
  background: linear-gradient(135deg, var(--mochi-cream), #efd49c);
  color: var(--roasted-anko);
  box-shadow: 0 20px 50px rgba(0,0,0,.38);
  font-family: var(--serif-jp);
  clip-path: polygon(0 4%, 96% 0, 100% 88%, 82% 100%, 43% 94%, 0 100%);
}

.torn-flyer span, .small-label, .kicker {
  display: block;
  font-family: var(--gothic);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--kuromitsu-amber);
}

.flyer-one { left: 7vw; bottom: 13vh; transform: rotate(4deg); }
.flyer-two { right: 9vw; top: 18vh; transform: rotate(-6deg); }

.painted-kanji {
  position: absolute;
  right: -4vw;
  bottom: -12vh;
  font-family: var(--serif-jp);
  font-size: clamp(18rem, 38vw, 40rem);
  line-height: .8;
  color: rgba(216,168,78,.09);
}

.arrival-copy {
  grid-column: 2 / 5;
  max-width: 840px;
  padding: 12vh 4vw;
  z-index: 2;
}

h1, h2, .chapter-word {
  margin: 0;
  font-family: var(--serif-latin);
  font-weight: 600;
  letter-spacing: -.035em;
}

h1 {
  font-size: clamp(4.5rem, 12vw, 13rem);
  line-height: .76;
  color: var(--mochi-cream);
  text-shadow: 0 8px 0 rgba(74,33,24,.65), 0 26px 80px rgba(0,0,0,.55);
}

.arrival-copy p:last-child, .shop-sign p, .quiet-copy p {
  max-width: 560px;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.85;
}

.first-touch {
  position: absolute;
  right: 8vw;
  bottom: 9vh;
  border: 1px solid rgba(216,168,78,.65);
  background: rgba(74,33,24,.55);
  color: var(--mochi-cream);
  padding: 16px 26px;
  font-family: var(--serif-jp);
  font-size: 15px;
  letter-spacing: .18em;
  cursor: pointer;
  transition: transform .45s ease, background .45s ease;
}

.first-touch:hover { transform: translateY(-5px); background: var(--azuki-red); }

.seal {
  display: grid;
  place-items: center;
  background: var(--azuki-red);
  color: var(--mochi-cream);
  font-family: var(--serif-jp);
  border: 2px solid rgba(247,232,199,.58);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

.seal-arrival { position: absolute; width: 92px; height: 92px; left: 54vw; top: 24vh; transform: rotate(10deg); }

.scene-noren {
  background: var(--mochi-cream);
  color: var(--roasted-anko);
}

.paper-light {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(216,168,78,.45), transparent 42%), repeating-linear-gradient(90deg, rgba(74,33,24,.035) 0 1px, transparent 1px 15px);
}

.noren-wrap {
  position: absolute;
  inset: 0 auto 0 0;
  width: 58vw;
  display: flex;
  transform: translateY(-3%);
  transition: transform 1.4s cubic-bezier(.2,.7,.18,1);
}

.noren-wrap.open { transform: translateY(-18%); }

.noren-panel {
  flex: 1;
  min-height: 92vh;
  background: linear-gradient(180deg, #2d485d, var(--noren-indigo));
  border-right: 1px solid rgba(247,232,199,.22);
  box-shadow: inset 0 0 45px rgba(0,0,0,.28), 12px 0 40px rgba(0,0,0,.18);
  transform-origin: top center;
  animation: clothSway 7s ease-in-out infinite;
}

.noren-panel span {
  display: block;
  padding-top: 18vh;
  text-align: center;
  font-family: var(--serif-jp);
  font-size: clamp(5rem, 10vw, 13rem);
  color: rgba(247,232,199,.82);
}

.panel-mid { animation-delay: -2s; }
.panel-right { animation-delay: -4s; }

.shop-sign {
  position: absolute;
  right: 8vw;
  top: 18vh;
  width: min(560px, 42vw);
  padding: 42px;
  background: rgba(247,232,199,.78);
  border-left: 8px solid var(--kuromitsu-amber);
  box-shadow: 0 28px 80px rgba(74,33,24,.18);
}

.shop-sign h2, .quiet-copy h2, .reflection-sign h2 {
  font-size: clamp(3.8rem, 8vw, 9rem);
  line-height: .82;
}

.shop-sign h2 { font-family: var(--serif-jp); letter-spacing: .08em; }

.vertical-note, .vertical-poem {
  writing-mode: vertical-rl;
  font-family: var(--serif-jp);
  letter-spacing: .24em;
  color: var(--azuki-red);
}

.vertical-note { position: absolute; right: 4vw; bottom: 8vh; font-size: 1.1rem; }

.mochi {
  position: absolute;
  border-radius: 48% 52% 55% 45%;
  background: radial-gradient(circle at 34% 28%, #fff5d8, var(--kinako-gold) 58%, var(--kuromitsu-amber));
  opacity: .5;
  animation: mochiBreath 6s ease-in-out infinite;
}

.moon-one { width: 240px; height: 210px; right: 28vw; bottom: 8vh; }
.moon-two { width: 160px; height: 150px; right: -3vw; top: 9vh; animation-delay: -2s; }

.scene-counter {
  background: linear-gradient(180deg, var(--roasted-anko), #6b3a22 55%, var(--mochi-cream));
  color: var(--mochi-cream);
}

.counter-light {
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(ellipse at 62% 22%, rgba(216,168,78,.62), transparent 38%);
  animation: morningSweep 9s ease-in-out infinite alternate;
}

.chapter-word {
  position: absolute;
  left: -3vw;
  top: 7vh;
  font-size: clamp(8rem, 19vw, 20rem);
  color: rgba(247,232,199,.12);
}

.wood-tray {
  position: absolute;
  right: 7vw;
  top: 17vh;
  width: min(620px, 48vw);
  height: 56vh;
  border-radius: 44% 48% 42% 52%;
  background: radial-gradient(ellipse at 40% 30%, #86512e, var(--roasted-anko));
  box-shadow: 0 42px 90px rgba(0,0,0,.42), inset 0 0 0 15px rgba(216,168,78,.18);
  transition: transform .5s ease, box-shadow .5s ease;
}

.wagashi { position: absolute; border-radius: 50%; box-shadow: inset -15px -18px 25px rgba(74,33,24,.2); }
.dorayaki { width: 170px; height: 130px; left: 12%; top: 23%; background: radial-gradient(circle at 35% 28%, #D8A84E, #B66A2C 68%); }
.shiratama { width: 130px; height: 130px; right: 18%; top: 18%; background: radial-gradient(circle at 34% 28%, #fff9df, #F7E8C7 60%, #D8A84E); }
.anko-swirl { width: 160px; height: 160px; left: 42%; bottom: 14%; background: conic-gradient(from 30deg, #4A2118, #8F2F2A, #4A2118, #B66A2C, #4A2118); }
.tray-label { position: absolute; left: 8%; bottom: 11%; font-family: var(--serif-jp); letter-spacing: .18em; color: var(--kinako-gold); }

.ingredient-notes {
  position: absolute;
  left: 8vw;
  bottom: 14vh;
  width: min(470px, 40vw);
}

.ingredient-notes p {
  padding: 17px 0;
  border-bottom: 1px solid rgba(216,168,78,.34);
  line-height: 1.7;
}

.ingredient-notes span { color: var(--kinako-gold); margin-right: 18px; font-family: var(--serif-latin); font-size: 1.6rem; }

.washi-tape {
  position: absolute;
  padding: 12px 48px;
  background: rgba(247,232,199,.78);
  color: var(--roasted-anko);
  font-family: var(--serif-jp);
  box-shadow: 0 12px 20px rgba(0,0,0,.16);
}
.tape-a { left: 13vw; top: 21vh; transform: rotate(-10deg); }
.tape-b { right: 18vw; bottom: 10vh; transform: rotate(8deg); }

.scene-tea {
  background: var(--mochi-cream);
  color: var(--roasted-anko);
}

.tea-table {
  position: absolute;
  left: 10vw;
  top: 20vh;
  width: 38vw;
  height: 38vw;
  max-width: 520px;
  max-height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, #6d3a24, var(--roasted-anko));
  box-shadow: 0 32px 80px rgba(74,33,24,.28);
}

.tea-bowl {
  position: absolute;
  width: 38%;
  height: 38%;
  left: 31%;
  top: 29%;
  border-radius: 50%;
  background: radial-gradient(circle at center, #24394A 0 32%, #F7E8C7 34% 52%, #8F2F2A 54% 100%);
}

.steam {
  position: absolute;
  width: 70px;
  height: 180px;
  border-left: 3px solid rgba(182,106,44,.34);
  border-radius: 50%;
  filter: blur(.2px);
  animation: steamCurl 5s ease-in-out infinite;
}
.steam-a { left: 46%; top: -8%; }
.steam-b { left: 53%; top: -2%; animation-delay: -1.5s; }
.steam-c { left: 39%; top: 0; animation-delay: -3s; }

.quiet-copy {
  position: absolute;
  right: 9vw;
  top: 18vh;
  width: min(620px, 46vw);
}

.quiet-copy .seal { width: 84px; height: 84px; margin-bottom: 28px; transform: rotate(-9deg); }
.vertical-poem { position: absolute; right: 4vw; bottom: 9vh; }

.syrup-pool {
  position: absolute;
  right: 18vw;
  bottom: -9vh;
  width: 34vw;
  height: 22vh;
  border-radius: 50%;
  background: rgba(182,106,44,.34);
  filter: blur(2px);
}

.scene-rain {
  background: linear-gradient(180deg, var(--noren-indigo), var(--rain-asphalt));
  color: var(--mochi-cream);
}

.rain-glass {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(105deg, transparent 0 18px, rgba(247,232,199,.08) 19px 20px), radial-gradient(circle at 50% 100%, rgba(182,106,44,.32), transparent 38%);
  animation: rainSlide 4s linear infinite;
}

.reflection-sign {
  position: absolute;
  left: 8vw;
  bottom: 15vh;
  transform: skewX(-8deg) rotate(1deg);
  opacity: .9;
}

.reflection-sign p { color: var(--kinako-gold); letter-spacing: .28em; text-transform: uppercase; }
.reflection-sign span { font-family: var(--serif-jp); font-size: clamp(2rem, 6vw, 6rem); color: rgba(247,232,199,.42); }

.street-note {
  position: absolute;
  right: 10vw;
  top: 24vh;
  padding: 28px 34px;
  background: rgba(247,232,199,.88);
  color: var(--roasted-anko);
  font-family: var(--serif-jp);
  font-size: clamp(1.2rem, 2.4vw, 2.5rem);
  transform: rotate(3deg);
}

.scene-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 12px;
}

.scene-nav a {
  color: var(--mochi-cream);
  text-decoration: none;
  font-family: var(--gothic);
  font-size: 11px;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
  padding: 10px 6px;
  border-left: 1px solid rgba(216,168,78,.38);
  transition: color .35s ease, transform .35s ease;
}

.scene-nav a:hover, .scene-nav a.active { color: var(--kinako-gold); transform: translateX(-4px); }

.hover-lift { transition: transform .45s ease, box-shadow .45s ease, filter .45s ease; }
.hover-lift:hover { transform: translateY(-7px) rotate(var(--hover-rotate, 0deg)); box-shadow: 0 32px 70px rgba(0,0,0,.32); filter: saturate(1.08); }
.flyer-one:hover { --hover-rotate: 4deg; }
.flyer-two:hover { --hover-rotate: -6deg; }

.reveal { opacity: 0; transform: translateY(38px); transition: opacity 1s ease, transform 1s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

@keyframes grainDrift { 50% { transform: translate(2%, -1%); } }
@keyframes clothSway { 50% { transform: skewX(1.8deg) translateY(1.5%); } }
@keyframes mochiBreath { 50% { transform: translateY(-14px) scale(1.035); border-radius: 55% 45% 48% 52%; } }
@keyframes morningSweep { to { transform: translateX(-8%) rotate(3deg); } }
@keyframes steamCurl { 50% { transform: translateY(-28px) translateX(16px) scaleX(1.3); opacity: .35; } 100% { opacity: .08; } }
@keyframes rainSlide { to { background-position: 0 90px, 0 0; } }

@media (max-width: 820px) {
  .scene-shutter { display: block; }
  .arrival-copy { padding: 24vh 7vw 0; }
  .shop-sign, .quiet-copy, .ingredient-notes { width: auto; left: 7vw; right: 7vw; }
  .noren-wrap { width: 100vw; opacity: .72; }
  .wood-tray { width: 78vw; height: 44vh; right: 5vw; top: 13vh; }
  .ingredient-notes { bottom: 7vh; }
  .tea-table { width: 72vw; height: 72vw; left: -16vw; top: 15vh; }
  .quiet-copy { top: 43vh; }
  .scene-nav { display: none; }
}