:root {
  /* typography source prompts: IBM Plex Mono from Google Fonts for command lines. */
  --deep-console: #0B1118;
  --graphite-mist: #1F2933;
  --frost-line: #CBD5E1;
  --cursor-cyan: #67E8F9;
  --aurora-green: #8EF6C5;
  --lavender-static: #C4B5FD;
  --moon-paper: #F1F5F9;
  --ink-plum: #312E81;
  --scroll-shift: 0px;
  --aurora-opacity: 0.34;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--deep-console);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--deep-console);
  color: var(--frost-line);
  font-family: "Noto Sans KR", Inter, sans-serif;
  overflow-x: hidden;
}

.dream-terminal {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% 8%, rgba(49, 46, 129, 0.28), transparent 33vw),
    linear-gradient(135deg, #0B1118 0%, #111923 44%, #0B1118 100%);
  isolation: isolate;
}

.grain-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  z-index: 8;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(241,245,249,0.16) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 20%, rgba(103,232,249,0.12) 0 1px, transparent 1px);
  background-size: 31px 37px, 47px 53px;
  mix-blend-mode: screen;
}

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
  border-bottom: 1px solid rgba(203, 213, 225, 0.08);
}

.scene::before {
  content: attr(data-scene);
  position: absolute;
  right: 4vw;
  bottom: 3vh;
  font: 500 12px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.35em;
  color: rgba(203, 213, 225, 0.18);
  text-transform: uppercase;
}

.scene-label {
  position: absolute;
  top: clamp(22px, 5vh, 52px);
  left: clamp(22px, 5vw, 70px);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(42px, 8vw, 128px);
  letter-spacing: 0.08em;
  color: rgba(241, 245, 249, 0.06);
  transform: rotate(-2deg);
  white-space: nowrap;
}

.right-label { left: auto; right: 7vw; transform: rotate(2deg); }
.night-label { top: 12vh; left: 9vw; }

.prompt-cluster, .command-rail, .night-field {
  font-family: "IBM Plex Mono", monospace;
  color: var(--frost-line);
}

.boot-prompt {
  position: absolute;
  top: 15vh;
  left: 7vw;
  width: min(720px, 86vw);
  z-index: 4;
}

.pathline, .rail-stamp, .final-path {
  display: block;
  margin-bottom: 16px;
  color: rgba(203, 213, 225, 0.48);
  font-size: clamp(12px, 1.5vw, 15px);
  letter-spacing: 0.08em;
}

.command-line {
  font-size: clamp(22px, 4.4vw, 62px);
  line-height: 1.15;
  color: var(--cursor-cyan);
  text-shadow: 0 0 22px rgba(103, 232, 249, 0.28);
}

.sigil { color: var(--aurora-green); }
.caret, .star-cursor { color: var(--cursor-cyan); animation: blink 0.9s steps(2, jump-none) infinite; }

.terminal-comment {
  margin-top: 22px;
  color: rgba(142, 246, 197, 0.70);
  font-size: clamp(13px, 1.8vw, 18px);
}

.site-title {
  position: absolute;
  top: 25vh;
  left: 5vw;
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(86px, 20vw, 310px);
  line-height: 0.82;
  letter-spacing: 0.08em;
  color: var(--moon-paper);
  opacity: 0;
  transform: translate(-30px, 20px) rotate(-3deg);
  text-shadow: 0 16px 50px rgba(0, 0, 0, 0.45), 0 0 38px rgba(196, 181, 253, 0.12);
  transition: opacity 1.5s ease, transform 1.5s cubic-bezier(.2,.8,.2,1);
  z-index: 2;
}

.site-title.revealed { opacity: 0.92; transform: translate(0, 0) rotate(-3deg); }

.hand-note {
  position: absolute;
  right: 7vw;
  bottom: 12vh;
  max-width: 440px;
  font-family: "Noto Sans KR", sans-serif;
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 300;
  line-height: 1.35;
  color: var(--moon-paper);
  transform: rotate(-1.5deg);
}

.aurora-cloud, .compiler-output, .buffer-aurora, .night-aurora {
  position: absolute;
  pointer-events: none;
}

.hero-aurora {
  width: min(56vw, 760px);
  height: 42vh;
  top: 8vh;
  right: -4vw;
  opacity: 0;
  filter: blur(24px) saturate(1.15);
  background:
    radial-gradient(ellipse at 26% 58%, rgba(142, 246, 197, 0.75), transparent 35%),
    radial-gradient(ellipse at 70% 35%, rgba(103, 232, 249, 0.52), transparent 38%),
    linear-gradient(105deg, transparent 8%, rgba(196, 181, 253, 0.52), rgba(49, 46, 129, 0.42), transparent 80%);
  border-radius: 50% 38% 56% 40%;
  transform: translateX(80px) rotate(-8deg);
  transition: opacity 1.8s ease, transform 2.4s ease;
  animation: auroraDrift 11s ease-in-out infinite alternate;
}

.hero-aurora.awake { opacity: var(--aurora-opacity); transform: translateX(0) rotate(-8deg); }

.z-trail {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform: translate3d(0, calc(var(--scroll-shift) * -0.025), 0);
}

.trail-line {
  position: absolute;
  height: 1px;
  width: 42vw;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.35), rgba(142, 246, 197, 0.20), transparent);
  transform-origin: left center;
  filter: drop-shadow(0 0 10px rgba(103,232,249,0.25));
}

.trail-one { top: 23vh; left: 18vw; transform: rotate(14deg); }
.trail-two { top: 58vh; left: 36vw; transform: rotate(-17deg); }

.cursor-spark {
  position: absolute;
  width: 8px;
  height: 15px;
  background: var(--cursor-cyan);
  box-shadow: 0 0 18px rgba(103, 232, 249, 0.85);
  opacity: 0.72;
  animation: firefly 6s ease-in-out infinite;
}

.spark-a { top: 19vh; left: 31vw; animation-delay: -0.2s; }
.spark-b { top: 39vh; left: 53vw; animation-delay: -1.4s; background: var(--aurora-green); }
.spark-c { top: 65vh; left: 72vw; animation-delay: -3.1s; }
.spark-d { top: 77vh; left: 42vw; animation-delay: -4.4s; background: var(--lavender-static); }

.idea-compiler { background: linear-gradient(160deg, rgba(31,41,51,0.34), transparent 60%); }

.command-rail {
  position: absolute;
  top: 19vh;
  left: 7vw;
  width: min(430px, 80vw);
  padding-left: 22px;
  border-left: 1px solid rgba(203, 213, 225, 0.22);
}

.command-rail p {
  margin: 18px 0;
  color: rgba(203, 213, 225, 0.86);
  font-size: clamp(14px, 2vw, 20px);
}

.command-rail b { color: var(--cursor-cyan); font-weight: 600; }

.compiler-output {
  inset: 11vh 3vw 8vh 38vw;
  border-radius: 40% 44% 36% 50%;
  filter: saturate(1.08);
}

.watercolor-bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  mix-blend-mode: screen;
  opacity: 0.52;
  animation: bloomPulse 8s ease-in-out infinite alternate;
}

.bloom-one { width: 44vw; height: 28vh; top: 15vh; left: 5vw; background: rgba(142, 246, 197, 0.55); }
.bloom-two { width: 35vw; height: 36vh; top: 27vh; right: 4vw; background: rgba(196, 181, 253, 0.46); animation-delay: -2s; }
.bloom-three { width: 38vw; height: 20vh; bottom: 8vh; left: 14vw; background: rgba(103, 232, 249, 0.38); animation-delay: -4s; }

.ascii-map {
  position: absolute;
  top: 22vh;
  left: 10vw;
  margin: 0;
  font: 500 clamp(13px, 1.6vw, 19px)/1.45 "IBM Plex Mono", monospace;
  color: rgba(241, 245, 249, 0.70);
  text-shadow: 0 0 18px rgba(103, 232, 249, 0.20);
}

.output-note {
  position: absolute;
  right: 8vw;
  bottom: 12vh;
  font: 500 clamp(14px, 2vw, 20px)/1 "IBM Plex Mono", monospace;
  color: var(--aurora-green);
}

.error-spirit {
  position: absolute;
  font: 600 13px/1 "IBM Plex Mono", monospace;
  color: #0B1118;
  padding: 16px 18px;
  background: radial-gradient(circle at 30% 30%, #F1F5F9, #C4B5FD 58%, rgba(196,181,253,0.08) 72%);
  border-radius: 61% 39% 54% 46%;
  box-shadow: 0 0 24px rgba(196, 181, 253, 0.28);
  opacity: 0.82;
  animation: spiritFloat 7s ease-in-out infinite;
}

.spirit-one { right: 18vw; top: 24vh; }
.spirit-two { right: 34vw; bottom: 17vh; animation-delay: -3s; }

.history-strips {
  position: absolute;
  top: 22vh;
  left: 8vw;
  width: min(980px, 84vw);
}

.paper-strip {
  margin: 19px 0;
  padding: 18px 24px;
  background: rgba(31, 41, 51, 0.58);
  border: 1px solid rgba(203, 213, 225, 0.13);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
  color: rgba(241, 245, 249, 0.74);
  font: 500 clamp(13px, 2vw, 21px)/1.45 "IBM Plex Mono", monospace;
  backdrop-filter: blur(10px);
}

.paper-strip span { color: rgba(103, 232, 249, 0.76); margin-right: 22px; }
.strip-a { transform: rotate(-1deg) translateX(2vw); }
.strip-b { transform: rotate(1.6deg) translateX(8vw); }
.strip-c { transform: rotate(-2.2deg) translateX(0); }
.strip-d { transform: rotate(1deg) translateX(13vw); }
.strip-e { transform: rotate(-0.7deg) translateX(5vw); }

.memory-note {
  position: absolute;
  right: 8vw;
  bottom: 13vh;
  max-width: 520px;
  color: rgba(203, 213, 225, 0.82);
  font-size: clamp(18px, 2.4vw, 30px);
  line-height: 1.45;
}

.buffer-aurora {
  width: 70vw;
  height: 18vh;
  left: 20vw;
  top: 55vh;
  opacity: 0.22;
  filter: blur(28px);
  background: linear-gradient(100deg, transparent, #312E81, #67E8F9, #8EF6C5, transparent);
  transform: rotate(-10deg);
  animation: auroraSlide 13s ease-in-out infinite alternate;
}

.night-canvas {
  min-height: 100vh;
  background:
    radial-gradient(circle at 72% 28%, rgba(103, 232, 249, 0.08), transparent 26vw),
    linear-gradient(180deg, #0B1118, #111923 68%, #0B1118);
}

.night-field {
  position: absolute;
  top: 42vh;
  left: 10vw;
}

.final-prompt {
  color: var(--frost-line);
  font-size: clamp(18px, 3vw, 42px);
}

.final-prompt span:first-child { color: var(--aurora-green); }

.star-cursor {
  display: inline-block;
  transform: translate(0, 0);
  text-shadow: 0 0 24px rgba(103, 232, 249, 0.95);
}

.night-aurora {
  width: 80vw;
  height: 36vh;
  right: -15vw;
  bottom: 14vh;
  opacity: 0.20;
  filter: blur(30px);
  background:
    radial-gradient(ellipse at 34% 55%, rgba(142,246,197,0.55), transparent 43%),
    linear-gradient(95deg, transparent, rgba(196,181,253,0.42), rgba(103,232,249,0.30), transparent);
  transform: rotate(-9deg);
  animation: auroraDrift 14s ease-in-out infinite alternate;
}

.command-link {
  position: absolute;
  right: 8vw;
  bottom: 10vh;
  color: var(--cursor-cyan);
  font: 600 16px/1 "IBM Plex Mono", monospace;
  text-decoration: none;
  border-bottom: 1px solid rgba(103, 232, 249, 0.45);
  padding-bottom: 7px;
  transition: color .3s ease, text-shadow .3s ease, transform .3s ease;
}

.command-link:hover { color: var(--aurora-green); text-shadow: 0 0 18px rgba(142,246,197,0.4); transform: translateY(-3px); }

@keyframes blink { 50% { opacity: 0; } }
@keyframes auroraDrift { to { transform: translate(-5vw, 3vh) rotate(-4deg) scale(1.06); } }
@keyframes auroraSlide { to { transform: translateX(-10vw) rotate(-6deg); opacity: 0.34; } }
@keyframes bloomPulse { to { transform: translate(4vw, -2vh) scale(1.13); opacity: 0.66; } }
@keyframes spiritFloat { 50% { transform: translate(12px, -18px) rotate(8deg); border-radius: 43% 57% 39% 61%; } }
@keyframes firefly { 50% { transform: translate(34px, -28px) rotate(12deg); opacity: 0.25; } }

@media (max-width: 760px) {
  .compiler-output { inset: 39vh -12vw 6vh 4vw; opacity: 0.8; }
  .command-rail { top: 17vh; }
  .hand-note { left: 8vw; right: 8vw; bottom: 8vh; }
  .history-strips { left: 4vw; width: 92vw; }
  .paper-strip { padding: 15px; }
  .memory-note { left: 8vw; right: 8vw; bottom: 7vh; }
  .z-trail { opacity: 0.65; }
}