/* site.css — PMCREATE 云朵罗兰官网 · 极简版 · 视频首屏 + 臻享孤独
 * finesse · register=brand · A=dark-graphite+gold · B=black-type/heavy-display
 * C=fullbleed-video-hero · D=video-engine · E=glass-gold · SOUL=8 SPECTACLE=8 DENSITY=2 */

/* 免费黑体：思源黑体 Noto Sans SC（SIL OFL 开源免费商用） */
@font-face {
  font-family: "Noto Sans SC";
  src: url("/assets/fonts/noto-sans-sc-chinese-simplified-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("/assets/fonts/noto-sans-sc-chinese-simplified-500-normal.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("/assets/fonts/noto-sans-sc-chinese-simplified-600-normal.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("/assets/fonts/noto-sans-sc-chinese-simplified-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  --bg: #12110e;
  --gold: #e8c766;
  --gold-2: #f5e3a8;
  --text: #ede7d8;
  --text-2: #b9b09a;
  --text-3: #8a8068;
  --font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- 导航（仅 Logo，放大） ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: linear-gradient(180deg, rgba(10, 9, 7, .7), rgba(10, 9, 7, 0));
  border-bottom: none;
  pointer-events: none;
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 18px 28px;
  display: flex; align-items: center;
}
.brand { display: flex; align-items: center; pointer-events: auto; }
.brand-logo {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover;
  display: block;
}
@media (max-width: 560px) {
  .brand-logo { width: 52px; height: 52px; }
}

/* ---------- 首屏：视频 ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 75% 20%, rgba(232, 199, 102, .12), transparent 60%),
    linear-gradient(180deg, #0f0e0b 0%, #12110e 60%, #171510 100%);
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,9,7,.42) 0%, rgba(10,9,7,.16) 35%, rgba(10,9,7,.34) 70%, #12110e 100%);
}
.hero-inner {
  position: relative; z-index: 2; text-align: center; padding: 0 24px;
  animation: hero-in 1.1s ease both;
}
@keyframes hero-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-title {
  font-size: clamp(40px, 8vw, 88px);
  font-weight: 700; letter-spacing: .14em;
  color: var(--text);
  text-shadow: 0 4px 44px rgba(0, 0, 0, .9);
  overflow-wrap: anywhere;
}
.hero-sub {
  margin-top: 22px; font-size: clamp(13px, 2vw, 16px);
  font-weight: 500; letter-spacing: .4em;
  color: var(--gold-2);
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .9);
}

/* ---------- 臻享孤独 ---------- */
.lonely {
  min-height: 82vh; min-height: 82dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 90px 24px;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(232, 199, 102, .06), transparent 70%),
    var(--bg);
}
.lonely-en {
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 500; letter-spacing: .5em; color: var(--gold);
  text-transform: uppercase;
}
.lonely-cn {
  margin-top: 26px;
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 700; letter-spacing: .3em; color: var(--text);
  overflow-wrap: anywhere;
}
.lonely-text {
  margin-top: 30px; max-width: 640px;
  font-size: clamp(14px, 2vw, 17px); font-weight: 400;
  line-height: 2.2; letter-spacing: .1em; color: var(--text-2);
}
.lonely-slogan {
  margin-top: 40px;
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 600; letter-spacing: .34em; color: var(--gold-2);
}

/* ---------- 移动端 ---------- */
@media (max-width: 560px) {
  .nav-inner { padding: 14px 18px; }
  .brand-logo { width: 52px; height: 52px; }
  .lonely { padding: 70px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero-inner { animation: none; }
}
