:root {
  --vermilion: #E6382E;
  --aqua: #80F5FF;
  --sky: #BDEBFF;
  --pearl: #F7FFF7;
  --moss: #24483A;
  --gold: #F6C85F;
  --indigo: #111A35;
  --round-sign: "M PLUS Rounded 1c", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --body-soft: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Segoe UI", system-ui, sans-serif;
  --label: "Kodchasan", "Trebuchet MS", system-ui, sans-serif;
  --serif-jp: "Noto Serif JP", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--sky); }
body {
  margin: 0;
  color: var(--indigo);
  font-family: var(--body-soft);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 5%, rgba(247,255,247,.95), transparent 28vw),
    linear-gradient(135deg, #BDEBFF 0%, #80F5FF 46%, #F7FFF7 100%);
}

.water-film {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 45%), rgba(247,255,247,.48), transparent 0 7rem, rgba(128,245,255,.16) 7.2rem, transparent 14rem),
    radial-gradient(circle at 14% 25%, rgba(247,255,247,.7) 0 .35rem, transparent .42rem),
    radial-gradient(circle at 76% 18%, rgba(247,255,247,.55) 0 .55rem, transparent .62rem),
    radial-gradient(circle at 62% 78%, rgba(247,255,247,.45) 0 .42rem, transparent .5rem);
  mix-blend-mode: screen;
}

.signal-charms {
  position: fixed;
  right: clamp(14px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 12px;
}

.charm {
  width: 48px;
  height: 48px;
  border-radius: 50% 50% 46% 54%;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--indigo);
  font: 700 9px/1 var(--label);
  letter-spacing: .08em;
  background: linear-gradient(145deg, rgba(247,255,247,.9), rgba(128,245,255,.68));
  border: 1px solid rgba(247,255,247,.85);
  box-shadow: inset -7px -8px 16px rgba(17,26,53,.12), inset 7px 8px 16px rgba(247,255,247,.75), 0 10px 22px rgba(36,72,58,.18);
  transition: transform .45s ease, background .45s ease, color .45s ease;
}

.charm.active { transform: translateX(-8px) scale(1.15); background: linear-gradient(145deg, var(--gold), var(--vermilion)); color: var(--pearl); }
.charm span { transform: rotate(-10deg); }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 5vw, 72px);
}

.scene::before, .scene::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.scene::before { inset: -12%; background: radial-gradient(circle at 80% 10%, rgba(246,200,95,.5), transparent 20rem), radial-gradient(circle at 10% 70%, rgba(230,56,46,.18), transparent 18rem); filter: blur(1px); }
.scene::after { width: 92vw; height: 92vw; border-radius: 43% 57% 53% 47%; border: 1px solid rgba(247,255,247,.45); box-shadow: inset 0 0 90px rgba(247,255,247,.28); animation: mistBreath 7s ease-in-out infinite; }

.scene-code, .rec-capsule {
  position: absolute;
  top: clamp(18px, 3vw, 34px);
  left: clamp(18px, 4vw, 56px);
  border-radius: 999px;
  padding: 10px 16px;
  font: 700 12px/1 var(--label);
  letter-spacing: .12em;
  color: var(--indigo);
  background: rgba(247,255,247,.48);
  border: 1px solid rgba(247,255,247,.8);
  box-shadow: inset 0 1px 12px rgba(255,255,255,.7), 0 10px 30px rgba(36,72,58,.12);
}

.blessed-lens {
  position: relative;
  width: min(74vw, 860px);
  height: min(74vw, 640px);
  border-radius: 48% 52% 44% 56% / 54% 46% 54% 46%;
  background:
    radial-gradient(circle at 28% 18%, rgba(247,255,247,.98) 0 4%, transparent 12%),
    radial-gradient(circle at 70% 65%, rgba(17,26,53,.18), transparent 30%),
    linear-gradient(135deg, rgba(189,235,255,.86), rgba(128,245,255,.7) 50%, rgba(247,255,247,.72));
  border: 2px solid rgba(247,255,247,.86);
  box-shadow: inset 28px 28px 80px rgba(247,255,247,.75), inset -42px -36px 90px rgba(17,26,53,.18), 0 30px 90px rgba(36,72,58,.28), 0 0 0 18px rgba(128,245,255,.18);
  transform: rotate(-5deg);
  animation: lensFloat 8s ease-in-out infinite;
}

.lens-reflection { position: absolute; inset: 9%; border-radius: inherit; overflow: hidden; opacity: .62; }
.torii-reflection::before, .torii-reflection::after { content: ""; position: absolute; background: var(--vermilion); filter: blur(.2px); }
.torii-reflection::before { width: 82%; height: 11%; left: 8%; top: 38%; border-radius: 22px; transform: rotate(7deg); box-shadow: 0 38px 0 rgba(230,56,46,.65); }
.torii-reflection::after { width: 10%; height: 60%; left: 25%; top: 34%; border-radius: 12px; box-shadow: 290px 34px 0 rgba(230,56,46,.78); transform: rotate(5deg); }
.focus-halo { position: absolute; inset: 15%; border-radius: 50%; border: 2px dashed rgba(247,255,247,.82); animation: focusBreath 4s ease-in-out infinite; }

.domain-wordmark {
  position: absolute;
  left: 50%;
  top: 52%;
  margin: 0;
  transform: translate(-50%, -50%) rotate(5deg) scaleX(1.08);
  font: 900 clamp(4rem, 13vw, 10rem)/.86 var(--round-sign);
  letter-spacing: -.08em;
  color: rgba(17,26,53,.82);
  text-shadow: 0 3px 0 rgba(247,255,247,.72), 0 18px 32px rgba(36,72,58,.22);
  opacity: .92;
}

.droplet {
  position: absolute;
  border-radius: 55% 45% 54% 46% / 44% 58% 42% 56%;
  background: radial-gradient(circle at 30% 22%, #F7FFF7 0 8%, rgba(247,255,247,.25) 18%, rgba(128,245,255,.52) 52%, rgba(189,235,255,.38));
  border: 1px solid rgba(247,255,247,.8);
  box-shadow: inset 8px 10px 18px rgba(247,255,247,.7), inset -10px -12px 22px rgba(17,26,53,.14), 0 14px 24px rgba(36,72,58,.16);
  display: grid;
  place-items: center;
  animation: dropletDrift 6s ease-in-out infinite;
}
.droplet i { font-family: var(--serif-jp); font-style: normal; color: var(--vermilion); font-size: 20px; opacity: .72; }
.droplet-domain { width: 170px; height: 132px; right: 5%; top: 12%; transform: rotate(14deg); z-index: 2; }
.droplet-domain span { font: 900 28px var(--round-sign); color: var(--indigo); letter-spacing: -.06em; transform: rotate(-17deg) scaleX(.78); }
.d1 { width: 86px; height: 70px; left: 13%; top: 17%; animation-delay: -2s; }
.d2 { width: 58px; height: 74px; right: 22%; bottom: 12%; animation-delay: -4s; }
.d3 { width: 46px; height: 42px; left: 36%; bottom: 10%; animation-delay: -1s; }

.paper-rail {
  position: absolute;
  writing-mode: vertical-rl;
  right: 12vw;
  bottom: 8vh;
  min-height: 230px;
  border-radius: 18px 18px 38px 38px;
  padding: 22px 12px;
  background: linear-gradient(#F7FFF7, rgba(247,255,247,.72));
  box-shadow: 0 20px 40px rgba(36,72,58,.16);
  transform-origin: top center;
  animation: paperSway 5s ease-in-out infinite;
}
.paper-rail p { margin: 0 0 16px; font: 700 13px var(--label); letter-spacing: .1em; }
.paper-rail strong { font: 700 23px var(--serif-jp); color: var(--vermilion); }

.gloss-charm {
  position: absolute;
  left: clamp(18px, 7vw, 96px);
  bottom: clamp(22px, 7vw, 82px);
  border: 0;
  border-radius: 999px 999px 999px 30px;
  padding: 15px 24px;
  color: var(--indigo);
  font: 900 13px var(--label);
  letter-spacing: .08em;
  background: linear-gradient(145deg, #F7FFF7, #80F5FF 75%);
  box-shadow: inset 0 2px 10px rgba(255,255,255,.9), inset 0 -9px 18px rgba(17,26,53,.1), 0 18px 34px rgba(36,72,58,.2);
  cursor: pointer;
  transition: transform .35s ease, filter .35s ease;
}
.gloss-charm:hover, .gloss-charm.pulsed { transform: translateY(-5px) rotate(-2deg); filter: saturate(1.25) brightness(1.06); }
.gloss-charm.red { background: linear-gradient(145deg, #F7FFF7, #E6382E); color: #F7FFF7; left: auto; right: 10%; bottom: 14%; }
.gloss-charm.gold { background: linear-gradient(145deg, #F7FFF7, #F6C85F); left: 50%; transform: translateX(-50%); }
.gloss-charm.gold:hover, .gloss-charm.gold.pulsed { transform: translateX(-50%) translateY(-5px) rotate(2deg); }

.scene-torii { background: linear-gradient(160deg, #F7FFF7 0%, #BDEBFF 46%, #80F5FF 100%); }
.torii-gate { position: absolute; width: min(88vw, 980px); height: min(72vh, 680px); transform: skewY(-4deg); filter: drop-shadow(0 25px 35px rgba(36,72,58,.22)); }
.beam, .pillar, .cross { position: absolute; background: linear-gradient(90deg, #E6382E, #ff645a 48%, #B91E1A); border-radius: 14px; box-shadow: inset 0 8px 0 rgba(247,255,247,.22), inset 0 -12px 18px rgba(17,26,53,.18); }
.beam.top { left: 2%; top: 7%; width: 96%; height: 58px; transform: rotate(-3deg); }
.beam.cap { left: 12%; top: 20%; width: 76%; height: 42px; transform: rotate(2deg); }
.pillar { top: 21%; width: 54px; height: 72%; }
.pillar.left { left: 20%; transform: rotate(5deg); }
.pillar.right { right: 22%; transform: rotate(-5deg); }
.cross { left: 28%; top: 47%; width: 44%; height: 32px; opacity: .88; }
.oval-feed {
  position: relative;
  width: min(67vw, 680px);
  min-height: 390px;
  border-radius: 52% 48% 45% 55% / 47% 55% 45% 53%;
  padding: clamp(46px, 8vw, 90px);
  display: grid;
  align-content: center;
  background: radial-gradient(circle at 20% 15%, rgba(247,255,247,.95), transparent 18%), linear-gradient(135deg, rgba(17,26,53,.82), rgba(36,72,58,.58) 42%, rgba(128,245,255,.52));
  border: 2px solid rgba(247,255,247,.76);
  color: var(--pearl);
  box-shadow: inset 18px 24px 54px rgba(247,255,247,.18), inset -40px -20px 60px rgba(17,26,53,.32), 0 35px 80px rgba(36,72,58,.3);
}
.oval-feed h2, .overlay-lens h2, .stage-core h2, .final-lens h2 { margin: 0 0 16px; font: 900 clamp(2.5rem, 7vw, 6.7rem)/.84 var(--round-sign); letter-spacing: -.07em; }
.oval-feed p, .overlay-lens p, .stage-core p, .final-lens p { margin: 0; max-width: 560px; font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.45; }
.feed-sheen { position: absolute; inset: 9%; border-radius: inherit; border: 1px solid rgba(247,255,247,.3); }
.rec-capsule { top: auto; bottom: 7%; left: 12%; color: var(--pearl); background: rgba(230,56,46,.7); }
.rec-capsule span { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); margin-right: 9px; animation: recBlink 1.8s ease-in-out infinite; }
.shimenawa-cable { position: absolute; left: -5%; bottom: 8%; width: 110%; height: 34px; background: repeating-linear-gradient(115deg, #F6C85F 0 18px, #d9a344 18px 34px); border-radius: 999px; box-shadow: inset 0 7px 9px rgba(247,255,247,.35), 0 15px 25px rgba(36,72,58,.18); transform: rotate(2deg); }
.shimenawa-cable span { position: relative; display: inline-block; width: 24px; height: 62px; margin-left: 14%; top: 23px; background: #F7FFF7; clip-path: polygon(0 0,100% 0,100% 62%,62% 45%,62% 100%,0 48%); }

.scene-omikuji { background: radial-gradient(circle at 18% 14%, #F7FFF7, transparent 23rem), linear-gradient(125deg, #BDEBFF, #F7FFF7 48%, #80F5FF); }
.fortune-stack { position: absolute; inset: 8% auto 8% 6%; display: flex; gap: clamp(12px, 2vw, 28px); align-items: flex-start; perspective: 900px; }
.fortune-strip {
  width: clamp(72px, 8vw, 112px);
  min-height: 68vh;
  padding: 22px 12px;
  border-radius: 18px 18px 42px 42px;
  text-align: center;
  writing-mode: vertical-rl;
  background: linear-gradient(#F7FFF7, rgba(247,255,247,.74));
  color: var(--indigo);
  box-shadow: 0 22px 40px rgba(36,72,58,.18), inset 0 -16px 20px rgba(128,245,255,.18);
  transform-origin: 50% 0;
}
.fortune-strip b { font: 800 32px var(--serif-jp); color: var(--vermilion); margin-left: 18px; }
.fortune-strip span { font: 800 13px var(--label); letter-spacing: .1em; }
.sway-a { animation: paperSway 5.5s ease-in-out infinite; }
.sway-b { animation: paperSway 6.5s ease-in-out infinite reverse; }
.sway-c { animation: paperSway 4.8s ease-in-out infinite; }
.overlay-lens {
  position: relative;
  margin-left: 25vw;
  width: min(60vw, 710px);
  min-height: 430px;
  padding: clamp(42px, 7vw, 82px);
  border-radius: 38% 62% 58% 42% / 46% 42% 58% 54%;
  background: radial-gradient(circle at 74% 18%, rgba(246,200,95,.72), transparent 18%), linear-gradient(145deg, rgba(128,245,255,.74), rgba(247,255,247,.76));
  border: 2px solid rgba(247,255,247,.86);
  box-shadow: inset 24px 24px 46px rgba(247,255,247,.64), inset -26px -24px 60px rgba(17,26,53,.12), 0 26px 65px rgba(36,72,58,.2);
}
.seal-bloom { position: absolute; right: 12%; top: 17%; width: 122px; height: 122px; display: grid; place-items: center; border-radius: 50%; color: #F7FFF7; background: rgba(230,56,46,.78); font: 800 55px var(--serif-jp); transform: rotate(14deg) scale(.8); opacity: .72; mix-blend-mode: multiply; transition: transform .5s ease, opacity .5s ease; }
.seal-bloom.bloom { transform: rotate(-8deg) scale(1.25); opacity: .96; }

.scene-kagura { background: radial-gradient(circle at 50% 50%, rgba(17,26,53,.92), #111A35 48%, #24483A 100%); color: var(--pearl); }
.kagura-stage { position: relative; width: min(82vw, 760px); height: min(82vw, 760px); border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(128,245,255,.55); background: radial-gradient(circle, rgba(128,245,255,.2), transparent 65%); box-shadow: 0 0 80px rgba(128,245,255,.25), inset 0 0 70px rgba(247,255,247,.1); animation: slowRotate 28s linear infinite; }
.stage-core { width: 62%; height: 62%; border-radius: 50%; display: grid; align-content: center; justify-items: center; text-align: center; padding: 50px; background: radial-gradient(circle at 28% 18%, rgba(247,255,247,.45), transparent 18%), linear-gradient(145deg, rgba(128,245,255,.32), rgba(230,56,46,.18)); box-shadow: inset 20px 20px 55px rgba(247,255,247,.16), inset -20px -20px 60px rgba(17,26,53,.45); animation: reverseRotate 28s linear infinite; }
.bell { color: var(--gold); font-size: 42px; text-shadow: 0 0 28px var(--gold); animation: bellBounce 1.8s ease-in-out infinite; }
.orbit { position: absolute; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, rgba(247,255,247,.9), rgba(128,245,255,.28)); color: var(--indigo); font: 900 17px var(--label); box-shadow: 0 18px 34px rgba(0,0,0,.22), inset 0 -12px 18px rgba(17,26,53,.15); }
.o1 { top: -2%; left: 44%; } .o2 { right: 0; top: 44%; background: linear-gradient(145deg, #F6C85F, #E6382E); color: #F7FFF7; } .o3 { bottom: 0; left: 43%; } .o4 { left: 0; top: 44%; }

.scene-bloom { background: linear-gradient(145deg, #111A35, #24483A 44%, #80F5FF 120%); color: var(--pearl); }
.pixel-field { position: absolute; inset: 0; overflow: hidden; }
.spirit-pixel { position: absolute; width: var(--s); height: var(--s); left: var(--x); top: var(--y); border-radius: 30%; background: var(--c); opacity: .68; box-shadow: 0 0 22px currentColor; animation: pixelBloom var(--d) ease-in-out infinite; }
.final-lens { position: relative; width: min(78vw, 880px); min-height: 560px; border-radius: 44% 56% 50% 50% / 50% 45% 55% 50%; display: grid; align-content: center; padding: clamp(46px, 8vw, 100px); background: radial-gradient(circle at 25% 18%, rgba(247,255,247,.65), transparent 18%), linear-gradient(135deg, rgba(189,235,255,.34), rgba(128,245,255,.2), rgba(230,56,46,.13)); border: 2px solid rgba(247,255,247,.42); box-shadow: inset 30px 30px 80px rgba(247,255,247,.16), inset -30px -30px 90px rgba(0,0,0,.28), 0 0 80px rgba(128,245,255,.22); }
.final-glass { position: absolute; inset: 8%; border-radius: inherit; background: repeating-linear-gradient(90deg, rgba(247,255,247,.08) 0 22px, transparent 22px 44px), repeating-linear-gradient(0deg, rgba(128,245,255,.08) 0 20px, transparent 20px 40px); mask-image: radial-gradient(circle, black 0 62%, transparent 73%); }
.ending-stamp { margin-top: 34px; justify-self: start; border: 3px solid rgba(230,56,46,.75); color: #F7FFF7; background: rgba(230,56,46,.22); padding: 18px 24px; border-radius: 28px; font: 900 38px/.9 var(--round-sign); transform: rotate(-4deg); }
.ending-stamp span { display: block; margin-top: 10px; font: 800 13px var(--label); letter-spacing: .16em; }

@keyframes lensFloat { 0%,100% { transform: translateY(0) rotate(-5deg) scale(1); } 50% { transform: translateY(-18px) rotate(-2deg) scale(1.02); } }
@keyframes dropletDrift { 0%,100% { translate: 0 0; } 50% { translate: 12px -18px; } }
@keyframes focusBreath { 0%,100% { transform: scale(.94); opacity: .45; } 50% { transform: scale(1.08); opacity: .92; } }
@keyframes mistBreath { 0%,100% { transform: scale(.96) rotate(0); opacity: .28; } 50% { transform: scale(1.05) rotate(8deg); opacity: .56; } }
@keyframes paperSway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg) translateY(8px); } }
@keyframes recBlink { 0%,100% { opacity: .35; transform: scale(.72); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes slowRotate { to { transform: rotate(360deg); } }
@keyframes reverseRotate { to { transform: rotate(-360deg); } }
@keyframes bellBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pixelBloom { 0%,100% { transform: translate(0,0) scale(.35) rotate(0deg); opacity: .08; } 35% { opacity: .75; } 60% { transform: translate(var(--tx), var(--ty)) scale(1.1) rotate(24deg); opacity: .9; } }

.scene.calibrated .torii-gate { animation: gateAlign 1.2s ease both; }
.scene.calibrated .domain-wordmark { animation: wordWake 1.1s ease both; }
@keyframes gateAlign { from { transform: skewY(-4deg) rotate(-9deg) scale(.96); } to { transform: skewY(-4deg) rotate(0) scale(1); } }
@keyframes wordWake { 0% { letter-spacing: -.16em; filter: blur(9px); opacity: .18; } 100% { letter-spacing: -.08em; filter: blur(0); opacity: .92; } }

@media (max-width: 760px) {
  .signal-charms { right: 10px; gap: 8px; }
  .charm { width: 38px; height: 38px; font-size: 8px; }
  .blessed-lens { width: 88vw; height: 72vh; }
  .paper-rail { right: 22vw; bottom: 4vh; min-height: 160px; }
  .fortune-stack { inset: 5% auto auto 4%; opacity: .72; }
  .fortune-strip { width: 54px; min-height: 48vh; }
  .overlay-lens { margin-left: 6vw; width: 82vw; }
  .kagura-stage { width: 88vw; height: 88vw; }
  .stage-core { width: 70%; height: 70%; padding: 28px; }
  .orbit { width: 58px; height: 58px; font-size: 12px; }
}