/*
  (c) HEHE 2026. All rights reserved.
*/

/* ========================================
   HEHEz53 — ほんの些細な場所
   动态低饱和度炫彩背景 · 磨砂质感
   ======================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --accent: #ddff53;
  --aux-lavender: #c8bfd8;
  --aux-blue: #b0c4de;
  --aux-apricot: #e8d5c4;
  --aux-sage: #c5d5c0;
  --font-mono: 'JetBrains Mono', monospace;
  --font-sc: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-jp: 'Noto Serif JP', 'Hiragino Mincho Pro', serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.08) transparent;
}

body {
  font-family: var(--font-sc);
  line-height: 1.8;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  color: #2c2c2c;
  background: #e8e4df;
  position: relative;
  min-height: 100vh;
}

/* ====== 动态渐变背景 ====== */
.bg-gradient {
  position: fixed;
  inset: -50%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 30%, hsla(280, 25%, 85%, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, hsla(210, 20%, 82%, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 70%, hsla(120, 15%, 82%, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, hsla(25, 20%, 84%, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, hsla(180, 15%, 85%, 0.35) 0%, transparent 60%);
  animation: bgSlide 28s ease-in-out infinite;
}

.bg-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 60% 40%, hsla(320, 22%, 83%, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 60%, hsla(45, 18%, 83%, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 55% 25%, hsla(260, 20%, 84%, 0.3) 0%, transparent 50%);
  animation: bgSlide 35s ease-in-out infinite reverse;
}

@keyframes bgSlide {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25% { transform: translate(2%, -1%) rotate(1deg) scale(1.05); }
  50% { transform: translate(-1%, 2%) rotate(-0.5deg) scale(1.02); }
  75% { transform: translate(1%, 1%) rotate(0.5deg) scale(1.03); }
}

/* ====== 噪点纹理 ====== */
.bg-noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ====== 粒子画布 ====== */
#particleCanvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06); border-radius: 2px; }
::selection { background: rgba(221,255,83,0.2); }
a { color: inherit; text-decoration: none; }

/* ====== Navigation ====== */
.nav-dots {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0,0,0,0.1);
  transition: all 0.4s var(--ease-out);
}
.nav-dot:hover, .nav-dot.active {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(190,220,60,0.4);
}
@media (max-width: 768px) {
  .nav-dots { right: 0.75rem; gap: 0.8rem; }
}

/* ====== Sections ====== */
.section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
  position: relative;
  z-index: 3;
}

.section-title {
  font-family: var(--font-sc);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  margin-bottom: 3rem;
  color: rgba(0,0,0,0.55);
}

/* ==================== HERO ==================== */
.hero { padding: 2rem; overflow: hidden; }

.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  z-index: 5;
}

.hero-visual {
  width: clamp(140px, 26vw, 190px);
  animation: floatSlow 7s ease-in-out infinite;
}
.yuntai-full { width: 100%; height: auto; }

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero-signature { text-align: center; }

.name-main {
  font-family: var(--font-sc);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 300;
  letter-spacing: 0.15em;
  color: #2c2c2c;
  margin-bottom: 0.3rem;
}

.name-alts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}
.name-jp { font-family: var(--font-jp); color: rgba(0,0,0,0.4); }
.name-roman { font-family: var(--font-mono); color: rgba(0,0,0,0.35); font-size: 0.65rem; letter-spacing: 0.1em; }
.name-cn { color: rgba(0,0,0,0.4); }
.name-sep { color: rgba(0,0,0,0.1); }

.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
}
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.06), transparent);
  animation: pulseLine 2.5s ease-in-out infinite;
}
@keyframes pulseLine {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@media (max-width: 768px) {
  .hero-visual { width: 120px; }
}

/* ==================== ABOUT ==================== */
.about-container {
  display: flex;
  align-items: center;
  gap: 4rem;
  max-width: 900px;
  width: 100%;
}
.about-visual { flex: 0 0 280px; }

.yuntai-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.4s var(--ease-out);
}
.yuntai-placeholder:hover { border-color: rgba(0,0,0,0.1); }
.placeholder-art { width: 90%; height: 90%; }

.about-data { flex: 1; min-width: 280px; }

.data-file {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 6px;
  padding: 1.5rem 2rem;
}

.data-line {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 2.3;
  border-bottom: 1px solid rgba(0,0,0,0.02);
  padding: 0.1rem 0;
}
.data-line:last-child { border-bottom: none; }
.data-key { color: rgba(0,0,0,0.18); font-size: 0.65rem; letter-spacing: 0.1em; margin-right: 0.6rem; }
.data-val { color: rgba(0,0,0,0.45); }
.hair-swatch { display: inline-block; width: 7px; height: 7px; background: var(--accent); border-radius: 2px; margin-right: 0.3rem; vertical-align: middle; opacity: 0.5; }

.about-note {
  margin-top: 1.2rem;
  font-family: 'KaiTi', 'STKaiti', var(--font-sc);
  font-size: 0.8rem;
  color: var(--aux-apricot);
  text-align: right;
  font-style: italic;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .about-container { flex-direction: column; gap: 2rem; }
  .about-visual { flex: unset; width: 200px; }
  .data-file { padding: 1.2rem 1.2rem; }
}

/* ==================== LINKS ==================== */
.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  max-width: 650px;
  width: 100%;
}

.link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.03);
  border-radius: 6px;
  padding: 1rem 1.4rem;
  cursor: pointer;
  transition: all 0.35s var(--ease-out);
  position: relative;
}
.link-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.4s var(--ease-out);
}
.link-card:hover {
  background: rgba(255,255,255,0.7);
}
.link-card:hover::after { width: 100%; }

.link-label {
  font-family: var(--font-sc);
  font-size: 0.85rem;
  font-weight: 400;
  color: #2c2c2c;
  letter-spacing: 0.04em;
}
.link-arrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(0,0,0,0.12);
  transition: all 0.3s;
}
.link-card:hover .link-arrow { color: var(--accent); transform: translateX(2px); }

@media (max-width: 480px) {
  .links-grid { grid-template-columns: 1fr; }
}

/* ==================== WORKS ==================== */
.works-empty { max-width: 460px; width: 100%; text-align: center; }

.works-message {
  font-family: var(--font-sc);
  font-size: 0.95rem;
  color: rgba(0,0,0,0.35);
  font-weight: 300;
  letter-spacing: 0.04em;
  padding: 3rem 2rem;
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.03);
  border-radius: 6px;
}

/* ==================== FOOTER ==================== */
.footer {
  padding: 4rem 2rem 3rem;
  text-align: center;
  position: relative;
  z-index: 3;
}

.footer-whisper {
  font-family: var(--font-jp);
  font-size: 0.72rem;
  color: var(--aux-blue);
  opacity: 0.35;
  line-height: 2;
  max-width: 500px;
  margin: 0 auto 2.5rem;
  transition: opacity 0.5s;
  min-height: 2em;
}

.footer-copyright {
  font-size: 11px;
  color: rgba(0,0,0,0.15);
  letter-spacing: 0.05em;
}

/* ====== Reveal ====== */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 480px) {
  .section { padding: 4rem 1.2rem; }
  .section-title { font-size: 1.3rem; margin-bottom: 2rem; }
}