:root{
  --bg:#071017; --bg-2:#0b1821; --fg:#e9f4ff; --muted:#99b3c8;
  --teal:#19e0d6; --lemon:#ffe66d; --coral:#ff7a6e; --magenta:#ff5cad;
  --card:#0f2230; --border:rgba(25,224,214,.25);
  --radius:18px; --shadow:0 12px 34px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg);
  background: radial-gradient(1200px 600px at 60% 20%, #0b1c26 0%, var(--bg) 50%, #050b10 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing:.2px;
}
a{color:var(--fg); text-decoration:none}
.hidden{display:none !important}
.muted{color:var(--muted)}

.bg-grid{
  position:fixed; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, rgba(25,224,214,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(25,224,214,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(1000px 500px at 60% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
}

.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background: linear-gradient(180deg, rgba(7,16,23,.85), rgba(7,16,23,.55));
  border-bottom: 1px solid rgba(25,224,214,.18);
  backdrop-filter: blur(10px);
}
.topbar nav a{ padding:8px 12px; margin:0 4px; border-radius:12px; transition:.2s }
.topbar nav a:hover{ background: rgba(25,224,214,.12) }
.logo{ display:flex; align-items:center; gap:10px }
.logo .cat .st0{ fill:#0f2230; stroke:var(--teal); stroke-width:1 }
.logo .cat .st1{ fill:var(--lemon) }
.logo .cat .st2{ fill:var(--magenta) }
.brand{ font-weight:800; letter-spacing:.6px }

.view{ padding:28px 18px 90px; max-width:1180px; margin:0 auto }

/* HERO */
.hero{ position:relative; height:calc(100vh - 64px); overflow:hidden; }
#orb{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1 }
.hero-overlay{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; height:100%; gap:14px; padding:0 18px;
}
#hero-title{
  font-size: clamp(36px, 6vw, 72px); letter-spacing:1.2px;
  text-shadow: 0 0 18px rgba(25,224,214,.4), 0 0 42px rgba(255,92,173,.25);
}
.subtitle{ opacity:.9; margin-top:-6px }
.hero-ctas{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; justify-content:center }
.widgets{
  margin-top:10px; z-index:3;
  display:flex; gap:18px; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:14px;
  background: linear-gradient(180deg, rgba(15,34,48,.75), rgba(15,34,48,.35));
  border:1px solid rgba(255,122,110,.25);
  backdrop-filter: blur(6px);
}
.chips{ position:absolute; top:18vh; right:6vw; display:flex; gap:8px; flex-wrap:wrap; z-index:3 }
.chip{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,92,173,.45);
  background:rgba(255,92,173,.1); color:var(--fg); cursor:pointer; transition:.2s;
}
.chip:hover{ transform: translateY(-1px) }

.btn{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  padding:10px 16px; border-radius:14px; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(15,34,48,.9), rgba(15,34,48,.6));
  box-shadow: var(--shadow); color:var(--fg); transition:.2s;
}
.btn:hover{ transform: translateY(-1px) }
.btn.ghost{ background:transparent; border-color: rgba(255,230,109,.45) }
.btn.glow{ box-shadow:0 0 0 0 rgba(25,224,214,.6); animation: pulse 2.2s infinite }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(25,224,214,.55) }
  70%{ box-shadow:0 0 0 16px rgba(25,224,214,0) }
  100%{ box-shadow:0 0 0 0 rgba(25,224,214,0) }
}

/* Playground drag */
.drag-canvas{
  min-height:58vh; position:relative;
  border-radius: var(--radius);
  border:1px dashed rgba(25,224,214,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.tile{
  position:absolute; width:280px; min-height:150px; padding:14px;
  background:var(--card); border:1px solid rgba(25,224,214,.3);
  border-radius:16px; box-shadow: var(--shadow);
  user-select:none; cursor:grab; transition: box-shadow .15s ease, transform .15s ease;
}
.tile:active{ cursor:grabbing; transform: scale(1.02) }

/* Story / Lab / Inbox */
.timeline{ display:grid; gap:14px }
.card{
  background:var(--card); border-radius:16px; padding:16px;
  border:1px solid rgba(25,224,214,.25); box-shadow:var(--shadow);
}
.card .meta{ opacity:.85; font-size:13px; margin-bottom:8px }
.card .flip{ perspective:1000px }
.card .face{ transform-style:preserve-3d; transition: transform .5s ease }
.card .face.flipped{ transform: rotateY(180deg) }
.card .front, .card .back{ backface-visibility:hidden }
.card .back{ transform: rotateY(180deg); color:var(--muted) }

.lab-card{ margin:16px 0; padding:16px; border:1px solid rgba(25,224,214,.25); border-radius:16px; background:var(--card) }
.mood-panel{
  margin-top:12px; padding:12px; border-radius:12px;
  border:1px solid rgba(255,230,109,.35);
  background: linear-gradient(180deg, rgba(255,230,109,.08), rgba(15,34,48,.8));
}
.vr-sketch{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap }
.vr-scene{
  flex:1; min-height:180px; border-radius:14px; border:1px solid rgba(255,122,110,.25);
  background: radial-gradient(600px 180px at 60% 40%, rgba(25,224,214,.06), transparent 60%),
             linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  position:relative; overflow:hidden;
}

/* Inbox */
.inbox-form{ display:grid; gap:10px; max-width:560px }
.inbox-form input, .inbox-form textarea{
  background: rgba(15,34,48,.75); color:var(--fg);
  border:1px solid rgba(25,224,214,.3); border-radius:12px; padding:12px;
}
.postcard{
  margin-top:14px; padding:16px; border-radius:16px; border:1px dashed rgba(25,224,214,.35);
  background: repeating-linear-gradient(45deg, rgba(25,224,214,.08) 0 10px, transparent 10px 20px);
}

/* Easter */
.easter-wrap{ min-height:60vh; display:grid; place-items:center; text-align:center; gap:10px }
.easter-wrap .wireframe{
  width:70%; height:240px; margin:12px auto; border:1px solid rgba(25,224,214,.35);
  background:
    linear-gradient(to right, rgba(255,92,173,.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,92,173,.25) 1px, transparent 1px);
  background-size: 32px 32px; transform: perspective(900px) rotateX(45deg); border-radius:12px;
}

/* smaller widgets on hero */
.widgets.small { transform: scale(0.6) translateY(40px); }

/* story text */
.story-text { max-width:800px; line-height:1.6; }

/* portfolio floating */
.portfolio-container {
  position: relative;
  height: 70vh;
  overflow: hidden;
}
.project-thumb {
  position: absolute;
  width: 180px;
  text-align: center;
  cursor: pointer;
  transition: transform .3s;
}
.project-thumb img {
  width: 100%; border-radius:12px;
  border:1px solid rgba(25,224,214,.3);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.project-thumb:hover { transform: scale(1.1); z-index:2; }

/* modal */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.8);
  display:flex; align-items:center; justify-content:center;
  z-index:50;
}
.modal.hidden { display:none; }
.modal-content {
  background:#0b1821; padding:20px; border-radius:16px;
  border:1px solid rgba(25,224,214,.4); text-align:center;
  max-width:600px;
}
.modal-content img { max-width:100%; border-radius:10px; }
.close {
  position:absolute; top:20px; right:30px; font-size:28px; color:#fff; cursor:pointer;
}
/* ===== STORY TIMELINE STYLING ===== */
.timeline {
  position: relative;
  padding-left: 80px;
  margin-top: 40px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(25,224,214,0.4), rgba(25,224,214,0.05));
  box-shadow: 0 0 6px rgba(25,224,214,0.3);
}

.timeline h3 {
  position: relative;
  margin-top: 40px;
  font-size: 1.3rem;
  color: #b8faff;
  letter-spacing: 0.5px;
  text-shadow: 0 0 6px rgba(25,224,214,0.2);
}

.timeline h3::before {
  content: "";
  position: absolute;
  left: -53px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,224,214,0.9), rgba(25,224,214,0.2));
  box-shadow: 0 0 12px rgba(25,224,214,0.6);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.timeline::after {
  content: "";
  position: absolute;
  left: 39px;
  width: 4px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(25,224,214,0));
  filter: blur(2px);
  animation: moveGlow 4s linear infinite;
}

@keyframes moveGlow {
  0% { top: 0%; }
  100% { top: 100%; }
}


.timeline h3:hover::before {
  transform: scale(1.25);
  box-shadow: 0 0 20px rgba(25,224,214,0.9);
}

.timeline p {
  margin-top: 8px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  color: #e3faff;
  opacity: 0.9;
  max-width: 700px;
  animation: fadeUp 0.8s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== STORY TIMELINE (enhanced) ===== */
.timeline{
  position:relative;
  padding-left:84px;
  margin-top:40px;
  max-width:920px;
}

/* main vertical line */
.timeline::before{
  content:"";
  position:absolute; top:0; left:42px; width:2px; height:100%;
  background:linear-gradient(to bottom, rgba(25,224,214,.35), rgba(25,224,214,.06));
  box-shadow:0 0 6px rgba(25,224,214,.28);
}

/* moving glow with corrected trail (head bright, tail behind) */
.timeline::after{
  content:"";
  position:absolute; left:41px; width:4px; height:60px;
  /* 亮点在下方，拖尾在上方（方向：向下运动） */
  background:linear-gradient(to bottom, rgba(25,224,214,0), rgba(255,255,255,.95));
  filter:blur(2px);
  animation:timeline-glider 5.5s linear infinite;
  mix-blend-mode:screen;
}
@keyframes timeline-glider{
  0%   { top:0% }
  100% { top:100% }
}

/* section title node */
.timeline h3{
  position:relative; margin:40px 0 8px; font-size:1.25rem;
  color:#b8faff; letter-spacing:.5px; text-shadow:0 0 6px rgba(25,224,214,.2);
}
.timeline h3::before{
  content:"";
  position:absolute; left:-56px; top:6px; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle, rgba(25,224,214,.95), rgba(25,224,214,.15));
  box-shadow:0 0 14px rgba(25,224,214,.75), 0 0 22px rgba(255,92,173,.25);
  animation:node-breathe 2.6s ease-in-out infinite;
}
@keyframes node-breathe{
  0%,100%{ transform:scale(1);    filter:drop-shadow(0 0 0 rgba(25,224,214,0)); }
  50%    { transform:scale(1.18); filter:drop-shadow(0 0 6px rgba(25,224,214,.6));}
}

/* tiny connector from node to title,带流动感的虚线 */
.timeline h3::after{
  content:"";
  position:absolute; left:-42px; top:11px; height:2px; width:28px;
  background:
    repeating-linear-gradient(90deg,
      rgba(25,224,214,.9) 0 8px,
      rgba(25,224,214,0) 8px 12px);
  animation:dash-flow 1.2s linear infinite;
  opacity:.9;
}
@keyframes dash-flow{
  from{ transform:translateX(0) }
  to  { transform:translateX(12px) }
}

.timeline p{
  margin:.2rem 0 1rem; color:#e3faff; opacity:.92; line-height:1.65; max-width:720px;
  animation:fadeUp .7s ease both;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px) }
  to  { opacity:1; transform:translateY(0) }
}

/* 低运动偏好：禁用动画但保留样式 */
@media (prefers-reduced-motion: reduce){
  .timeline::after, .timeline h3::before, .timeline h3::after, .timeline p{ animation:none !important }
}

/* ===== CONTACT PAGE ===== */
#view-contact {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:70vh;
}

.contact-info p {
  color:#aefcff;
  margin-bottom:6px;
}
#mail {
  color:#fff;
  font-size:1.1rem;
  text-decoration:none;
  border-bottom:1px dotted rgba(25,224,214,.5);
  transition:color .2s, border .2s;
}
#mail:hover {
  color:#19e0d6;
  border-bottom-color:#19e0d6;
}
#cat-canvas {
  margin-top:40px;
  width:600px;
  height:400px;
  background:rgba(0,0,0,.15);
  border:1px solid rgba(25,224,214,.2);
  border-radius:12px;
  box-shadow:0 0 10px rgba(25,224,214,.15);
}