/* =========================================================
   rej.cc · 个人励志页
   风格取自《英雄本色》调色：黑底 / 正红 / 米白 / 金
   ========================================================= */

:root{
  --bg:      #08080a;
  --bg-2:    #0f0f12;
  --ink:     #f4f2ee;
  --muted:   #8b8b93;
  --red:     #e10600;
  --red-dim: #a10500;
  --gold:    #c9a227;
  --line:    rgba(255,255,255,.12);

  --sans: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",system-ui,-apple-system,sans-serif;
  --brush:"STKaiti","KaiTi","楷体","FZKai-Z03S","AR PL UKai CN","Songti SC",serif;

  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1120px;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;   /* 阻止 iOS 横屏自动放大字号 */
  text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- 装饰层 ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed; inset:0; z-index:59; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center;
}
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.2; filter:saturate(.6) contrast(1.2) brightness(.85);
}
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(225,6,0,.18), transparent 56%),
    linear-gradient(180deg, rgba(8,8,10,.7) 0%, rgba(8,8,10,.5) 45%, var(--bg) 99%);
}
.hero__inner{
  position:relative; z-index:2; width:100%; max-width:var(--maxw);
  padding:clamp(56px,8vh,88px) var(--pad) clamp(80px,12vh,116px);
}

.hero__eyebrow{
  margin:0 0 clamp(16px,2.4vh,22px); font-size:clamp(12px,1.6vw,14px); letter-spacing:.42em;
  text-transform:uppercase; color:var(--muted); text-indent:.42em;
}
.hero__eyebrow .dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--red); margin-right:12px; vertical-align:middle;
  box-shadow:0 0 14px var(--red);
}
.hero__eyebrow b{ color:var(--ink); font-weight:600; }

.hero__title{
  margin:0 0 clamp(18px,2.8vh,26px); font-family:var(--brush); font-weight:700;
  /* 同时受视口宽与高约束：矮窗口（横屏手机/分屏）不会把首屏撑破 */
  font-size:clamp(46px, min(8.4vw, 15vh), 104px);
  line-height:.98; letter-spacing:.04em;
}
.hero__title .line{ display:block; }
.hero__title .hl{
  color:var(--red);
  text-shadow:0 0 60px rgba(225,6,0,.55);
  position:relative;
}
.hero__title .hl::after{
  content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:0; height:3px; background:var(--gold);
  transition:width 1.1s cubic-bezier(.2,.8,.2,1) .8s;
}
.hero__title .hl.in::after{ width:82%; }

.hero__sub{
  margin:0 auto clamp(18px,2.6vh,24px); max-width:min(94%, 30ch);
  font-family:var(--brush); font-size:clamp(16px,2.2vw,23px);
  letter-spacing:.1em; color:rgba(244,242,238,.86);
}

.hero__tags{ margin:0 0 clamp(24px,3.4vh,34px); display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.hero__tags span{
  font-size:12px; letter-spacing:.06em; color:var(--muted);
  border:1px solid var(--line); border-radius:100px; padding:5px 14px;
  backdrop-filter:blur(6px);
}

.hero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 28px; border-radius:100px; border:1px solid transparent;
  font-size:14px; letter-spacing:.08em; text-decoration:none; cursor:pointer;
  font-family:inherit; transition:.28s cubic-bezier(.2,.8,.2,1);
  touch-action:manipulation;          /* 去掉移动端双击 300ms 延迟 */
}
.btn .ico{ width:17px; height:17px; fill:currentColor; }
.btn--solid{ background:var(--red); color:#fff; }
.btn--solid:hover{ background:#ff1a10; transform:translateY(-2px); box-shadow:0 14px 34px rgba(225,6,0,.34); }
.btn--ghost{ border-color:var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--red); color:var(--red); transform:translateY(-2px); }

.hero__scroll{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:2;
  width:22px; height:36px; border:1px solid var(--line); border-radius:100px;
}
.hero__scroll span{
  position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:2px;
  background:var(--red); transform:translateX(-50%);
  animation:sc 1.9s ease-in-out infinite;
}
@keyframes sc{ 0%,100%{ top:7px; opacity:1 } 55%{ top:20px; opacity:.15 } }

/* ---------- 台词 ---------- */
.lines{ padding:clamp(80px,13vw,150px) 0 clamp(40px,7vw,70px); }
.quote{ position:relative; padding:clamp(38px,6vw,64px) 0; border-bottom:1px solid var(--line); }
.quote:last-child{ border-bottom:0; }
.quote__no{
  position:absolute; top:clamp(30px,5vw,52px); right:0;
  font-family:var(--brush); font-size:clamp(56px,10vw,116px); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.09);
  pointer-events:none;
}
.quote__zh{
  position:relative; margin:0 0 12px; max-width:19ch;
  font-family:var(--brush); font-weight:700;
  font-size:clamp(28px,5.6vw,62px); line-height:1.3; letter-spacing:.03em;
}
.quote__en{
  position:relative; margin:0 0 30px;
  font-size:clamp(12px,1.5vw,14px); letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.quote__fig{ margin:0; overflow:hidden; border-radius:4px; }
.quote__fig img{
  width:100%; transform:scale(1.06);
  transition:transform 1.4s cubic-bezier(.2,.8,.2,1);
  filter:saturate(.9) contrast(1.05);
}
.quote:hover .quote__fig img{ transform:scale(1); }

/* ---------- 宣言 ---------- */
.manifesto{
  padding:clamp(80px,12vw,140px) 0;
  background:linear-gradient(180deg,var(--bg),var(--bg-2) 30%,var(--bg-2) 70%,var(--bg));
  border-block:1px solid var(--line);
}
.manifesto h2{
  margin:0 0 30px; font-family:var(--brush); font-weight:700;
  font-size:clamp(30px,6.2vw,68px); line-height:1.28; letter-spacing:.03em;
  text-wrap:balance;
}
.manifesto h2::before{
  content:""; display:block; width:54px; height:4px;
  background:var(--red); margin-bottom:26px;
}
.manifesto__lead{
  margin:0 0 52px; max-width:34ch;
  font-size:clamp(15px,1.9vw,19px); color:rgba(244,242,238,.72);
}
.creed{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.creed li{
  background:var(--bg-2); padding:26px 28px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;
  transition:.3s;
}
.creed li:hover{ background:#15151a; }
.creed b{ font-family:var(--brush); font-size:clamp(20px,2.6vw,28px); letter-spacing:.06em; }
.creed span{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

/* ---------- 页脚 ---------- */
.foot{
  padding:clamp(50px,7vw,84px) 0 calc(96px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line);
}
.foot__src{ margin:0 0 14px; font-size:14px; letter-spacing:.04em; }
.foot__src b{ color:var(--red); }
.foot__src a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.foot__src a:hover{ color:var(--red); }
.foot__note{ margin:0 0 34px; max-width:62ch; font-size:12.5px; line-height:1.9; color:var(--muted); }
.foot__by{ margin:0; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:#55555c; }

/* ---------- 悬浮音乐按钮 ---------- */
.dock{
  position:fixed; z-index:70;
  right:calc(clamp(16px,3vw,30px) + env(safe-area-inset-right, 0px));
  bottom:calc(clamp(16px,3vw,30px) + env(safe-area-inset-bottom, 0px));
  width:56px; height:56px; border-radius:50%; border:1px solid var(--line);
  background:rgba(15,15,18,.82); backdrop-filter:blur(12px);
  color:var(--ink); cursor:pointer; display:grid; place-items:center;
  touch-action:manipulation;
  transition:.3s cubic-bezier(.2,.8,.2,1);
}
.dock:hover{ border-color:var(--red); transform:scale(1.07); }
.dock svg{ width:21px; height:21px; fill:currentColor; position:absolute; transition:opacity .22s, transform .22s; }
.dock .ico-pause{ opacity:0; transform:scale(.7); }
.dock.playing .ico-play{ opacity:0; transform:scale(.7); }
.dock.playing .ico-pause{ opacity:1; transform:scale(1); }

.dock__eq{ position:absolute; inset:0; display:none; place-items:center; gap:2.5px; pointer-events:none; }
.dock.playing .dock__eq{ display:grid; }
.dock.playing .ico-pause{ opacity:0; }
.dock__eq i{ width:2.5px; height:0; background:var(--red); border-radius:2px; animation:eq .95s ease-in-out infinite; }
.dock__eq i:nth-child(1){ animation-delay:0s }
.dock__eq i:nth-child(2){ animation-delay:.18s }
.dock__eq i:nth-child(3){ animation-delay:.36s }
.dock__eq i:nth-child(4){ animation-delay:.54s }
@keyframes eq{ 0%,100%{ height:6px } 50%{ height:16px } }

/* ---------- 出场动画 ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .95s cubic-bezier(.2,.8,.2,1), transform .95s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.hero__inner .reveal:nth-child(1){ transition-delay:.05s }
.hero__inner .reveal:nth-child(2){ transition-delay:.16s }
.hero__inner .reveal:nth-child(3){ transition-delay:.30s }
.hero__inner .reveal:nth-child(4){ transition-delay:.42s }
.hero__inner .reveal:nth-child(5){ transition-delay:.54s }

/* ---------- 响应式 ---------- */
@media (max-width:860px){
  .quote__no{ position:static; display:block; margin-bottom:6px; }
}
@media (max-width:520px){
  .hero__inner{ padding:80px var(--pad) 104px; }
  .hero__tags span{ font-size:11px; padding:4px 11px; }
  .btn{ padding:11px 22px; font-size:13px; }
  .quote__en{ letter-spacing:.12em; }
  .dock{ width:50px; height:50px; }
}

/* ---------- 矮窗口 / 横屏手机 / 分屏 ---------- */
/* 实测：390px 高的横屏手机，hero 内容要 595px，CTA 直接被折出屏幕外。
   这里整体收紧，保证首屏内能看到标题 + 播放按钮。 */
@media (max-height:620px) and (orientation:landscape){
  .hero__inner{ padding:26px var(--pad) 54px; }
  .hero__eyebrow{ margin-bottom:10px; font-size:11px; letter-spacing:.3em; text-indent:.3em; }
  .hero__title{ font-size:clamp(34px, 9vh, 58px); margin-bottom:12px; }
  .hero__sub{ font-size:clamp(14px, 3.4vh, 18px); margin-bottom:14px; }
  .hero__tags{ display:none; }
  .hero__cta .btn{ padding:9px 22px; font-size:13px; }
  .hero__scroll{ display:none; }
  .dock{ width:48px; height:48px; }
}

/* ---------- 备案 ---------- */
.foot__icp{
  margin:0 0 26px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;
  font-size:12.5px; color:var(--muted);
}
.foot__icp a{
  color:var(--muted); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:1px; transition:.25s;
}
.foot__icp a:hover{ color:var(--ink); border-color:var(--red); }
.foot__icp .sep{ color:#3a3a40; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}