/* EVOLUTION · Tivas Tao — deep-sea narrative */
@font-face {
  font-family: "Allura";
  src: url("/fonts/allura.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --ink: #e9f3fc;
  --dim: #8fa8cc;
  --accent: #45b6ff;
  --accent2: #7f9bff;
  --warm: #ff5e73;
  --bg: #020914;
  --panel: rgba(6, 20, 42, 0.55);
  --line: rgba(110, 170, 255, 0.16);
  --serif: "Cormorant Garamond", "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  --sans: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  line-height: 1.9;
}
::selection { background: rgba(69, 182, 255, 0.25); }

#sea { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; }
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(1, 5, 12, 0.75) 100%);
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05;
  background-image: repeating-conic-gradient(rgba(255,255,255,0.6) 0 0.00007turn, transparent 0 0.00021turn);
  mix-blend-mode: overlay;
}

main { position: relative; z-index: 2; }

/* ---------------- nav ---------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 42px;
  background: linear-gradient(to bottom, rgba(2, 9, 20, 0.85), transparent);
}
.brand {
  font-family: var(--serif); font-size: 20px; letter-spacing: 0.35em;
  color: var(--ink); text-decoration: none;
}
.brand span { font-size: 12px; letter-spacing: 0.2em; color: var(--dim); margin-left: 10px; font-family: var(--sans); }
.nav-links { display: flex; gap: 26px; }
.nav-links a {
  color: var(--dim); text-decoration: none; font-size: 12px; letter-spacing: 0.18em;
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--accent); }

/* ---------------- side rail ---------------- */
.stage-rail {
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
  z-index: 10; display: flex; flex-direction: column; gap: 14px;
}
.rail-dot { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-direction: row-reverse; }
.rail-dot .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(143, 168, 204, 0.35); transition: all 0.4s;
}
.rail-dot .rail-label {
  font-size: 10px; letter-spacing: 0.12em; color: var(--dim);
  opacity: 0; transform: translateX(6px); transition: all 0.35s; white-space: nowrap;
}
.rail-dot:hover .rail-label, .rail-dot.active .rail-label { opacity: 1; transform: translateX(0); }
.rail-dot.active .dot { background: var(--accent); box-shadow: 0 0 12px var(--accent); transform: scale(1.5); }

/* ---------------- panels ---------------- */
.panel {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 14vh 8vw;
  position: relative;
}
.kicker {
  font-size: 12px; letter-spacing: 0.42em; color: var(--accent);
  text-transform: uppercase; margin-bottom: 26px;
}
.kicker::before { content: "— "; color: var(--dim); }

/* hero */
.hero { align-items: flex-start; text-align: left; }
.hero-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(64px, 12vw, 168px);
  letter-spacing: 0.14em; line-height: 1.05;
  background: linear-gradient(120deg, #e8f4ff 20%, var(--accent) 55%, #2b5f9f 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-name {
  font-family: var(--serif); font-size: clamp(22px, 3vw, 36px);
  letter-spacing: 0.3em; color: var(--dim); margin-top: 10px;
}
.hero-tag {
  margin-top: 44px; font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px); color: var(--ink); line-height: 1.6;
}
.hero-sub { margin-top: 22px; color: var(--dim); font-size: 15px; max-width: 480px; }
.scroll-hint {
  margin-top: 70px; font-size: 11px; letter-spacing: 0.35em; color: var(--dim);
  display: flex; align-items: center; gap: 14px; text-transform: uppercase;
}
.scroll-hint span {
  width: 1px; height: 52px; display: inline-block;
  background: linear-gradient(var(--accent), transparent);
  animation: drip 2.2s ease-in-out infinite;
}
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* statement */
.statement { align-items: center; text-align: center; }
.big-quote {
  font-family: var(--serif); font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.7; max-width: 96vw; margin: 0 auto; white-space: nowrap;
}
.quote-en {
  margin-top: 34px; font-family: "Allura", "Cormorant Garamond", cursive;
  color: var(--ink); font-size: clamp(22px, 2.6vw, 36px); line-height: 1.4;
  max-width: 96vw; margin-left: auto; margin-right: auto; opacity: 0.9; white-space: nowrap;
}
.quote-sub { margin-top: 38px; color: var(--dim); max-width: 640px; font-size: 15px; }

/* chapter head */
.chapter-head { min-height: 60vh; justify-content: flex-end; padding-bottom: 8vh; }
.chapter-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 5vw, 64px); letter-spacing: 0.06em; line-height: 1.3;
}
.chapter-intro { color: var(--dim); max-width: 560px; margin-top: 20px; font-size: 15px; }

/* stage cards */
.stage { min-height: 110vh; }
.stage-card {
  display: flex; gap: 40px; max-width: 860px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 56px 60px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.stage-card.right { margin-left: auto; }
.stage-card.center { margin: 0 auto; text-align: center; flex-direction: column; align-items: center; }
.stage-no {
  font-family: var(--serif); font-size: 88px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(69, 182, 255, 0.5);
  flex-shrink: 0;
}
.stage-time { font-size: 12px; letter-spacing: 0.25em; color: var(--dim); margin-bottom: 8px; }
.stage-body h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: 0.04em; margin-bottom: 6px;
}
.stage-cn { display: block; font-family: var(--sans); font-size: 14px; color: var(--dim); letter-spacing: 0.2em; margin-top: 6px; }
.organism-note { font-size: 12px; color: var(--accent); letter-spacing: 0.1em; margin: 14px 0; opacity: 0.85; }
.stage-body > p { color: #c8d8ea; font-size: 15px; }
.points { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.points li {
  font-size: 12px; letter-spacing: 0.08em; color: var(--accent);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px;
  background: rgba(69, 182, 255, 0.05);
}
.en {
  margin-top: 26px; font-family: var(--serif); font-style: italic;
  color: var(--dim); font-size: 15px;
  border-left: 2px solid var(--line); padding-left: 16px;
}
.stage-card.center .en { border-left: none; padding-left: 0; }

/* cancer chapter — warm shift */
.stage-cancer .stage-card { border-color: rgba(255, 94, 115, 0.3); background: rgba(38, 10, 18, 0.5); }
.stage-cancer .stage-no { -webkit-text-stroke-color: rgba(255, 94, 115, 0.6); }
.stage-cancer .kicker, .stage-cancer .organism-note { color: var(--warm); }
.stage-cancer .points li { color: #ffb3bd; border-color: rgba(255, 94, 115, 0.25); background: rgba(255, 94, 115, 0.06); }

/* protein structure lab link */
.lab-link {
  margin-top: 26px; display: flex; align-items: center; gap: 14px;
  padding: 16px 22px; text-decoration: none;
  border: 1px solid rgba(255, 94, 115, 0.35); border-radius: 4px;
  background: linear-gradient(120deg, rgba(255, 45, 85, 0.08), rgba(69, 182, 255, 0.06));
  transition: all 0.4s;
}
.lab-link:hover {
  border-color: rgba(255, 94, 115, 0.7);
  box-shadow: 0 8px 32px rgba(255, 45, 85, 0.18);
  transform: translateY(-2px);
}
.lab-pulse {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: #ff2d55; box-shadow: 0 0 10px #ff2d55;
  animation: labbeat 1.6s ease-in-out infinite;
}
@keyframes labbeat {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.55; }
}
.lab-text { font-size: 13px; letter-spacing: 0.12em; color: #ffb3bd; }
.lab-arrow { margin-left: auto; color: var(--warm); font-size: 16px; transition: transform 0.3s; }
.lab-link:hover .lab-arrow { transform: translate(3px, -3px); }

/* final */
.stage-final .stage-card { border-color: rgba(69, 182, 255, 0.35); }
.sources { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; max-width: 620px; }
.src { font-size: 11px; letter-spacing: 0.14em; color: var(--dim); border: 1px solid var(--line); padding: 4px 12px; border-radius: 999px; }
.final-line {
  margin-top: 44px; font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 3vw, 34px);
  background: linear-gradient(100deg, var(--accent), #9db8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.final-cn { margin-top: 16px; color: var(--dim); }

/* systems archive fragments */
.archive { align-items: center; }
.archive h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 40px); margin-bottom: 50px; }
.fragments { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; max-width: 1100px; }
.fragment {
  width: 300px; padding: 26px 28px;
  background: rgba(8, 22, 48, 0.5); border: 1px solid var(--line); border-radius: 4px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s, box-shadow 0.5s;
  animation: float 7s ease-in-out infinite;
  animation-delay: calc(var(--d) * -1.1s);
}
.fragment:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(69, 182, 255, 0.5);
  box-shadow: 0 18px 50px rgba(69, 182, 255, 0.12);
}
.fragment h4 { font-family: var(--serif); font-weight: 400; font-size: 19px; letter-spacing: 0.06em; margin-bottom: 10px; color: var(--accent); }
.fragment p { font-size: 13px; color: var(--dim); line-height: 1.8; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* timeline */
.timeline-panel { align-items: center; }
.timeline { width: min(860px, 92vw); margin-top: 50px; }
.tl-item {
  display: grid; grid-template-columns: 70px 1fr auto; gap: 20px; align-items: baseline;
  padding: 20px 26px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background 0.35s, padding-left 0.35s;
}
.tl-item:hover { background: rgba(69, 182, 255, 0.05); padding-left: 36px; }
.tl-no { font-family: var(--serif); font-size: 26px; color: transparent; -webkit-text-stroke: 1px rgba(69, 182, 255, 0.55); }
.tl-name { font-size: 17px; letter-spacing: 0.06em; }
.tl-name em { display: block; font-style: normal; font-size: 12px; color: var(--dim); letter-spacing: 0.12em; }
.tl-time { font-size: 12px; color: var(--dim); letter-spacing: 0.1em; text-align: right; }

/* footer */
.footer { align-items: center; text-align: center; min-height: 90vh; }
.footer-line { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 44px); }
.footer-line em { color: var(--accent); }
.footer-sub { color: var(--dim); margin-top: 16px; }
.contact-form {
  margin-top: 54px; display: flex; flex-direction: column; gap: 14px; width: min(460px, 90vw);
}
.contact-form input, .contact-form textarea {
  background: rgba(8, 22, 48, 0.6); border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink); padding: 13px 16px; font-family: var(--sans); font-size: 14px;
  outline: none; transition: border-color 0.3s; resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); }
.contact-form button {
  margin-top: 6px; padding: 14px; cursor: pointer;
  background: transparent; color: var(--accent);
  border: 1px solid rgba(69, 182, 255, 0.5); border-radius: 3px;
  font-size: 13px; letter-spacing: 0.3em; font-family: var(--sans);
  transition: all 0.35s;
}
.contact-form button:hover { background: rgba(69, 182, 255, 0.12); box-shadow: 0 0 30px rgba(69, 182, 255, 0.2); }
.form-status { font-size: 12px; color: var(--accent); min-height: 18px; }
.copyright { margin-top: 60px; font-size: 11px; letter-spacing: 0.25em; color: rgba(143, 168, 204, 0.5); }

/* responsive */
@media (max-width: 860px) {
  .nav { padding: 16px 20px; }
  .nav-links { display: none; }
  .stage-rail { right: 12px; }
  .rail-label { display: none; }
  .panel { padding: 12vh 6vw; }
  .stage-card { flex-direction: column; gap: 18px; padding: 34px 26px; }
  .stage-no { font-size: 56px; }
  .tl-item { grid-template-columns: 50px 1fr; }
  .tl-time { display: none; }
}