:root {
  /* compliance tokens: KR** Interactions should feel like touching cool glass: slightly 3** */
  --violet-dusk: #7B6DE8;
  --aurora-green: #7FD8A6;
  --smoked-amber: #8A3E1F;
  --charcoal-night: #101217;
  --ember-clay: #C65A24;
  --frosted-rice: #F2E9DC;
  --soft-ink: #252A2E;
  --display: "Alegreya Sans", "Trebuchet MS", sans-serif;
  --body: "Source Sans 3", "Segoe UI", sans-serif;
  --accent: "IBM Plex Sans KR", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  background: var(--charcoal-night);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: rgba(242, 233, 220, 0.86);
  font-family: var(--body);
  background:
    radial-gradient(circle at 20% 105%, rgba(198, 90, 36, 0.24), transparent 34vw),
    radial-gradient(circle at 76% 8%, rgba(123, 109, 232, 0.18), transparent 32vw),
    linear-gradient(160deg, #101217 0%, #14161b 48%, #0c0e12 100%);
}

#breath-map {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.58;
  mix-blend-mode: screen;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(242,233,220,0.18) 0 1px, transparent 1.2px),
    radial-gradient(circle at 80% 10%, rgba(242,233,220,0.12) 0 1px, transparent 1.3px),
    linear-gradient(90deg, rgba(255,255,255,0.025), rgba(0,0,0,0.035));
  background-size: 19px 23px, 31px 29px, 100% 100%;
}

.aurora, .moon-lens {
  position: fixed;
  pointer-events: none;
  z-index: 1;
}

.aurora-one {
  width: 72vw;
  height: 24vh;
  left: 12vw;
  top: 13vh;
  background: linear-gradient(90deg, transparent, rgba(127, 216, 166, 0.34), rgba(123, 109, 232, 0.22), transparent);
  filter: blur(42px);
  transform: rotate(-8deg);
  animation: auroraBreath 18s ease-in-out infinite alternate;
}

.aurora-two {
  width: 52vw;
  height: 20vh;
  right: -8vw;
  bottom: 18vh;
  background: linear-gradient(90deg, transparent, rgba(198, 90, 36, 0.16), rgba(127, 216, 166, 0.2), transparent);
  filter: blur(55px);
  transform: rotate(16deg);
  animation: auroraBreath 22s ease-in-out infinite alternate-reverse;
}

.moon-lens {
  width: clamp(220px, 32vw, 520px);
  height: clamp(220px, 32vw, 520px);
  left: 58vw;
  top: 42vh;
  border-radius: 48% 52% 45% 55%;
  border: 1px solid rgba(242, 233, 220, 0.17);
  background:
    radial-gradient(circle at 35% 30%, rgba(242, 233, 220, 0.16), transparent 28%),
    radial-gradient(circle at 65% 70%, rgba(198, 90, 36, 0.12), transparent 36%),
    rgba(242, 233, 220, 0.035);
  box-shadow: inset 0 0 60px rgba(242,233,220,0.08), 0 0 90px rgba(123,109,232,0.13);
  backdrop-filter: blur(12px);
  transition: transform 1.4s ease, opacity 1.4s ease;
}

.experience { position: relative; z-index: 2; }

.scene {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  padding: clamp(36px, 6vw, 86px);
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: var(--scene-opacity, 0.72);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(242,233,220,0.055), transparent 24vw);
  transition: opacity 0.8s ease;
}

.glass-pane {
  position: absolute;
  border: 1px solid rgba(242, 233, 220, 0.2);
  border-radius: 32px 26px 38px 22px;
  background:
    linear-gradient(135deg, rgba(242, 233, 220, 0.18), rgba(242, 233, 220, 0.045)),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.18), transparent 22%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 28px 90px rgba(0,0,0,0.28);
  backdrop-filter: blur(22px) saturate(126%);
  transform: translate3d(var(--pane-x, 0), 0, 0);
  transition: transform 1.25s cubic-bezier(.19,1,.22,1), background 0.8s ease, border-color 0.8s ease;
}

.glass-pane:hover {
  background:
    linear-gradient(135deg, rgba(242, 233, 220, 0.26), rgba(242, 233, 220, 0.075)),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.24), transparent 24%);
  border-color: rgba(242, 233, 220, 0.32);
}

.primary-pane {
  width: min(34vw, 430px);
  min-width: 260px;
  height: 78vh;
  left: 11vw;
  top: 9vh;
  animation: slidePaneIn 2.2s cubic-bezier(.19,1,.22,1) both;
}

.rear-pane { width: 46vw; height: 42vh; right: 11vw; bottom: 11vh; opacity: 0.42; }
.wide-pane { width: 58vw; height: 54vh; left: 24vw; top: 20vh; border-radius: 44px 30px 56px 34px; }
.narrow-pane { width: 19vw; height: 72vh; left: 9vw; top: 14vh; opacity: 0.72; }
.tall-slat { width: 24vw; height: 84vh; right: 15vw; top: 8vh; }
.soft-square { width: 36vw; height: 38vh; left: 13vw; bottom: 16vh; opacity: 0.55; }
.closing-pane { width: 48vw; height: 70vh; right: 8vw; top: 12vh; }

.scratch, .droplet { position: absolute; display: block; pointer-events: none; }
.scratch { width: 1px; height: 38%; background: linear-gradient(transparent, rgba(242,233,220,0.22), transparent); }
.scratch-a { left: 26%; top: 14%; transform: rotate(5deg); }
.scratch-b { right: 31%; top: 40%; height: 25%; transform: rotate(-8deg); }
.droplet { width: 5px; height: 8px; border-radius: 50%; background: rgba(242,233,220,0.26); box-shadow: 0 14px 18px rgba(242,233,220,0.08); }
.droplet-a { left: 58%; top: 22%; }
.droplet-b { left: 38%; bottom: 19%; }

.domain-title {
  position: absolute;
  left: 8vw;
  bottom: 16vh;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.2rem, 13vw, 12rem);
  font-weight: 300;
  line-height: 0.84;
  letter-spacing: 0.035em;
  color: rgba(242, 233, 220, 0.87);
  text-shadow: 0 0 32px rgba(198, 90, 36, 0.16);
  filter: blur(10px);
  opacity: 0.3;
  animation: titleClear 3.8s 0.7s ease both;
}

h2 {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: 28vh 0 0 8vw;
  font-family: var(--display);
  font-size: clamp(3.1rem, 7vw, 7.8rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: 0.025em;
  color: rgba(242, 233, 220, 0.88);
}

.scene-copy, .scene-note {
  position: relative;
  z-index: 3;
  width: min(430px, 72vw);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.75;
  font-weight: 300;
  letter-spacing: 0.035em;
  color: rgba(242, 233, 220, 0.72);
}

.scene-copy { margin: 2rem 0 0 13vw; }
.low-note { position: absolute; right: 12vw; bottom: 10vh; }

.micro {
  position: absolute;
  z-index: 4;
  margin: 0;
  font-family: var(--accent);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: rgba(127, 216, 166, 0.62);
}

.high-right { right: 9vw; top: 13vh; }
.left-mark { left: 8vw; top: 12vh; color: rgba(198, 90, 36, 0.72); }

.horizon {
  position: absolute;
  left: 8vw;
  right: 10vw;
  top: 56vh;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,233,220,0.2), rgba(198,90,36,0.26), transparent);
}

.ember-line { top: 68vh; background: linear-gradient(90deg, transparent, #8A3E1F, #C65A24, transparent); opacity: 0.48; }

.ember-seed {
  position: absolute;
  z-index: 5;
  background: #C65A24;
  box-shadow: 0 0 26px rgba(198, 90, 36, 0.74), 0 0 70px rgba(138, 62, 31, 0.55);
}

.ember-vertical { width: 8px; height: 72px; left: 48vw; bottom: 18vh; border-radius: 999px; }
.ember-orb { width: 28px; height: 28px; left: 70vw; bottom: 30vh; border-radius: 50%; }
.ember-dot { width: 12px; height: 12px; right: 31vw; top: 32vh; border-radius: 50%; }
.ember-final { width: 7px; height: 52px; left: 22vw; top: 45vh; border-radius: 999px; }

.orange-sun {
  position: absolute;
  width: 42vw;
  height: 42vw;
  left: 44vw;
  bottom: -28vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,90,36,0.72), rgba(138,62,31,0.34) 37%, transparent 69%);
  filter: blur(8px);
}

.ribbon, .after-ribbon {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  filter: blur(26px);
  mix-blend-mode: screen;
}

.ribbon-green { width: 72vw; height: 18vh; left: -8vw; top: 28vh; background: rgba(127,216,166,0.27); transform: rotate(-14deg); }
.ribbon-violet { width: 56vw; height: 16vh; right: -4vw; top: 42vh; background: rgba(123,109,232,0.24); transform: rotate(11deg); }
.after-ribbon { width: 78vw; height: 22vh; right: -34vw; top: 20vh; background: linear-gradient(90deg, rgba(123,109,232,0.22), rgba(127,216,166,0.12), transparent); transform: rotate(-18deg); }

.brush-fragment {
  position: absolute;
  left: 63vw;
  bottom: 18vh;
  font-family: var(--accent);
  font-size: clamp(5rem, 12vw, 13rem);
  font-weight: 100;
  color: rgba(242,233,220,0.055);
  transform: rotate(-10deg);
}

.final-domain {
  position: absolute;
  left: 9vw;
  bottom: 18vh;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2vw, 2rem);
  letter-spacing: 0.24em;
  color: #C65A24;
}

.quiet-link {
  position: absolute;
  left: 9vw;
  bottom: 12vh;
  color: rgba(242,233,220,0.72);
  text-decoration: none;
  font-family: var(--body);
  letter-spacing: 0.18em;
  font-size: 0.9rem;
  transition: color 0.8s ease, letter-spacing 0.8s ease;
}

.quiet-link:hover { color: #7FD8A6; letter-spacing: 0.24em; }

.bead-nav {
  position: fixed;
  right: 28px;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bead {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(242, 233, 220, 0.25);
  box-shadow: 0 0 18px rgba(242,233,220,0.12);
  cursor: pointer;
  transition: transform 0.6s ease, background 0.6s ease, box-shadow 0.6s ease;
}

.bead.active {
  transform: scale(1.55);
  background: #C65A24;
  box-shadow: 0 0 22px rgba(198,90,36,0.78);
}

.scene > h2, .scene-copy, .micro, .final-domain, .quiet-link {
  opacity: 0;
  transform: translateX(-42px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.19,1,.22,1);
}

.scene.active > h2, .scene.active .scene-copy, .scene.active .micro, .scene.active .final-domain, .scene.active .quiet-link {
  opacity: 1;
  transform: translateX(0);
}

@keyframes slidePaneIn {
  from { transform: translate3d(-46vw, 0, 0); opacity: 0; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes titleClear {
  0% { filter: blur(16px); opacity: 0.18; transform: translateX(-18px); }
  55% { filter: blur(7px); opacity: 0.5; }
  100% { filter: blur(0); opacity: 1; transform: translateX(0); }
}

@keyframes auroraBreath {
  from { transform: translate3d(-10px, -4px, 0) rotate(-8deg) scale(1); }
  to { transform: translate3d(14px, 8px, 0) rotate(-5deg) scale(1.04); }
}

@media (max-width: 760px) {
  .scene { padding: 28px; }
  .primary-pane { left: 6vw; width: 56vw; min-width: 210px; height: 70vh; }
  .domain-title { left: 7vw; bottom: 21vh; font-size: clamp(3.4rem, 18vw, 7rem); }
  h2 { margin-left: 0; margin-top: 31vh; max-width: 88vw; }
  .scene-copy { margin-left: 0; width: 80vw; }
  .low-note { right: auto; left: 8vw; bottom: 7vh; }
  .bead-nav { right: 16px; }
  .moon-lens { left: 42vw; }
  .wide-pane, .closing-pane { width: 75vw; left: 18vw; right: auto; }
  .narrow-pane, .tall-slat { width: 32vw; }
}