:root {
  --tangerine: #F97316;
  --coral: #FB7185;
  --magenta: #EC4899;
  --plum: #9333EA;
  --peach: #FED7AA;
  --twilight: #3B0764;
  --fig: #1C0A00;
  --gold: #FBBF24;
  --bamboo: #4ADE80;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Compliance notes: pure #000 and #FFF are intentionally avoided as instructed. Interactive elements glow with Sunrise Gold (#FBBF24 on hover; IntersectionObserver triggers slide reveal with IntersectionObserver` (threshold: 0.15). */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--peach);
  font-family: "Nunito", sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.8;
  background: var(--twilight);
  overflow-x: hidden;
}

body::selection { background: var(--gold); color: var(--fig); }

.sunset-sky {
  position: fixed;
  inset: 0;
  z-index: -4;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(251, 191, 36, 0.52), transparent 23%),
    radial-gradient(circle at 82% 14%, rgba(251, 113, 133, 0.45), transparent 28%),
    linear-gradient(132deg, var(--tangerine), var(--coral) 32%, var(--magenta) 52%, var(--plum) 76%, var(--twilight));
  background-size: 160% 160%;
  animation: sunsetBreath 40s ease-in-out infinite alternate;
}

.sunset-sky::before,
.sunset-sky::after {
  content: "";
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(circle, rgba(254, 215, 170, 0.30) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(74, 222, 128, 0.16) 0 1px, transparent 2px);
  background-size: 120px 120px, 180px 180px;
  animation: particles 55s linear infinite;
}

.sunset-sky::after {
  opacity: 0.7;
  animation-duration: 72s;
  animation-direction: reverse;
  transform: rotate(11deg);
}

.mote {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(254, 215, 170, 0.38);
  box-shadow: 0 0 12px rgba(254, 215, 170, 0.5);
  animation: moteDrift 18s ease-in-out infinite alternate;
}

.mote-a { left: 12%; top: 18%; animation-delay: -2s; }
.mote-b { left: 28%; top: 72%; animation-delay: -8s; }
.mote-c { left: 44%; top: 38%; animation-delay: -5s; }
.mote-d { left: 62%; top: 16%; animation-delay: -11s; }
.mote-e { left: 78%; top: 64%; animation-delay: -3s; }
.mote-f { left: 88%; top: 30%; animation-delay: -13s; }
.mote-g { left: 6%; top: 84%; animation-delay: -7s; }
.mote-h { left: 52%; top: 88%; animation-delay: -15s; }

.depth-world {
  perspective: 900px;
  transform-style: preserve-3d;
  min-height: 100vh;
}

.depth-world::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  transform: translateZ(-200px) scale(2);
  background: radial-gradient(circle at center, transparent 0 42%, rgba(59, 7, 100, 0.34) 100%);
  will-change: transform;
}

.foreground-glyphs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  z-index: 5;
  mix-blend-mode: screen;
}

.drift {
  position: absolute;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 300;
  font-size: clamp(15rem, 25vw, 40rem);
  line-height: 1;
  color: transparent;
  background: linear-gradient(145deg, rgba(254, 215, 170, 0.08), rgba(249, 115, 22, 0.18), rgba(147, 51, 234, 0.14));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 30px rgba(251, 113, 133, 0.22);
  transform: translateZ(100px);
  animation: foregroundFloat 26s ease-in-out infinite alternate;
  will-change: transform;
}

.glyph-one { left: -8vw; top: 8vh; animation-delay: -4s; }
.glyph-two { right: -6vw; top: 48vh; animation-delay: -12s; }
.glyph-three { left: 54vw; top: 142vh; animation-delay: -8s; }
.glyph-four { left: -4vw; top: 250vh; animation-delay: -16s; }

.narrative { position: relative; z-index: 2; transform-style: preserve-3d; }

.depth-section {
  position: relative;
  min-height: 115vh;
  padding: 16vh 8vw;
  display: grid;
  align-items: center;
  gap: 6vh;
  transform-style: preserve-3d;
}

.opening { min-height: 125vh; grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1.2fr); }
.woven, .sound, .beauty, .future { grid-template-columns: repeat(2, minmax(280px, 1fr)); }

.panel {
  max-width: 680px;
  padding: clamp(1.5rem, 3vw, 3.2rem);
  border: 1px solid rgba(251, 113, 133, 0.45);
  border-radius: 38px;
  background: rgba(254, 215, 170, 0.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 90px rgba(59, 7, 100, 0.36), inset 0 0 45px rgba(254, 215, 170, 0.08);
  color: var(--peach);
  transform: translateZ(0) rotate(-1.5deg);
}

.panel:nth-child(even), .small-panel, .closing-panel { transform: translateZ(0) rotate(2deg); }
.hero-panel { background: rgba(254, 215, 170, 0.18); }
.small-panel { justify-self: end; grid-column: 2; padding: 2rem; }
.closing-panel { justify-self: end; }

.label {
  margin: 0 0 1rem;
  color: var(--gold);
  font-family: "Quicksand", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0 0 1rem;
  font-family: "Baloo 2", cursive;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--tangerine);
  text-shadow: 0 0 18px rgba(249, 115, 22, 0.42);
}

h1 { font-size: clamp(3rem, 8vw, 7rem); }
h2 { font-size: clamp(2.5rem, 6vw, 5rem); }
p { margin: 0; }
strong { color: var(--gold); font-weight: 600; }

.circuit-field, .future-vine {
  width: min(100%, 900px);
  min-height: 320px;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(251, 113, 133, 0.25));
}

.trace, .vine, .gold-line, .glyph-stroke, .branch {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trace {
  stroke: var(--coral);
  stroke-width: 5;
  filter: drop-shadow(0 0 8px rgba(251, 113, 133, 0.6));
}

.vine {
  stroke: var(--bamboo);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.45));
}

.gold-line { stroke: var(--gold); stroke-width: 4; filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5)); }
.node { fill: var(--gold); transform-box: fill-box; transform-origin: center; transform: scale(0); filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.72)); }
.leaf { fill: var(--bamboo); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0) rotate(-18deg); }
.specimen, .diagram-glyph {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 900;
  font-size: 58px;
  fill: var(--peach);
  filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.75));
  animation: glowPulse 3s ease-in-out infinite alternate;
}

.diagram-glyph { font-size: 42px; fill: var(--gold); }

.reveal {
  opacity: 0;
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
  will-change: transform, opacity;
}

.from-left { transform: translateX(-100px) rotate(-2deg); }
.from-right { transform: translateX(100px) rotate(2deg); }
.reveal.is-visible { opacity: 1; transform: translateX(0) rotate(var(--panel-tilt, -1.5deg)); }
.small-panel.reveal.is-visible, .closing-panel.reveal.is-visible { --panel-tilt: 2deg; }

.reveal-circuit .trace, .reveal-circuit .vine, .reveal-circuit .gold-line, .reveal-circuit .glyph-stroke, .reveal-circuit .branch {
  stroke-dasharray: var(--dash, 1000);
  stroke-dashoffset: var(--dash, 1000);
  transition: stroke-dashoffset 1500ms var(--ease);
}

.reveal-circuit .vine { transition-delay: 300ms; transition-duration: 1700ms; }
.reveal-circuit .branch { stroke: var(--coral); stroke-width: 3; filter: drop-shadow(0 0 8px rgba(251, 113, 133, 0.6)); transition-delay: 1200ms; }
.reveal-circuit.is-visible .trace,
.reveal-circuit.is-visible .vine,
.reveal-circuit.is-visible .gold-line,
.reveal-circuit.is-visible .glyph-stroke,
.reveal-circuit.is-visible .branch { stroke-dashoffset: 0; }
.reveal-circuit.is-visible .node { animation: nodePop 620ms var(--spring) 1200ms forwards; }
.reveal-circuit.is-visible .leaf { animation: leafPop 740ms var(--spring) 1450ms forwards; }

.transition-glyph {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  padding: 8vh 4vw;
  overflow: hidden;
}

.transition-glyph::before {
  content: attr(data-glyph);
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 900;
  font-size: clamp(15rem, 35vw, 36rem);
  line-height: 1;
  color: transparent;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.42), rgba(251, 113, 133, 0.32), rgba(147, 51, 234, 0.46));
  -webkit-background-clip: text;
  background-clip: text;
  filter: blur(1px);
  animation: glyphBreath 3s ease-in-out infinite alternate;
}

.transition-glyph p {
  position: relative;
  z-index: 2;
  max-width: 640px;
  text-align: center;
  font-family: "Baloo 2", cursive;
  font-size: clamp(1.8rem, 4vw, 3.8rem);
  line-height: 1.05;
  color: var(--peach);
  text-shadow: 0 0 20px rgba(59, 7, 100, 0.75);
}

.assembly { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.stroke-hangul { width: min(74vw, 760px); overflow: visible; }
.glyph-stroke { stroke: url(#none); stroke: var(--peach); stroke-width: 28; filter: drop-shadow(0 0 14px rgba(249, 115, 22, 0.7)); }

.syllable-lab {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  gap: 1rem;
  align-items: center;
  justify-self: center;
  padding: 2rem;
  border-radius: 34px;
  border: 1px solid rgba(74, 222, 128, 0.34);
  background: rgba(59, 7, 100, 0.22);
  backdrop-filter: blur(12px);
}

.syllable-lab span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 28px;
  font-family: "Noto Sans KR", sans-serif;
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 900;
  color: var(--peach);
  background: rgba(254, 215, 170, 0.11);
  box-shadow: inset 0 0 28px rgba(249, 115, 22, 0.15), 0 0 24px rgba(251, 113, 133, 0.18);
  animation: glowPulse 3s ease-in-out infinite alternate;
}

.syllable-lab .block { color: var(--gold); background: rgba(251, 113, 133, 0.18); }
.syllable-lab i { position: absolute; height: 3px; background: var(--coral); box-shadow: 0 0 8px rgba(251, 113, 133, 0.6); transform-origin: left center; }
.syllable-lab i:nth-of-type(1) { width: 18%; left: 23%; top: 50%; }
.syllable-lab i:nth-of-type(2) { width: 18%; left: 45%; top: 50%; }
.syllable-lab i:nth-of-type(3) { width: 18%; left: 67%; top: 50%; }

.diagram-card, .glyph-gallery {
  padding: clamp(1rem, 2.5vw, 2.5rem);
  border-radius: 40px;
  background: rgba(254, 215, 170, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.35);
  backdrop-filter: blur(12px);
}

.mouth-diagram { width: 100%; min-height: 300px; overflow: visible; }

.glyph-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.glyph-gallery span {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 700;
  font-size: clamp(3.6rem, 8vw, 8rem);
  color: var(--peach);
  text-shadow: 0 0 8px rgba(249, 115, 22, 0.55), 0 0 24px rgba(147, 51, 234, 0.28);
  animation: galleryFloat 4s ease-in-out infinite alternate;
}

.glyph-gallery span:nth-child(2) { color: var(--coral); animation-delay: -0.7s; }
.glyph-gallery span:nth-child(3) { color: var(--bamboo); animation-delay: -1.4s; }
.glyph-gallery span:nth-child(4) { color: var(--gold); animation-delay: -2.1s; }
.glyph-gallery span:nth-child(5) { color: var(--tangerine); animation-delay: -2.8s; }

.future-vine { grid-column: 1 / -1; justify-self: center; }

.anchor-glyph {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 10;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
  background: rgba(59, 7, 100, 0.42);
  border: 1px solid rgba(251, 191, 36, 0.38);
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.2), inset 0 0 18px rgba(254, 215, 170, 0.08);
  backdrop-filter: blur(12px);
}

@keyframes sunsetBreath { 0% { background-position: 0% 45%; } 100% { background-position: 100% 55%; } }
@keyframes particles { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-120px, -180px, 0); } }
@keyframes moteDrift { from { transform: translate3d(0, 0, 0) scale(0.8); } to { transform: translate3d(46px, -72px, 0) scale(1.4); } }
@keyframes foregroundFloat { from { transform: translate3d(-2vw, 2vh, 100px) rotate(-4deg); } to { transform: translate3d(6vw, -4vh, 100px) rotate(5deg); } }
@keyframes glowPulse { from { filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.45)); } to { filter: drop-shadow(0 0 18px rgba(249, 115, 22, 0.95)); } }
@keyframes glyphBreath { from { text-shadow: 0 0 4px rgba(249, 115, 22, 0.36); } to { text-shadow: 0 0 12px rgba(249, 115, 22, 0.75); } }
@keyframes nodePop { to { transform: scale(1); } }
@keyframes leafPop { to { opacity: 1; transform: scale(1) rotate(-18deg); } }
@keyframes galleryFloat { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-18px) rotate(3deg); } }

@media (max-width: 900px) {
  .opening, .woven, .sound, .beauty, .future { grid-template-columns: 1fr; }
  .small-panel { grid-column: auto; justify-self: start; }
  .depth-section { padding: 13vh 6vw; }
  .drift { font-size: clamp(8rem, 35vw, 20rem); }
}

@media (max-width: 768px) {
  .depth-world { perspective: 520px; }
  .from-left, .from-right { transform: translateY(70px) rotate(0deg); }
  .reveal.is-visible, .small-panel.reveal.is-visible, .closing-panel.reveal.is-visible { transform: translateY(0) rotate(0deg); }
  .panel { border-radius: 28px; transform: rotate(0deg); }
  .syllable-lab { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .syllable-lab i { display: none; }
  .transition-glyph::before { font-size: clamp(8rem, 45vw, 20rem); }
  .anchor-glyph { width: 54px; height: 54px; }
}