/* ================================================
   Freelucky v5 — 滚动背景 · 头像半浮 · 渐变连接
   ================================================ */

/* ---------- Font ---------- */
@font-face {
  font-family: "BaoTuXiaoBai";
  src: url("../ttf/baotu-xiaobai-subset.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
  --cr: #fdf6ee; --cw: #f5e6d3;
  --ac: #e8a87c; --ad: #d4855e;
  --tx: #4a3728; --tl: #8b7355;
  --glass-bg: rgba(255,252,248,0.55);
  --glass-border: rgba(255,255,255,0.35);
  --glass-shadow: rgba(74,55,40,0.05);
  --tag-bg: rgba(232,168,124,0.15);
  --tag-c: #b87048;
  --font: "BaoTuXiaoBai","PingFang SC","Microsoft YaHei",sans-serif;
  --font-en: "Georgia","Times New Roman",serif;
}

html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:var(--font); color:var(--tx);
  background:var(--cr); min-height:100vh;
  overflow-x:hidden; overflow-y:hidden;
}
body.revealed { overflow-y:auto; }

/* ================================================
   Welcome Overlay
   ================================================ */
.welcome-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(30,20,15,0.72);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.7s ease, visibility 0.7s;
}
.welcome-overlay.exit { opacity:0; visibility:hidden; pointer-events:none; }
.welcome-inner { text-align:center; transition:transform 0.7s cubic-bezier(0.22,0.61,0.36,1); }
.welcome-overlay.exit .welcome-inner { transform:scale(0.25) translateY(-38vh); }

.welcome-big {
  font-family:var(--font); font-size:clamp(1.8rem, 5vw, 3.8rem);
  color:#fff; font-weight:300; letter-spacing:0.1em;
  text-shadow:0 2px 20px rgba(0,0,0,0.3);
  animation:welcomeBreath 3s ease-in-out infinite;
}
@keyframes welcomeBreath { 0%,100%{opacity:.85} 50%{opacity:1} }

.welcome-hint {
  margin-top:1.5rem; font-size:0.8rem;
  color:rgba(255,255,255,.55); letter-spacing:.12em;
  animation:hintBlink 2.5s ease-in-out infinite;
}
@keyframes hintBlink { 0%,100%{opacity:.4} 50%{opacity:.75} }

/* ================================================
   Background Layer (揭幕动画收缩至16:9)
   ================================================ */
.bg-layer {
  width:100%; height:100vh;
  position:relative;
  background:var(--cr) url("../img/bg.webp") no-repeat center center/cover;
  filter:saturate(0.92);
  flex-shrink:0;
  transition:height 0.8s cubic-bezier(0.22,0.61,0.36,1);
}

/* 底部渐变——连接背景与内容 */
.bg-layer::after {
  content:""; position:absolute; bottom:0; left:0; right:0;
  height:28%;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(253,246,238,.12) 25%,
    rgba(253,246,238,.45) 60%,
    var(--cr) 100%
  );
  pointer-events:none;
}

/* 背景上的 welcome 小字 */
.hero-welcome {
  position:absolute; bottom:38%; left:50%;
  transform:translateX(-50%);
  font-family:var(--font);
  font-size:clamp(0.7rem, 1.6vw, 0.95rem);
  color:rgba(255,255,255,.6);
  letter-spacing:.18em;
  text-shadow:0 1px 6px rgba(0,0,0,.15);
  pointer-events:none; z-index:1;
  opacity:0;
  transition:opacity .6s ease .5s;
}
body.revealed .hero-welcome { opacity:1; }

/* ================================================
   Main Stage
   ================================================ */
.main-stage {
  position:relative; z-index:1;
  width:100%; max-width:1050px;
  margin:0 auto; padding:1.5rem 2rem 2.5rem;
  opacity:0; transform:translateY(30px);
  transition:opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
  display:flex; flex-direction:column; align-items:center;
  flex-shrink:0;
}
body.revealed .main-stage { opacity:1; transform:translateY(0); }

/* ================================================
   Panel (外层大卡片)
   ================================================ */
.panel {
  width:100%;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:1.5rem;
  padding:2rem 2rem 1.8rem;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 4px 30px var(--glass-shadow);
  margin-top:-55px;
  position:relative; z-index:2;
}

/* ================================================
   Content Row (桌面左右 / 手机上下)
   ================================================ */
.content-row {
  display:flex; gap:0; width:100%; align-items:flex-start;
}
/* 桌面端分隔线 */
.col-sep {
  width:1px; align-self:stretch;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(232,168,124,.25) 20%,
    rgba(232,168,124,.35) 50%,
    rgba(232,168,124,.25) 80%,
    transparent
  );
  margin:0 1.5rem;
  flex-shrink:0;
}

/* ---------- Info Column ---------- */
.info-col {
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

/* 头像区（浮在渐变与卡片之间） */
.avatar-zone {
  margin-top:-60px;
  margin-bottom:.8rem;
  position:relative; z-index:3;
}
.avatar-ring {
  width:120px; height:120px; border-radius:50%; padding:3px;
  background:conic-gradient(from 0deg,var(--ac),var(--ad),var(--cw),var(--ac));
  animation:ringPulse 4s ease-in-out infinite;
  box-shadow:0 6px 28px rgba(180,120,80,.18);
}
@keyframes ringPulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.08)} }
.avatar {
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; border:3px solid #fff; display:block;
}



.nickname { font-size:1.6rem; font-weight:700; color:var(--ad); letter-spacing:.06em; }
.intro { font-size:.9rem; color:var(--tl); margin-top:.25rem; }
.signature-block { margin-top:.9rem; display:flex; align-items:center; gap:.4rem; }
.ornament { font-size:.65rem; color:var(--ac); opacity:.4; animation:ornamentSway 3s ease-in-out infinite; }
.ornament:first-child{animation-delay:0s}
.ornament:last-child{animation-delay:1.5s}
@keyframes ornamentSway { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.signature-text { font-size:1rem; color:var(--ac); font-style:italic; letter-spacing:.04em; }
.tags { display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; margin-top:1.2rem; }
.tag {
  padding:.25rem .75rem; border-radius:999px;
  background:var(--tag-bg); color:var(--tag-c);
  font-size:.74rem; font-weight:500; letter-spacing:.03em;
  transition:background .25s, transform .2s, box-shadow .25s;
}
.tag:hover { background:rgba(232,168,124,.22); transform:translateY(-1px); box-shadow:0 2px 8px rgba(180,120,80,.08); }

/* ---------- Player Column ---------- */
.player-col { flex:1 1 0; min-width:0; }
.player-bare {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.8rem; cursor:pointer;
  padding:1.5rem .5rem;
}
.player-hint { font-size:.72rem; color:var(--tl); letter-spacing:.04em; opacity:.6; }

.record-player {
  position:relative; width:220px; height:220px;
  user-select:none; -webkit-tap-highlight-color:transparent;
  transition:transform .2s ease, filter .25s;
}
.record-player:hover{transform:scale(1.04);filter:drop-shadow(0 4px 16px rgba(0,0,0,.15))}
.record-player:active{transform:scale(.96)}

.record-base {
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#3a3a3a,#1a1a1a);
  box-shadow:0 4px 24px rgba(0,0,0,.22), 0 0 0 3px rgba(60,60,60,.5), inset 0 1px 0 rgba(255,255,255,.03);
}
.record-grooves {
  position:absolute; inset:10px; border-radius:50%;
  border:2px solid rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.28),inset 0 0 0 7px rgba(255,255,255,.025),inset 0 0 0 12px rgba(0,0,0,.18),inset 0 0 0 14px rgba(255,255,255,.02),inset 0 0 0 20px rgba(0,0,0,.12);
}
.record-label {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,var(--ac),var(--ad));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:.5rem; color:#fff; text-align:center; line-height:1.2;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.record-label .note-icon{font-size:.85rem;margin-bottom:1px}

.tonearm {
  position:absolute; top:-8px; right:-10px; width:70px; height:58px;
  transform-origin:top right;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  z-index:2; pointer-events:none;
}
.player-bare.playing .tonearm{transform:rotate(-18deg)}
.tonearm-pivot{position:absolute;top:0;right:0;width:10px;height:10px;border-radius:50%;background:#777;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.tonearm-bar{position:absolute;top:3px;right:5px;width:54px;height:3px;background:linear-gradient(90deg,#999,#bbb);border-radius:2px;transform:rotate(-25deg);transform-origin:right center}
.tonearm-head{position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:#ccc;box-shadow:0 0 2px rgba(0,0,0,.25)}

.record-base.spinning{animation:discSpin 3s linear infinite}
@keyframes discSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.music-title{font-size:.82rem;color:var(--tx);font-weight:500;letter-spacing:.03em}

/* ================================================
   Footer
   ================================================ */
.footer {
  margin-top:2rem; display:flex; flex-direction:column; align-items:center;
  gap:.25rem; font-size:.7rem; color:var(--tl); text-align:center;
  opacity:0; transition:opacity .6s ease .5s;
}
body.revealed .footer{opacity:1}
.runtime{display:flex;align-items:center;gap:.25rem}
.runtime .heart{color:var(--ac);animation:heartbeat 1.5s ease-in-out infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.1)}60%{transform:scale(1)}}
.icp{opacity:.6}
.icp a{color:inherit;text-decoration:none}
.police-beian{opacity:.6}
.police-beian a{display:inline-flex;align-items:center;gap:.25rem;color:inherit;text-decoration:none}
.police-beian img{width:14px;height:14px;display:block}
.domain-tag{font-family:var(--font-en);font-style:italic;opacity:.4;font-size:.65rem}

/* ================================================
   Petals & Sparkles
   ================================================ */
.petals-container{position:fixed;inset:0;pointer-events:none;z-index:10;overflow:hidden}
.petal{position:absolute;top:-50px;font-size:1.3rem;opacity:.5;animation:petalFall linear infinite;user-select:none}
@keyframes petalFall{0%{transform:translateY(0)rotate(0)scale(1);opacity:.5}60%{opacity:.25}100%{transform:translateY(105vh)rotate(720deg)scale(.2);opacity:0}}

.sparkles-container{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.sparkle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--ac);opacity:0;animation:sparkleFloat 6s ease-in-out infinite}
@keyframes sparkleFloat{0%{opacity:0;transform:translateY(0)scale(0)}15%{opacity:.6}40%{opacity:.2}60%{opacity:.5}85%{opacity:.1}100%{opacity:0;transform:translateY(-120px)translateX(30px)scale(1.2)}}

/* ================================================
   Responsive: 手机 (≤767px)
   ================================================ */
@media (max-width:767px) {
  html{font-size:15px}
  .welcome-big{font-size:clamp(1.4rem,7vw,2.5rem)}
  .welcome-hint{font-size:.72rem;margin-top:1rem}
  .welcome-overlay.exit .welcome-inner{transform:scale(.2) translateY(-40vh)}
  .hero-welcome{font-size:.7rem;bottom:30%}
  .bg-layer{filter:none;background-position:center top}
  .bg-layer::after{
    bottom:-2px;
    height:62%;
    background:linear-gradient(
      to bottom,
      transparent 0%,
      rgba(253,246,238,.18) 42%,
      rgba(253,246,238,.72) 72%,
      var(--cr) 94%,
      var(--cr) 100%
    );
  }

  .main-stage{margin-top:12px;padding:.5rem 1rem 2rem;max-width:480px}

  .content-row{flex-direction:column;gap:1.5rem}

  .col-sep{
    display:block;
    width:50%;height:1px;
    margin:0 auto;
    background:linear-gradient(90deg,transparent,rgba(232,168,124,.3),transparent);
  }

  .info-col{width:100%}
  .player-col{width:100%;display:flex;justify-content:center}
  .avatar-zone{margin-top:-22px;margin-bottom:.6rem}
  .avatar-ring{width:100px;height:100px}

  /* 手机端去卡片 */
  .panel{
    background:transparent;
    border:none;
    border-radius:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:none;
    padding:1.5rem .5rem 1rem;
  }
  .player-bare{padding:1rem .5rem}
  .record-player:hover{transform:none}

  .nickname{font-size:1.4rem}
  .music-title{font-size:.96rem;line-height:1.35}
  .record-player{width:160px;height:160px}
  .record-label{width:48px;height:48px;font-size:.45rem}
  .tonearm{top:-6px;right:-8px;width:62px;height:50px}
}

@media (max-width:400px) {
  .main-stage{margin-top:10px;padding:.4rem .7rem 1.5rem}
  .content-row{gap:1.2rem}
  .info-col{width:100%}
  .player-col{width:100%}
  .avatar-zone{margin-top:-18px}
  .avatar-ring{width:88px;height:88px}
  .record-player{width:140px;height:140px}
  .music-title{font-size:.92rem}
  .tags{gap:.35rem}
  .tag{font-size:.7rem;padding:.22rem .65rem}
}