.lake-section{position:relative;padding:120px 0 0;background:#0a1020;color:white;overflow:hidden}.lake-heading{position:relative;z-index:5;padding:0 6vw 70px}.lake-heading h2{margin:65px 0 0;font:400 clamp(52px,8vw,112px)/.98 var(--serif);letter-spacing:-.055em}.lake-heading h2 i{font-weight:400;color:#b8b5d2}.thought-lake{position:relative;height:min(850px,82vw);min-height:650px;overflow:hidden;background:linear-gradient(180deg,#111a36 0%,#3e4769 44%,#151e3b 45%,#080f23 100%);isolation:isolate}.lake-sky{position:absolute;inset:0 0 55%;overflow:hidden;background:radial-gradient(circle at 74% 35%,rgba(172,168,210,.22),transparent 21%),linear-gradient(180deg,#0b122a,#424867)}.lake-moon{position:absolute;right:16%;top:12%;width:clamp(70px,10vw,135px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 36%,#f4f0ec,#c6c6d9 57%,#8b91ad);box-shadow:0 0 50px rgba(226,220,234,.38),0 0 140px rgba(167,163,202,.18)}.lake-moon:before,.lake-moon:after{content:"";position:absolute;border-radius:50%;background:rgba(116,119,149,.14)}.lake-moon:before{width:23%;height:18%;left:23%;top:31%}.lake-moon:after{width:14%;height:12%;right:24%;top:55%}.star{position:absolute;width:2px;height:2px;background:white;border-radius:50%;box-shadow:0 0 8px white;animation:twinkle 3s ease-in-out infinite}.s1{left:12%;top:20%}.s2{left:37%;top:12%;animation-delay:.7s}.s3{left:57%;top:31%;animation-delay:1.3s}.s4{right:8%;top:19%;animation-delay:2s}.lake-cloud{position:absolute;width:36%;height:34%;border-radius:50%;filter:blur(26px);opacity:.12;background:#d8d9e9;animation:cloudDrift 18s ease-in-out infinite alternate}.c1{left:-6%;top:34%}.c2{right:8%;top:48%;animation-delay:-8s}.lake-mountains{position:absolute;left:-5%;right:-5%;bottom:-1px;height:52%;clip-path:polygon(0 100%,0 80%,9% 52%,16% 73%,28% 16%,38% 69%,49% 36%,58% 76%,70% 22%,82% 67%,91% 39%,100% 76%,100% 100%)}.m-back{background:#535b78;opacity:.75;transform:translateY(-12px) scaleX(1.05)}.m-front{background:linear-gradient(180deg,#343d5d,#151e39);clip-path:polygon(0 100%,0 84%,13% 54%,21% 76%,35% 30%,46% 74%,60% 47%,72% 81%,84% 50%,100% 82%,100% 100%)}.lake-water{position:absolute;inset:45% 0 0;overflow:hidden;background:radial-gradient(ellipse at 73% 0,rgba(199,198,222,.18),transparent 35%),linear-gradient(180deg,#182442,#0a1229 70%,#070d1e)}.lake-water:before{content:"";position:absolute;left:-5%;right:-5%;top:0;height:42%;opacity:.18;background:linear-gradient(0deg,#1d2b4d,#7e8098);clip-path:polygon(0 0,0 15%,13% 46%,21% 22%,35% 69%,46% 24%,60% 53%,72% 19%,84% 50%,100% 18%,100% 0);filter:blur(2px)}.moon-path{position:absolute;left:64%;top:0;width:20%;height:90%;background:linear-gradient(180deg,rgba(224,220,231,.28),transparent);clip-path:polygon(38% 0,61% 0,100% 100%,0 100%);filter:blur(7px);animation:moonShimmer 5s ease-in-out infinite}.water-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(203,209,229,.35),transparent);animation:waterMove 6s ease-in-out infinite}.w1{top:23%;left:8%;width:38%}.w2{top:45%;right:5%;width:48%;animation-delay:-2s}.w3{top:69%;left:21%;width:54%;animation-delay:-4s}.lake-ripple{position:absolute;width:20px;height:10px;border:1px solid rgba(225,224,240,.7);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.2);pointer-events:none}.lake-ripple.is-active{animation:rippleExpand .75s var(--ease)}.thought-reflections{position:absolute;inset:48% 5% 5%;z-index:4}.reflection{position:absolute;width:20%;min-width:150px;padding:0;border:0;background:none;color:white;text-align:center;cursor:pointer;filter:drop-shadow(0 5px 16px rgba(0,0,0,.25));transition:.5s var(--ease)}.reflection small{display:block;margin-bottom:12px;font:8px var(--mono);letter-spacing:.16em;color:rgba(255,255,255,.38)}.reflection strong{display:block;font:400 clamp(20px,2.7vw,37px)/1.08 var(--serif);letter-spacing:-.03em}.reflection>span{display:block;margin-top:14px;font:400 clamp(20px,2.7vw,37px)/1.08 var(--serif);letter-spacing:-.03em;transform:scaleY(-1);opacity:.1;filter:blur(1.5px);mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 82%)}.reflection:hover{transform:translateY(-8px);color:#e4e0f2}.reflection:hover>span{opacity:.22}.r1{left:2%;top:4%}.r2{left:27%;top:27%}.r3{left:53%;top:9%}.r4{right:1%;top:34%}.lake-figure{position:absolute;z-index:3;left:48%;top:40%;width:22px;height:60px}.lake-figure:before{content:"";position:absolute;left:7px;width:9px;height:9px;border-radius:50%;background:#101529;box-shadow:0 0 18px rgba(208,202,223,.34)}.lake-figure:after{content:"";position:absolute;left:4px;top:8px;width:15px;height:34px;background:#101529;clip-path:polygon(50% 0,80% 30%,100% 100%,0 100%,20% 30%)}.lake-figure i{position:absolute;left:10px;top:40px;width:1px;height:32px;background:linear-gradient(#101529,transparent);transform:scaleY(-1);opacity:.3}
@keyframes twinkle{50%{opacity:.2;transform:scale(.6)}}@keyframes cloudDrift{to{transform:translateX(55px)}}@keyframes waterMove{50%{transform:translateX(35px) scaleX(.75);opacity:.4}}@keyframes moonShimmer{50%{transform:scaleX(.82);opacity:.6}}@keyframes rippleExpand{0%{opacity:.85;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(18)}}
/* Dream illustrations inside the detail dialog */
.dialog-visual[data-scene]{background:linear-gradient(180deg,#111a35,#38415f 48%,#0b142b 49%,#060c1d)!important}.dialog-visual[data-scene] span{font-size:0}.dialog-visual[data-scene] span:after{content:"";position:absolute;left:50%;top:46%;width:12px;height:34px;background:#11162a;clip-path:polygon(50% 0,80% 30%,100% 100%,0 100%,20% 30%)}.dialog-visual[data-scene]:before{width:110px;height:110px;left:15%;top:12%;border:0;background:#d9d5e2;box-shadow:0 0 65px rgba(221,214,231,.32)}.dialog-visual[data-scene]:after{inset:auto;left:0;right:0;top:49%;width:auto;height:51%;border:0;border-radius:0;background:radial-gradient(ellipse at 27% 0,rgba(220,216,235,.18),transparent 32%),repeating-linear-gradient(180deg,transparent 0 38px,rgba(211,214,233,.07) 39px 40px)}.dialog-visual[data-scene="terrain"]{background:linear-gradient(135deg,#19233f,#69708c 47%,#101a34 48%,#070e20)!important}.dialog-visual[data-scene="system"]{background:radial-gradient(circle at 62% 30%,rgba(199,197,225,.35),transparent 18%),linear-gradient(180deg,#111731,#4d5372 48%,#0a142d 49%)!important}.dialog-visual[data-scene="system"] i{width:58%;height:44%;border:1px solid rgba(229,226,242,.28);background:repeating-linear-gradient(90deg,transparent 0 45px,rgba(255,255,255,.14) 46px 47px),repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.11) 39px 40px);transform:rotate(-7deg);box-shadow:0 0 70px rgba(189,185,220,.18)}.dialog-visual[data-scene="ai"]{background:radial-gradient(circle at 68% 35%,rgba(157,217,215,.27),transparent 22%),linear-gradient(180deg,#11172d,#505873 48%,#0b152e 49%)!important}.dialog-visual[data-scene="ai"] i{width:35%;height:35%;border-radius:50%;background:radial-gradient(circle,rgba(223,229,226,.72),rgba(137,184,189,.13) 45%,transparent 70%);transform:none;animation:twinkle 4s infinite}.dialog-visual[data-scene="detail"]{background:radial-gradient(circle at 38% 34%,rgba(226,194,211,.35),transparent 20%),linear-gradient(180deg,#16172f,#555574 48%,#0a142d 49%)!important}.dialog-visual[data-scene="detail"] i{width:70%;height:35%;top:58%;background:radial-gradient(ellipse at 15% 40%,#d5c0d0 0 3%,transparent 4%),radial-gradient(ellipse at 36% 55%,#c6d1d8 0 4%,transparent 5%),radial-gradient(ellipse at 62% 28%,#d9ccd8 0 4%,transparent 5%),radial-gradient(ellipse at 82% 62%,#bbcbd3 0 3%,transparent 4%);transform:none}
@media(max-width:760px){.lake-section{padding-top:90px}.lake-heading{padding-bottom:50px}.thought-lake{height:820px}.reflection{width:42%;min-width:0}.r1{left:4%;top:4%}.r2{left:auto;right:3%;top:23%}.r3{left:4%;top:48%}.r4{right:3%;top:68%}.lake-moon{right:10%}.lake-figure{left:48%;top:42%}}
@media(prefers-reduced-motion:reduce){.thought-lake *{animation:none!important}.reflection{transition:none}}
.dialog-visual[data-scene] span{position:absolute;left:50%;top:42%;z-index:2;width:18px;height:48px;background:#11162a;clip-path:polygon(50% 0,72% 18%,100% 100%,0 100%,28% 18%)}.dialog-visual[data-scene] span:after{display:none}.dialog-visual[data-scene] i{z-index:1}.dialog-visual[data-scene]:after{z-index:0}

/* Thoughts behave like floating game objects before becoming a truth mirror. */
.reflection {
  transition: color .35s ease, filter .35s ease, opacity .45s var(--ease), translate .4s var(--ease);
}

.reflection > strong,
.reflection > .reflection-copy {
  animation: thought-float 5.8s ease-in-out infinite;
}

.reflection.r2 > strong,
.reflection.r2 > .reflection-copy { animation-delay: -1.7s; }
.reflection.r3 > strong,
.reflection.r3 > .reflection-copy { animation-delay: -3.1s; }
.reflection.r4 > strong,
.reflection.r4 > .reflection-copy { animation-delay: -4.4s; }

.reflection > .reflection-copy {
  display: block;
  margin-top: 14px;
  font: 400 clamp(20px,2.7vw,37px)/1.08 var(--serif);
  letter-spacing: -.03em;
  opacity: .1;
  filter: blur(1.5px);
  transform: scaleY(-1);
  mask-image: linear-gradient(to bottom,rgba(0,0,0,.8),transparent 82%);
}

.reflection:hover,
.reflection:focus-visible {
  z-index: 8;
  color: #5d557b;
  filter: drop-shadow(0 18px 28px rgba(54, 60, 93, .18));
  transform: none;
  translate: 0 -10px;
}

.reflection:hover > strong,
.reflection:hover > .reflection-copy,
.reflection:focus-visible > strong,
.reflection:focus-visible > .reflection-copy {
  animation-play-state: paused;
}

.reflection:hover > .reflection-copy,
.reflection:focus-visible > .reflection-copy {
  opacity: .2;
}

.reflection > .thought-bubble {
  position: absolute;
  z-index: 12;
  bottom: calc(100% + 22px);
  left: 50%;
  display: grid;
  gap: 9px;
  width: min(270px, 76vw);
  margin: 0;
  padding: 18px 20px 17px;
  color: #303650;
  border: 1px solid rgba(74, 80, 116, .16);
  border-radius: 24px 24px 24px 7px;
  background: rgba(248, 248, 252, .94);
  box-shadow: 0 24px 55px rgba(63, 70, 104, .18);
  opacity: 0;
  filter: none;
  transform: translate(-50%, 12px);
  mask-image: none;
  text-align: left;
  pointer-events: none;
  transition: opacity .28s ease, transform .42s var(--ease);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.reflection > .thought-bubble::after {
  position: absolute;
  bottom: -8px;
  left: 26px;
  width: 15px;
  height: 15px;
  content: "";
  border-right: 1px solid rgba(74, 80, 116, .12);
  border-bottom: 1px solid rgba(74, 80, 116, .12);
  background: rgba(248, 248, 252, .94);
  transform: rotate(45deg);
}

.reflection > .thought-bubble b,
.reflection > .thought-bubble em,
.reflection > .thought-bubble i {
  display: block;
  font-style: normal;
}

.reflection > .thought-bubble b {
  color: rgba(48, 54, 80, .46);
  font: 8px var(--mono);
  letter-spacing: .16em;
}

.reflection > .thought-bubble em {
  font: 400 14px/1.75 "Noto Sans SC";
}

.reflection > .thought-bubble i {
  color: #777091;
  font: 8px var(--mono);
  letter-spacing: .08em;
}

.reflection:hover > .thought-bubble,
.reflection:focus-visible > .thought-bubble {
  opacity: 1;
  transform: translate(-50%, 0);
}

.truth-mirror {
  position: absolute;
  z-index: 15;
  top: 69%;
  left: 50%;
  display: grid;
  place-content: center;
  width: min(760px, 78vw);
  min-height: 360px;
  padding: 54px 12%;
  overflow: hidden;
  color: #2d3450;
  border: 1px solid rgba(245, 247, 252, .9);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.98), transparent 24%),
    linear-gradient(145deg, rgba(242,245,250,.95), rgba(195,210,226,.88) 52%, rgba(230,224,240,.93));
  box-shadow:
    0 45px 90px rgba(55, 65, 99, .22),
    inset 0 0 0 12px rgba(255,255,255,.18),
    inset 0 -36px 80px rgba(91, 111, 143, .14);
  opacity: 0;
  transform: translate(-50%, -40%) scale(.2) rotateX(66deg);
  transform-origin: 50% 50%;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .38s ease, transform .82s cubic-bezier(.16,1,.3,1), visibility 0s .82s;
}

.truth-mirror::before,
.truth-mirror::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.truth-mirror::before {
  inset: 10px;
  border: 1px solid rgba(72, 82, 120, .16);
  border-radius: 50%;
}

.truth-mirror::after {
  top: -18%;
  left: -12%;
  width: 60%;
  height: 42%;
  border-radius: 50%;
  background: rgba(255,255,255,.58);
  filter: blur(24px);
  transform: rotate(-12deg);
}

.thought-lake.is-mirror-opening .lake-water,
.thought-lake.is-mirror-open .lake-water {
  filter: saturate(.74) brightness(1.08);
}

.thought-lake.is-mirror-open .truth-mirror {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotateX(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.thought-lake.is-mirror-open .thought-reflections .reflection {
  opacity: .07;
  filter: blur(8px);
  pointer-events: none;
}

.thought-lake.is-mirror-open .lake-figure {
  opacity: .18;
}

.truth-mirror > p:first-of-type,
.truth-mirror > span {
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(45, 52, 80, .44);
  font: 8px var(--mono);
  letter-spacing: .16em;
}

.truth-mirror > span {
  position: absolute;
  top: 34px;
  right: 12%;
}

.truth-mirror h3 {
  position: relative;
  z-index: 2;
  margin: 15px 0 12px;
  font: 400 clamp(29px, 3.5vw, 46px)/1.08 var(--serif);
  letter-spacing: -.035em;
}

.truth-mirror blockquote {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 0;
  font: 400 clamp(14px, 1.4vw, 18px)/1.8 "Noto Sans SC";
}

.truth-mirror > p[data-truth-mirror-detail] {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 12px 0 0;
  color: rgba(45, 52, 80, .58);
  font: 400 11px/1.75 "Noto Sans SC";
  letter-spacing: 0;
}

.truth-mirror-close,
.truth-mirror-expand {
  position: relative;
  z-index: 3;
  border: 0;
  color: #343a57;
  background: none;
  cursor: pointer;
}

.truth-mirror-close {
  position: absolute;
  top: 29px;
  left: 12%;
  width: 34px;
  height: 34px;
  font-size: 20px;
}

.truth-mirror-expand {
  justify-self: start;
  margin-top: 18px;
  padding: 9px 0 6px;
  border-bottom: 1px solid rgba(52, 58, 87, .28);
  font: 8px var(--mono);
  letter-spacing: .1em;
}

@keyframes thought-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@media(max-width:760px) {
  .truth-mirror {
    top: 60%;
    width: 92vw;
    min-height: 390px;
    padding: 56px 12vw 46px;
    border-radius: 46% 54% 50% 50%;
  }

  .truth-mirror > span {
    display: none;
  }

  .reflection > .thought-bubble {
    bottom: calc(100% + 14px);
  }
}

@media(prefers-reduced-motion:reduce) {
  .reflection > strong,
  .reflection > .reflection-copy {
    animation: none !important;
  }

  .truth-mirror {
    transition: none !important;
  }
}