:root {
  --vermilion: #E34234;
  --indigo: #080B1F;
  --washi: #F6E7C8;
  --mint: #9FE6D0;
  --brass: #C99A3A;
  --plum: #4B1635;
  --porcelain: #DCE8F2;
  --title: "Zen Antique Soft", "Shippori Mincho", "Yu Mincho", Georgia, serif;
  --poem: "Shippori Mincho", "Cormorant Garamond", "Times New Roman", serif;
  --ui: "Noto Sans JP", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--indigo);
}

body {
  margin: 0;
  color: var(--washi);
  background:
    radial-gradient(circle at 74% 12%, rgba(75, 22, 53, .48), transparent 28rem),
    radial-gradient(circle at 18% 88%, rgba(227, 66, 52, .22), transparent 24rem),
    linear-gradient(180deg, #080B1F 0%, #070716 47%, #120614 100%);
  font-family: var(--ui);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.ritual-shell {
  position: relative;
  min-height: 500vh;
  isolation: isolate;
}

.ambient-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.ambient-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0 12%, rgba(246, 231, 200, .035) 12.2% 12.5%, transparent 12.8% 100%),
    radial-gradient(circle, rgba(201, 154, 58, .18) 0 1px, transparent 1.8px);
  background-size: 18rem 100%, 5.5rem 5.5rem;
  opacity: .8;
}

.gold-dust {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201, 154, 58, .6) 0 1px, transparent 1.4px);
  background-size: 7rem 9rem;
  animation: dustDrift 18s linear infinite;
  opacity: .25;
}

.torii-shadow {
  position: absolute;
  width: 120vw;
  height: 5rem;
  left: -10vw;
  background: rgba(227, 66, 52, .11);
  filter: blur(1px);
  transform: rotate(-9deg);
}

.shadow-one { top: 19%; }
.shadow-two { top: 66%; transform: rotate(7deg); background: rgba(75, 22, 53, .36); }

.steam-field::before,
.steam-field::after {
  content: "";
  position: absolute;
  width: 16rem;
  height: 32rem;
  border: solid rgba(159, 230, 208, .22);
  border-width: 0 0 0 2px;
  border-radius: 60% 0 0 45%;
  filter: blur(.5px);
  animation: steamRise 8s ease-in-out infinite;
}

.steam-field::before { left: 11%; bottom: -7rem; transform: rotate(16deg); }
.steam-field::after { right: 15%; bottom: -10rem; animation-delay: -3s; transform: rotate(-18deg); }

.gate-scene {
  position: relative;
  min-height: 100vh;
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 8vh 7vw;
  display: grid;
  align-items: center;
  opacity: .78;
  transform: translateY(2rem);
  transition: opacity .8s ease, transform .8s ease;
}

.gate-scene.is-active {
  opacity: 1;
  transform: translateY(0);
}

.bell-nav {
  position: fixed;
  right: clamp(1rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 1rem;
}

.bell-dot {
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid rgba(201, 154, 58, .75);
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(#C99A3A, #4B1635);
  box-shadow: 0 0 0 transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.bell-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 1rem;
  background: rgba(246, 231, 200, .25);
}

.bell-dot span {
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  color: var(--washi);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .3s ease;
}

.bell-dot:hover span,
.bell-dot.is-lit span { opacity: 1; }

.bell-dot.is-lit {
  background: radial-gradient(circle at 35% 28%, #F6E7C8, #C99A3A 34%, #E34234 66%);
  box-shadow: 0 0 1.4rem rgba(201, 154, 58, .8), 0 0 2.4rem rgba(227, 66, 52, .4);
}

.omen-cup {
  position: fixed;
  left: clamp(1rem, 4vw, 3.5rem);
  bottom: clamp(1rem, 4vw, 3rem);
  z-index: 15;
  display: grid;
  justify-items: center;
  gap: .5rem;
  transition: transform .45s ease;
}

.cup-rim {
  width: clamp(5rem, 9vw, 7.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: .45rem;
  background: radial-gradient(circle, #DCE8F2 0 7%, #F6E7C8 18%, #4B1635 19% 23%, #DCE8F2 24% 34%, #080B1F 36%);
  box-shadow: 0 0 2rem rgba(220, 232, 242, .25), inset 0 0 1.5rem rgba(8, 11, 31, .9);
}

.cup-liquid {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(115deg, transparent 0 43%, rgba(246, 231, 200, .24) 44% 47%, transparent 48%),
    radial-gradient(circle at 32% 24%, rgba(159, 230, 208, .52), transparent 18%),
    radial-gradient(circle at 65% 70%, rgba(227, 66, 52, .35), transparent 26%),
    #DCE8F2;
  color: var(--plum);
  overflow: hidden;
  animation: liquidShimmer 5s ease-in-out infinite;
}

.cup-symbol {
  font-family: var(--title);
  font-size: 2.1rem;
  transition: transform .5s ease, opacity .5s ease;
}

.cup-caption {
  font-size: .62rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--brass);
}

.torii,
.inner-torii {
  position: absolute;
  width: min(52vw, 34rem);
  height: min(48vh, 28rem);
  pointer-events: none;
}

.torii span,
.inner-torii span {
  position: absolute;
  background: var(--vermilion);
  box-shadow: 0 0 1.8rem rgba(227, 66, 52, .42), inset 0 -.45rem 0 rgba(75, 22, 53, .42);
}

.torii span:nth-child(1), .inner-torii span:nth-child(1) { left: 0; right: 0; top: 0; height: 2.1rem; border-radius: .18rem; }
.torii span:nth-child(2), .inner-torii span:nth-child(2) { left: 17%; top: 1.5rem; bottom: 0; width: 2rem; }
.torii span:nth-child(3), .inner-torii span:nth-child(3) { right: 17%; top: 1.5rem; bottom: 0; width: 2rem; }

.gate-one { right: 8%; top: 19vh; transform: perspective(600px) rotateY(-12deg); }
.gate-two { left: 7%; top: 17vh; transform: scale(.88) rotate(2deg); opacity: .82; }
.gate-three { right: 10%; bottom: 12vh; transform: scale(.74) rotate(-3deg); opacity: .72; }

.vending-glow {
  position: absolute;
  left: 12%;
  top: 18vh;
  width: 7rem;
  height: 24rem;
  border-radius: .6rem;
  background: linear-gradient(180deg, rgba(159, 230, 208, .05), rgba(159, 230, 208, .55), rgba(220, 232, 242, .1));
  box-shadow: 0 0 4rem rgba(159, 230, 208, .55), inset 0 0 2rem rgba(220, 232, 242, .25);
  animation: vendingSlide 8s ease-in-out infinite alternate;
}

.hanging-plaque {
  width: min(32rem, 72vw);
  margin-left: clamp(3rem, 17vw, 13rem);
  padding: 2rem 1.4rem;
  text-align: center;
  border: 1px solid rgba(201, 154, 58, .7);
  background: linear-gradient(135deg, rgba(75, 22, 53, .92), rgba(8, 11, 31, .9));
  box-shadow: 0 1rem 4rem rgba(0, 0, 0, .45), inset 0 0 2rem rgba(227, 66, 52, .16);
  position: relative;
}

.hanging-plaque::before,
.hanging-plaque::after {
  content: "";
  position: absolute;
  top: -6rem;
  width: 1px;
  height: 6rem;
  background: var(--brass);
}
.hanging-plaque::before { left: 20%; }
.hanging-plaque::after { right: 20%; }

.hanging-plaque small,
.last-plaque small {
  color: var(--brass);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .72rem;
}

h1, h2, .vertical-title {
  font-family: var(--title);
  font-weight: 400;
}

h1 {
  margin: .25rem 0 0;
  color: var(--washi);
  font-size: clamp(4rem, 13vw, 10rem);
  line-height: .82;
  text-shadow: .06em .06em 0 rgba(227, 66, 52, .42), 0 0 2rem rgba(246, 231, 200, .18);
}

.paper-tag,
.poem-slip,
.open-fortune {
  font-family: var(--poem);
  color: var(--indigo);
  background:
    linear-gradient(90deg, rgba(201,154,58,.12), transparent 18% 80%, rgba(201,154,58,.16)),
    var(--washi);
  box-shadow: 0 .8rem 2rem rgba(0,0,0,.35);
}

.paper-tag {
  position: absolute;
  left: 8%;
  bottom: 17vh;
  padding: 2.2rem .7rem;
  writing-mode: vertical-rl;
  letter-spacing: .18em;
  font-size: 1.35rem;
  transform: rotate(3deg);
}

.whisper {
  max-width: 25rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  color: rgba(246, 231, 200, .82);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.5;
}

.whisper-one { margin-left: auto; margin-right: 13%; margin-top: 4rem; }

.shide-row {
  position: absolute;
  top: 11vh;
  left: 28%;
  display: flex;
  gap: 1.4rem;
}

.shide-row i {
  width: 1.3rem;
  height: 4.8rem;
  background: var(--washi);
  clip-path: polygon(0 0, 100% 0, 66% 32%, 100% 32%, 40% 72%, 76% 72%, 0 100%);
  animation: flutter 2.8s ease-in-out infinite;
  transform-origin: top;
}
.shide-row i:nth-child(even) { animation-delay: -.9s; }

.noren-curtain {
  position: absolute;
  top: 0;
  left: 16%;
  width: 42rem;
  max-width: 68vw;
  height: 34vh;
  display: flex;
  gap: .25rem;
}

.noren-curtain span {
  flex: 1;
  background: linear-gradient(180deg, rgba(246, 231, 200, .85), rgba(246, 231, 200, .18));
  transform-origin: top;
  animation: curtainPart 7s ease-in-out infinite;
}
.noren-curtain span:nth-child(2), .noren-curtain span:nth-child(3) { animation-delay: -.7s; }

.basin-stage {
  position: relative;
  justify-self: center;
  width: min(58vw, 34rem);
  aspect-ratio: 1.55;
  margin-top: 8vh;
}

.water-basin {
  position: absolute;
  inset: 18% 0 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(159,230,208,.55), transparent 21%),
    radial-gradient(ellipse at 50% 48%, #DCE8F2 0 34%, #4B1635 35% 43%, #080B1F 44%);
  box-shadow: 0 0 3rem rgba(220,232,242,.3), inset 0 0 2.2rem rgba(8,11,31,.65);
  overflow: hidden;
}

.ripple {
  position: absolute;
  inset: 28%;
  border: 1px solid rgba(159, 230, 208, .72);
  border-radius: 50%;
  animation: ripple 3.4s linear infinite;
}
.r2 { animation-delay: -1.1s; }
.r3 { animation-delay: -2.2s; }

.ladle {
  position: absolute;
  width: 56%;
  height: .75rem;
  left: 46%;
  top: 16%;
  border-radius: 999px;
  background: linear-gradient(90deg, #C99A3A, #F6E7C8, #C99A3A);
  transform: rotate(-24deg);
  z-index: 1;
}
.ladle::before { content:""; position:absolute; left:-3.5rem; top:-1.7rem; width:4.1rem; height:4.1rem; border-radius:50%; border: .55rem solid var(--brass); background: rgba(220,232,242,.3); }

.vertical-title {
  position: absolute;
  right: 10%;
  top: 20vh;
  writing-mode: vertical-rl;
  color: var(--washi);
  font-size: clamp(2.2rem, 6vw, 5rem);
  letter-spacing: .08em;
  text-shadow: 0 0 1.4rem rgba(227, 66, 52, .48);
}

.poem-slip {
  position: absolute;
  left: 9%;
  bottom: 12vh;
  width: 15rem;
  padding: 2rem 1.3rem;
  line-height: 1.55;
  transform: rotate(-5deg);
}

.seal-stamp,
.hanko {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--vermilion);
  border: .22rem solid var(--vermilion);
  font-family: var(--title);
  opacity: .8;
  transform: rotate(12deg);
}
.seal-stamp { right: 18%; bottom: 13vh; width: 4.4rem; height: 4.4rem; font-size: 2rem; }

.bell-altar {
  justify-self: center;
  position: relative;
  height: 33rem;
  width: 18rem;
  display: grid;
  justify-items: center;
  align-content: start;
}

.rope {
  width: 2rem;
  height: 22rem;
  background: repeating-linear-gradient(45deg, #F6E7C8 0 .35rem, #C99A3A .36rem .7rem);
  border-radius: 999px;
  transform-origin: top;
  animation: ropeSway 3.2s ease-in-out infinite;
  box-shadow: 0 0 1rem rgba(201,154,58,.28);
}

.rope.is-pulled { animation: ropePull .7s ease; }
.rope i { position: absolute; bottom: -1.2rem; width: .45rem; height: 4rem; background: var(--vermilion); border-radius: 999px; }
.rope i:nth-child(1) { left: -.7rem; transform: rotate(13deg); }
.rope i:nth-child(2) { left: .75rem; }
.rope i:nth-child(3) { right: -.7rem; transform: rotate(-13deg); }

.brass-bell {
  margin-top: -1rem;
  width: 7.5rem;
  height: 5.3rem;
  border-radius: 50% 50% 36% 36%;
  background: radial-gradient(circle at 35% 22%, #F6E7C8, #C99A3A 36%, #7d5620 78%);
  box-shadow: 0 0 2rem rgba(201,154,58,.4);
}

.pull-charm {
  margin-top: 2rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--brass);
  background: rgba(75, 22, 53, .68);
  color: var(--washi);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.fox-mask {
  position: absolute;
  left: 17%;
  top: 23vh;
  width: 9rem;
  height: 7rem;
  background: var(--washi);
  clip-path: polygon(50% 0, 66% 23%, 100% 15%, 78% 58%, 62% 100%, 50% 78%, 38% 100%, 22% 58%, 0 15%, 34% 23%);
  box-shadow: 0 0 2rem rgba(246,231,200,.24);
}
.fox-mask::before, .fox-mask::after { content:""; position:absolute; top:3rem; width:1.2rem; height:.28rem; background: var(--vermilion); }
.fox-mask::before { left: 2.6rem; transform: rotate(18deg); }
.fox-mask::after { right: 2.6rem; transform: rotate(-18deg); }

.plaque-strip {
  position: absolute;
  right: 12%;
  top: 16vh;
  width: min(25rem, 52vw);
  padding: 1.5rem;
  border-left: 3px solid var(--vermilion);
  background: linear-gradient(90deg, rgba(75,22,53,.85), rgba(8,11,31,.38));
}
.plaque-strip h2, .last-plaque h2 { margin: 0 0 .8rem; color: var(--washi); font-size: clamp(2rem, 5vw, 4.3rem); line-height: .96; }
.plaque-strip p, .last-plaque p { font-family: var(--poem); color: rgba(246,231,200,.82); line-height: 1.65; }

.drawer-wall {
  width: min(58rem, 74vw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
  margin-left: 6vw;
}

.fortune-drawer {
  position: relative;
  min-height: 8rem;
  border: 1px solid rgba(201,154,58,.55);
  background: linear-gradient(135deg, #4B1635, #180816 72%);
  box-shadow: inset 0 0 2rem rgba(8,11,31,.65), 0 .7rem 1.8rem rgba(0,0,0,.28);
  cursor: pointer;
  overflow: hidden;
  transition: transform .45s ease, box-shadow .45s ease;
}
.fortune-drawer::after { content:""; position:absolute; left:50%; top:47%; width:1.2rem; height:1.2rem; border-radius:50%; background: var(--brass); transform: translate(-50%,-50%); box-shadow:0 0 1rem rgba(201,154,58,.5); }
.fortune-drawer b { position:absolute; top:.7rem; left:.8rem; color: var(--brass); font-family: var(--title); font-size: 1.4rem; }
.fortune-drawer span { position:absolute; left: 1rem; right:1rem; bottom: -2.6rem; padding:.75rem; color: var(--indigo); background: var(--washi); font-family: var(--poem); transition: bottom .45s ease; }
.fortune-drawer.is-open, .fortune-drawer:hover { transform: translateX(1.2rem); box-shadow: 0 0 2.2rem rgba(227,66,52,.26); }
.fortune-drawer.is-open span, .fortune-drawer:hover span { bottom: .8rem; }

.drawer-title { right: 8%; color: var(--brass); }
.open-fortune { position: absolute; right: 17%; bottom: 11vh; width: 19rem; padding: 1.4rem; transform: rotate(3deg); }
.hanko { left: 10%; bottom: 12vh; width: 5.4rem; height: 5.4rem; font-size: 1.8rem; }

.inner-torii { left: 50%; top: 10vh; transform: translateX(-50%); width: min(72vw, 48rem); height: 66vh; opacity: .86; }

.moon-cup-final {
  justify-self: center;
  width: min(50vw, 24rem);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1.4rem;
  background: radial-gradient(circle, #F6E7C8, #DCE8F2 26%, #4B1635 27% 34%, #080B1F 35%);
  box-shadow: 0 0 5rem rgba(220,232,242,.34);
}
.moon-cup-final div { width:100%; height:100%; border-radius:50%; background: radial-gradient(circle at 48% 38%, #F6E7C8 0 12%, transparent 13%), radial-gradient(circle at 50% 55%, rgba(159,230,208,.65), #DCE8F2 45%, #080B1F 80%); animation: fillCup 5s ease-in-out infinite; }

.last-plaque {
  position: absolute;
  left: 10%;
  bottom: 13vh;
  width: min(30rem, 58vw);
  padding: 1.4rem 1.6rem;
  background: rgba(8, 11, 31, .72);
  border: 1px solid rgba(201,154,58,.6);
}

.steam-calligraphy i {
  position: absolute;
  width: 10rem;
  height: 20rem;
  border-left: 2px solid rgba(159,230,208,.35);
  border-radius: 70% 0 0 40%;
  animation: steamRise 5.5s ease-in-out infinite;
}
.steam-calligraphy i:nth-child(1) { right: 18%; bottom: 20vh; }
.steam-calligraphy i:nth-child(2) { right: 28%; bottom: 15vh; animation-delay: -1.7s; }
.steam-calligraphy i:nth-child(3) { right: 12%; bottom: 11vh; animation-delay: -3.1s; }

@keyframes dustDrift { to { background-position: 7rem 18rem; } }
@keyframes steamRise { 0%,100% { transform: translateY(1rem) rotate(8deg); opacity:.15; } 50% { transform: translateY(-3rem) rotate(-8deg); opacity:.55; } }
@keyframes liquidShimmer { 0%,100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(5deg) scale(1.03); } }
@keyframes vendingSlide { 0% { transform: translateX(0); opacity:.9; } 100% { transform: translateX(-5rem); opacity:.34; } }
@keyframes flutter { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(8deg); } }
@keyframes curtainPart { 0%,100% { transform: rotateX(0deg) skewX(0); opacity:.9; } 50% { transform: rotateX(18deg) skewX(4deg); opacity:.46; } }
@keyframes ripple { 0% { transform: scale(.25); opacity:.9; } 100% { transform: scale(2.2); opacity:0; } }
@keyframes ropeSway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes ropePull { 0%,100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(2.2rem) rotate(-7deg); } }
@keyframes fillCup { 0%,100% { transform: scale(.88); filter: brightness(.86); } 50% { transform: scale(1); filter: brightness(1.2); } }

@media (max-width: 760px) {
  .bell-nav { right: .6rem; }
  .omen-cup { transform: scale(.78); transform-origin: left bottom; }
  .gate-scene { padding: 7vh 2.2rem; }
  .drawer-wall { grid-template-columns: 1fr 1fr; width: 82vw; margin-left: 0; }
  .vertical-title { right: 2rem; font-size: 2.4rem; }
  .plaque-strip, .last-plaque { width: 72vw; left: 2rem; right: auto; }
  .paper-tag, .poem-slip, .open-fortune { display: none; }
  .torii, .inner-torii { width: 82vw; }
}