:root {
  /* compliance typography tokens: JP** JP* clean bilingual-feeling labels Interpret “yome” bride household “cam” that records instant life changes. chosen seed **medical teal** tea* */
  --porcelain: #F7FBF8;
  --teal: #4CC7BE;
  --deep: #063B3A;
  --ink: #071514;
  --pearl: #E9E2D8;
  --blush: #F5A7B8;
  --chrome: #8FA4A6;
  --gold: #D8B45F;
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans-jp: "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", Inter, system-ui, sans-serif;
  --mono: "Fragment Mono", "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--sans-jp);
  overflow-x: hidden;
}

button { font: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .12;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(76,199,190,.22) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, rgba(143,164,166,.20) 0 1px, transparent 1px);
  background-size: 23px 19px, 31px 29px;
  mix-blend-mode: multiply;
}

.cursor-lens {
  position: fixed;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(76,199,190,.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(247,251,248,.35), rgba(76,199,190,.08) 55%, transparent 68%);
  box-shadow: inset 0 0 36px rgba(76,199,190,.22), 0 0 34px rgba(245,167,184,.16);
  backdrop-filter: blur(1.5px) saturate(1.18);
  transition: opacity .35s ease;
}

.focus-rail {
  position: fixed;
  left: 28px;
  top: 8vh;
  bottom: 8vh;
  width: 44px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.rail-line, .rail-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

.rail-line {
  background: repeating-linear-gradient(to bottom, rgba(143,164,166,.55) 0 9px, transparent 9px 17px);
}

.rail-progress {
  bottom: auto;
  height: 0;
  background: linear-gradient(var(--teal), var(--gold));
  box-shadow: 0 0 12px rgba(76,199,190,.55);
}

.rail-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(6,59,58,.35);
  background: rgba(247,251,248,.72);
  color: var(--deep);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform .4s ease, border-color .4s ease, background .4s ease;
}

.rail-dot span { font-family: var(--mono); font-size: 9px; }
.rail-dot.active { transform: scale(1.22); border-color: var(--gold); background: var(--porcelain); }

.suite { width: 100%; }
.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 8vh 8vw 8vh 11vw;
  isolation: isolate;
}

.chamber::before {
  content: attr(data-title);
  position: absolute;
  right: 4vw;
  bottom: 4vh;
  font-family: var(--mono);
  color: rgba(143,164,166,.35);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: 11px;
}

.intro {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 52% 45%, rgba(76,199,190,.16), transparent 34%),
    linear-gradient(135deg, var(--porcelain), #ffffff 48%, var(--pearl));
}

.opening-mask {
  width: min(68vw, 620px);
  height: min(68vw, 620px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: radial-gradient(circle, rgba(247,251,248,.96) 0 45%, rgba(76,199,190,.14) 46% 61%, rgba(6,59,58,.88) 62% 64%, transparent 65%);
  filter: blur(10px);
  opacity: .35;
  animation: firstFocus 2.4s cubic-bezier(.2,.8,.18,1) forwards;
}

.opening-mask h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(64px, 12vw, 156px);
  margin: 0;
  color: var(--deep);
  letter-spacing: -.05em;
}

.opening-mask p {
  position: absolute;
  bottom: 27%;
  font-family: var(--mono);
  letter-spacing: .33em;
  text-transform: uppercase;
  color: var(--chrome);
  font-size: 11px;
}

.lens-rings, .lens-rings::before, .lens-rings::after {
  position: absolute;
  content: "";
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(6,59,58,.18);
}
.lens-rings::before { inset: 13%; border-style: dashed; }
.lens-rings::after { inset: 24%; border-color: rgba(216,180,95,.45); }
.gold-flare, .final-glint {
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  right: 24%; top: 30%;
  box-shadow: 0 0 25px var(--gold);
}
.opening-instruction { position: absolute; bottom: 9vh; color: var(--chrome); letter-spacing: .2em; }
.mono { font-family: var(--mono); }

.vertical-label {
  position: absolute;
  top: 10vh;
  left: 7.2vw;
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--chrome);
  border-right: 1px solid rgba(143,164,166,.4);
  padding-right: 10px;
  z-index: 4;
}

.caption-slip {
  position: absolute;
  max-width: 430px;
  padding: 28px 30px;
  background: rgba(247,251,248,.72);
  border: 1px solid rgba(143,164,166,.32);
  box-shadow: 0 24px 70px rgba(6,59,58,.12);
  backdrop-filter: blur(14px);
  z-index: 5;
}
.caption-slip h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(42px, 7vw, 86px); line-height: .9; margin: 10px 0 18px; color: var(--deep); }
.caption-slip p { line-height: 1.8; color: rgba(7,21,20,.78); }
.caption-slip span { color: var(--chrome); font-size: 11px; letter-spacing: .16em; }
.slip-left { left: 13vw; top: 18vh; }
.slip-right { right: 9vw; top: 20vh; }
.dark-slip { background: rgba(7,21,20,.42); border-color: rgba(76,199,190,.36); }
.dark-slip h2, .dark-slip p { color: var(--porcelain); }
.glass-slip { background: rgba(233,226,216,.55); }

.veils { background: linear-gradient(90deg, var(--porcelain), #fff, var(--pearl)); }
.veil-grid {
  position: absolute;
  inset: 0 0 0 9vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  opacity: .72;
}
.veil-grid span {
  border-left: 1px solid rgba(76,199,190,.22);
  background: linear-gradient(90deg, rgba(247,251,248,.1), rgba(233,226,216,.46), rgba(247,251,248,.12));
  animation: veilDrift 9s ease-in-out infinite alternate;
}
.veil-grid span:nth-child(2) { animation-delay: -2s; }
.veil-grid span:nth-child(3) { animation-delay: -4s; }
.eye-chart {
  position: absolute;
  right: 12vw;
  top: 16vh;
  width: 330px;
  height: 460px;
  display: grid;
  place-items: center;
  color: var(--deep);
  font-family: var(--serif);
  font-size: 96px;
  line-height: .72;
  background: radial-gradient(circle at center, rgba(76,199,190,.09), transparent 62%);
  clip-path: circle(48% at 50% 50%);
}
.eye-chart b { display: block; filter: blur(var(--blur, 2px)); transition: filter .4s ease, transform .4s ease; }
.eye-chart small { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--chrome); text-transform: uppercase; }
.brackets { position: absolute; width: 180px; height: 112px; right: 19vw; bottom: 18vh; }
.brackets i { position: absolute; width: 32px; height: 32px; border-color: var(--teal); }
.brackets i:nth-child(1) { left: 0; top: 0; border-left: 2px solid; border-top: 2px solid; }
.brackets i:nth-child(2) { right: 0; top: 0; border-right: 2px solid; border-top: 2px solid; }
.brackets i:nth-child(3) { left: 0; bottom: 0; border-left: 2px solid; border-bottom: 2px solid; }
.brackets i:nth-child(4) { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; }

.aperture { background: radial-gradient(circle at 38% 48%, rgba(76,199,190,.18), transparent 34%), var(--ink); color: var(--porcelain); }
.aperture-device {
  position: absolute;
  left: 12vw; top: 10vh;
  width: min(64vw, 660px); height: min(64vw, 660px);
  border-radius: 50%;
  border: 1px solid rgba(76,199,190,.35);
  background: radial-gradient(circle, transparent 0 28%, rgba(6,59,58,.6) 29% 42%, rgba(247,251,248,.06) 43%);
  overflow: hidden;
  box-shadow: inset 0 0 70px rgba(76,199,190,.17), 0 0 80px rgba(6,59,58,.7);
}
.blade {
  position: absolute; left: 50%; top: 50%;
  width: 55%; height: 42%;
  background: linear-gradient(135deg, rgba(143,164,166,.9), rgba(6,59,58,.96));
  transform-origin: 0 0;
  clip-path: polygon(0 0, 100% 20%, 78% 100%, 0 72%);
  opacity: .86;
}
.b1 { transform: rotate(0deg) translate(0, -4%); }
.b2 { transform: rotate(60deg) translate(0, -4%); }
.b3 { transform: rotate(120deg) translate(0, -4%); }
.b4 { transform: rotate(180deg) translate(0, -4%); }
.b5 { transform: rotate(240deg) translate(0, -4%); }
.b6 { transform: rotate(300deg) translate(0, -4%); }
.inner-eye { position: absolute; inset: 36%; border-radius: 50%; background: var(--porcelain); color: var(--deep); display: grid; place-items: center; font-family: var(--mono); letter-spacing: .4em; font-size: 12px; }
.chrome-arm { position: absolute; right: 0; bottom: 12vh; width: 38vw; height: 1px; background: var(--chrome); box-shadow: 0 -12px 0 rgba(143,164,166,.25), -40px 26px 0 rgba(143,164,166,.18); }

.prism { background: linear-gradient(135deg, var(--porcelain) 0 48%, var(--deep) 48.2% 100%); }
.prism-split { position: absolute; inset: 15vh 8vw 18vh 15vw; transform: skewY(-8deg); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.prism-panel { display: grid; place-items: center; font-family: var(--serif); font-size: clamp(28px, 5vw, 70px); line-height: .9; padding: 4vw; color: var(--ink); mix-blend-mode: multiply; clip-path: polygon(10% 0, 100% 12%, 88% 100%, 0 82%); transition: transform .7s ease, filter .7s ease; }
.prism-panel.teal { background: rgba(76,199,190,.48); }
.prism-panel.blush { background: rgba(245,167,184,.45); transform: translateY(32px); }
.prism-panel.pearl { background: rgba(233,226,216,.82); transform: translateY(-28px); }
.shards span { position: absolute; width: 90px; height: 140px; background: linear-gradient(135deg, rgba(76,199,190,.24), rgba(245,167,184,.18)); clip-path: polygon(50% 0, 100% 100%, 0 70%); }
.shards span:nth-child(1) { right: 12vw; top: 9vh; }
.shards span:nth-child(2) { left: 19vw; bottom: 12vh; transform: rotate(55deg); }
.shards span:nth-child(3) { right: 31vw; bottom: 19vh; transform: rotate(-25deg); }
.shards span:nth-child(4) { left: 42vw; top: 17vh; transform: rotate(115deg); }

.certificate { background: radial-gradient(circle at 70% 40%, rgba(245,167,184,.17), transparent 34%), var(--porcelain); }
.tray {
  position: absolute; left: 12vw; bottom: 11vh;
  width: 62vw; height: 54vh;
  border: 1px solid rgba(143,164,166,.55);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(247,251,248,.65), rgba(76,199,190,.16));
  box-shadow: inset 0 0 60px rgba(76,199,190,.20), 0 22px 70px rgba(6,59,58,.12);
}
.waterline { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(76,199,190,.65); box-shadow: 0 0 30px rgba(76,199,190,.5); animation: water 5s ease-in-out infinite; }
.paper { position: absolute; width: 240px; height: 150px; background: rgba(233,226,216,.9); border: 1px solid rgba(143,164,166,.45); padding: 20px; font-family: var(--mono); font-size: 11px; color: var(--deep); }
.p1 { left: 12%; top: 19%; transform: rotate(-8deg); }
.p2 { right: 16%; bottom: 17%; transform: rotate(6deg); }
.stamp { font-family: var(--serif); font-size: 52px; color: var(--blush); }
.seal { display: block; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: inset 0 0 0 9px rgba(216,180,95,.16); }
.thread { position: absolute; left: 22%; right: 20%; top: 54%; height: 2px; background: var(--blush); transform: rotate(-4deg); opacity: .78; }
.droplet { position: absolute; width: 14px; height: 18px; border-radius: 50% 50% 60% 40%; background: rgba(76,199,190,.45); }
.d1 { left: 46%; top: 28%; }.d2 { right: 24%; top: 43%; }.d3 { left: 31%; bottom: 18%; }

.clear { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at center, #ffffff, var(--porcelain) 40%, var(--pearl)); }
.final-frame { position: relative; width: min(72vw, 920px); height: min(58vh, 520px); display: grid; place-items: center; text-align: center; background: rgba(247,251,248,.46); }
.final-frame h2 { font-family: var(--serif); font-size: clamp(58px, 9vw, 124px); font-weight: 500; line-height: .86; color: var(--deep); margin: 0; }
.hidden-vow { position: absolute; bottom: 31%; font-family: var(--sans-jp); color: rgba(7,21,20,.45); filter: blur(4px); transition: filter .7s ease, color .7s ease; }
.final-frame:hover .hidden-vow, .hidden-vow.sharp { filter: blur(0); color: var(--ink); }
.final-frame > .mono { position: absolute; bottom: 18%; color: var(--chrome); letter-spacing: .2em; font-size: 11px; }
.frame-corners i { position: absolute; width: 72px; height: 72px; border-color: var(--teal); }
.frame-corners i:nth-child(1) { left: 0; top: 0; border-left: 2px solid; border-top: 2px solid; }
.frame-corners i:nth-child(2) { right: 0; top: 0; border-right: 2px solid; border-top: 2px solid; }
.frame-corners i:nth-child(3) { left: 0; bottom: 0; border-left: 2px solid; border-bottom: 2px solid; }
.frame-corners i:nth-child(4) { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; }
.final-glint { right: 18vw; top: 27vh; }

.in-view .brackets { animation: tighten 1.8s ease-in-out infinite alternate; }
.in-view .prism-panel { filter: saturate(1.35) blur(0); }

@keyframes firstFocus { to { opacity: 1; filter: blur(0); transform: scale(1.02); } }
@keyframes veilDrift { from { transform: translateX(-2vw); } to { transform: translateX(3vw); } }
@keyframes tighten { from { transform: scale(1.2); opacity: .45; } to { transform: scale(.78); opacity: 1; } }
@keyframes water { 0%,100% { transform: translateY(-8px); } 50% { transform: translateY(9px); } }

@media (max-width: 760px) {
  .focus-rail { left: 10px; }
  .chamber { padding-left: 64px; padding-right: 24px; }
  .caption-slip { position: relative; left: auto; right: auto; top: 12vh; max-width: none; }
  .eye-chart, .aperture-device, .tray, .prism-split { opacity: .55; transform: scale(.78); transform-origin: center; }
  .eye-chart { right: -50px; }
  .aperture-device { left: 18vw; }
  .prism-split { inset: 28vh 2vw 10vh 18vw; }
  .tray { left: 18vw; width: 74vw; }
}