/* =====================================================================
   妄想天使 · ANGELS OF DELUSION — 天使梦幻 · 轻奢展示站
   设计语言：珍珠白底 / 流金 / 柔粉·薰衣草渐变 / 光晕 / 毛玻璃
   ===================================================================== */

:root{
  --bg:#f4eefc;
  --pearl:#fffdfa;
  --ink:#352f4d;
  --ink-dim:#7d769b;
  --gold:#c8a24c;
  --gold-soft:#e7cf94;
  --rose:#e07aa6;
  --sage:#69bd92;
  --lav:#a98be0;
  --glass:rgba(255,255,255,.55);
  --glass-brd:rgba(255,255,255,.85);
  --shadow-soft:0 24px 60px rgba(150,120,180,.20);
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --display:"Cormorant Garamond","Noto Serif SC",serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans SC",system-ui,sans-serif;
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 820px at 14% 8%, rgba(231,207,148,.34), transparent 60%),
    radial-gradient(1000px 720px at 86% 18%, rgba(224,122,166,.22), transparent 60%),
    radial-gradient(1100px 900px at 50% 102%, rgba(169,139,224,.28), transparent 60%),
    linear-gradient(180deg,#fbf7ff 0%, #f2ebfb 100%);
  background-attachment:fixed;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold-soft);color:var(--ink)}

/* ---------- 背景层 ---------- */
#particles{position:fixed;inset:0;z-index:0;pointer-events:none}
.ambient-light{
  position:fixed;z-index:0;border-radius:50%;filter:blur(100px);
  opacity:.55;pointer-events:none;
  animation:float 22s ease-in-out infinite;
}
.light-a{width:46vw;height:46vw;left:-12vw;top:-10vw;background:radial-gradient(circle,rgba(224,122,166,.55),transparent 65%)}
.light-b{width:42vw;height:42vw;right:-12vw;top:30vh;background:radial-gradient(circle,rgba(200,162,76,.45),transparent 65%);animation-delay:-7s}
.light-c{width:40vw;height:40vw;left:25vw;bottom:-16vw;background:radial-gradient(circle,rgba(169,139,224,.55),transparent 65%);animation-delay:-12s}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(4vw,3vh) scale(1.08)}
  66%{transform:translate(-3vw,-2vh) scale(.95)}
}

/* ---------- 加载动画（光之觉醒）---------- */
#loader{
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(circle at 50% 45%,#fffdfa,#f1e9fb 70%,#ece2f8);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .9s ease,visibility .9s ease;
}
#loader.hide{opacity:0;visibility:hidden}
.loader-core{text-align:center;position:relative}
.loader-ring{
  width:120px;height:120px;margin:0 auto 22px;border-radius:50%;
  border:2px solid rgba(200,162,76,.22);
  border-top-color:var(--gold);border-right-color:var(--rose);
  animation:spin 1.4s linear infinite;
  box-shadow:0 0 44px rgba(231,207,148,.45),inset 0 0 30px rgba(224,122,166,.18);
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-logo{
  position:absolute;top:46px;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:6px;
  color:var(--gold);
}
.loader-text{font-family:var(--display);letter-spacing:8px;font-size:14px;color:var(--rose);margin-bottom:16px}
.loader-bar{width:240px;height:3px;background:rgba(200,162,76,.18);border-radius:3px;overflow:hidden;margin:0 auto}
.loader-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--rose));transition:width .2s}
.loader-sub{margin-top:14px;font-size:12px;color:var(--ink-dim);letter-spacing:2px}

/* ---------- 通用 ---------- */
.section{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:110px 24px}
.glass{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:20px;
  box-shadow:var(--shadow-soft);
}
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

.section-head{text-align:center;margin-bottom:54px}
.section-kicker{font-family:var(--display);letter-spacing:6px;font-size:13px;color:var(--gold);margin-bottom:14px}
.section-title{
  font-size:clamp(30px,5vw,52px);font-weight:700;letter-spacing:2px;
  font-family:var(--display);
  background:linear-gradient(90deg,#6b4f93,#c8a24c 55%,var(--rose));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-title em{font-style:normal;font-family:var(--display);font-size:.46em;color:var(--ink-dim);letter-spacing:3px;margin-left:10px}
.section-desc{color:var(--ink-dim);margin-top:14px;font-size:15px}

/* ---------- 首页 ---------- */
.hero{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;z-index:-1;
  background:url("../assets/img/aod_wallpaper_web.jpg") center 28%/cover no-repeat;
  filter:brightness(1.18) saturate(.9) contrast(.92);
  transform:scale(1.08);
  animation:heroZoom 26s ease-in-out infinite alternate;
}
@keyframes heroZoom{to{transform:scale(1.18) translateY(-2%)}}
.hero-vignette{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,253,250,.30), rgba(251,247,255,.82) 72%),
    linear-gradient(180deg, rgba(251,247,255,.66), rgba(242,235,251,.94) 60%, rgba(238,229,248,.98));
}
.hero-halo{
  position:absolute;top:50%;left:50%;width:min(78vw,760px);height:min(78vw,760px);
  transform:translate(-50%,-54%);z-index:1;pointer-events:none;
  background:radial-gradient(circle, rgba(231,207,148,.45) 0%, rgba(224,122,166,.18) 38%, transparent 66%);
  filter:blur(8px);
  animation:haloPulse 9s ease-in-out infinite;
}
@keyframes haloPulse{0%,100%{opacity:.85;transform:translate(-50%,-54%) scale(1)}50%{opacity:1;transform:translate(-50%,-54%) scale(1.06)}}
.hero-content{position:relative;z-index:3;padding:0 22px;max-width:900px}
.hero-badge{
  display:inline-block;font-family:var(--display);letter-spacing:5px;font-size:12px;
  color:var(--gold);border:1px solid rgba(200,162,76,.45);border-radius:30px;
  padding:8px 18px;margin-bottom:26px;background:rgba(255,255,255,.5);
  box-shadow:0 0 24px rgba(231,207,148,.35) inset;
}
.hero-title{line-height:1;margin-bottom:22px}
.hero-cn{
  display:block;font-size:clamp(58px,15vw,150px);font-weight:700;letter-spacing:8px;
  font-family:var(--display);
  background:linear-gradient(180deg,#6b4f93 8%,var(--gold) 55%,var(--rose));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 24px rgba(200,162,76,.35));
}
.hero-en{
  display:block;font-family:var(--display);font-weight:700;letter-spacing:clamp(4px,1.5vw,14px);
  font-size:clamp(14px,3.4vw,30px);color:var(--gold);margin-top:10px;
  text-shadow:0 0 22px rgba(231,207,148,.5);
}
.hero-tag{max-width:620px;margin:0 auto 38px;color:#5a5378;font-size:clamp(14px,2vw,18px);font-weight:400}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

.btn-primary{
  position:relative;font-family:var(--display);font-weight:700;letter-spacing:2px;font-size:15px;
  color:#fff;background:linear-gradient(90deg,var(--rose),var(--lav));
  padding:15px 34px;border-radius:40px;overflow:hidden;
  box-shadow:0 14px 34px rgba(224,122,166,.4);transition:transform .3s var(--ease),box-shadow .3s;
  border:0;cursor:pointer;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(169,139,224,.5)}
.btn-primary .arrow{display:inline-block;margin-left:8px;transition:transform .3s}
.btn-primary:hover .arrow{transform:translateY(4px)}
.btn-ghost{
  font-family:var(--display);font-weight:700;letter-spacing:2px;font-size:15px;color:var(--ink);
  background:var(--glass);border:1px solid rgba(200,162,76,.4);padding:15px 30px;border-radius:40px;
  cursor:pointer;backdrop-filter:blur(10px);transition:.3s;
}
.btn-ghost:hover{border-color:var(--rose);color:var(--rose);box-shadow:0 10px 30px rgba(224,122,166,.25)}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;text-align:center;color:var(--gold);font-family:var(--display);font-size:11px;letter-spacing:5px}
.scroll-line{width:1px;height:46px;margin:10px auto 0;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.scroll-line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--gold);animation:scrollDot 1.8s ease-in-out infinite}
@keyframes scrollDot{0%{top:-50%}100%{top:100%}}

/* ---------- 角色卡片（3D 翻转）---------- */
.card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:50px}
.flip-card{perspective:1400px;height:460px;cursor:pointer;outline:none}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .9s var(--ease);transform-style:preserve-3d}
.flip-card.flipped .flip-inner,.flip-card:focus-visible .flip-inner{transform:rotateY(180deg)}
.flip-card.active .flip-inner{outline:2px solid var(--accent);outline-offset:5px;border-radius:20px}
.flip-front,.flip-back{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.9);background:var(--glass);
  backdrop-filter:blur(10px);box-shadow:var(--shadow-soft);
}
.flip-front{
  background:radial-gradient(circle at 50% 72%, rgba(231,207,148,.22), rgba(255,255,255,.55) 55%);
}
.flip-front img{
  width:100%;height:100%;object-fit:contain;object-position:center bottom;transition:transform .6s var(--ease);
}
.flip-card:hover .flip-front img{transform:scale(1.06)}
.flip-front::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(255,253,250,.62));pointer-events:none}
.flip-front-meta{position:absolute;left:18px;bottom:16px;z-index:2}
.flip-front-meta .c-name{display:block;font-size:26px;font-weight:700;letter-spacing:2px;font-family:var(--display);color:var(--ink);text-shadow:0 2px 14px rgba(231,207,148,.7)}
.flip-front-meta .c-en{font-family:var(--display);font-size:12px;letter-spacing:3px;color:var(--accent)}
.flip-back{
  transform:rotateY(180deg);padding:26px 24px;display:flex;flex-direction:column;justify-content:center;gap:14px;
  background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(244,238,252,.72));
  box-shadow:0 0 34px -10px var(--accent) inset;
}
.stat-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed rgba(200,162,76,.35);padding-bottom:8px;font-size:14px}
.stat-row span{color:var(--ink-dim);font-size:12px;letter-spacing:1px}
.stat-row b{color:var(--ink);font-weight:600}
.flip-back-hint{margin-top:auto;font-family:var(--display);font-size:12px;letter-spacing:2px;color:var(--accent);text-align:right}

/* ---------- 全员档案 ---------- */
.roster{display:flex;flex-direction:column;gap:64px;margin-top:8px}
.char-profile{
  display:grid;grid-template-columns:0.82fr 1.18fr;gap:42px;align-items:center;
  padding:10px 6px;
}
.char-profile:nth-child(even){grid-template-columns:1.18fr 0.82fr}
.char-profile:nth-child(even) .char-portrait{order:2}
.char-portrait{
  position:relative;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.9);
  background:radial-gradient(circle at 50% 75%, rgba(231,207,148,.22), #ffffff 45%, #f2ebfb 82%);
  box-shadow:var(--shadow-soft);
}
.char-portrait img{
  width:100%;height:640px;object-fit:contain;object-position:center bottom;transition:transform 1.2s var(--ease);
}
.char-profile:hover .char-portrait img{transform:scale(1.04)}
@keyframes portIn{from{transform:scale(1.12) translateY(-12px);opacity:.4}to{transform:none;opacity:1}}
.portrait-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 72%,rgba(231,207,148,.35),transparent 60%);mix-blend-mode:normal}
.char-info{padding:34px 36px}
.info-en{font-family:var(--display);font-size:12px;letter-spacing:3px;color:var(--gold);margin-bottom:6px}
.info-name{font-size:clamp(34px,6vw,56px);font-weight:700;letter-spacing:3px;font-family:var(--display);
  background:linear-gradient(90deg,var(--ink),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.info-tags{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 22px}
.tag{font-size:12px;padding:6px 14px;border-radius:30px;border:1px solid rgba(200,162,76,.4);color:var(--ink-dim);background:rgba(255,255,255,.6)}
.info-block{margin-bottom:22px}
.info-block h4{font-family:var(--display);font-size:16px;letter-spacing:1px;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.info-block h4::before{content:"";width:18px;height:2px;background:var(--gold);box-shadow:0 0 10px rgba(200,162,76,.6)}
.skill-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.skill-list li{position:relative;padding-left:18px;font-size:14.5px;color:#4f4869}
.skill-list li::before{content:"✦";position:absolute;left:0;color:var(--accent)}
.skill-list b{color:var(--ink)}
.story{font-size:14.5px;color:#564f70;font-weight:400}

/* ---------- 收尾 ---------- */
.outro{text-align:center}
.outro-inner{padding:70px 36px;max-width:760px;margin:0 auto}
.outro-kicker{font-family:var(--display);letter-spacing:6px;font-size:13px;color:var(--rose);margin-bottom:18px}
.outro-title{font-size:clamp(26px,5vw,44px);font-weight:700;line-height:1.3;margin-bottom:20px;font-family:var(--display);
  background:linear-gradient(90deg,#6b4f93,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.outro-text{color:var(--ink-dim);margin-bottom:30px;font-size:15px}

/* ---------- 底部导航 ---------- */
.bottom-nav{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;
  display:flex;gap:6px;padding:8px;border-radius:50px;
  box-shadow:0 14px 44px rgba(150,120,180,.28),0 0 30px -12px rgba(231,207,148,.7);
}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 18px;border-radius:40px;color:var(--ink-dim);background:transparent;border:0;cursor:pointer;font-family:inherit;transition:.3s;min-width:64px}
.nav-item .nav-ico{font-size:18px;line-height:1;transition:.3s}
.nav-item .nav-label{font-size:11px;letter-spacing:1px}
.nav-item:hover,.nav-item.active{color:var(--ink)}
.nav-item:hover .nav-ico,.nav-item.active .nav-ico{color:var(--gold);transform:translateY(-2px)}
.nav-music.active{color:var(--ink)}
.nav-music.active .nav-ico{color:var(--rose);animation:eq 1s ease-in-out infinite}
@keyframes eq{0%,100%{transform:translateY(-2px) scale(1)}50%{transform:translateY(-2px) scale(1.2)}}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .char-profile,.char-profile:nth-child(even){grid-template-columns:1fr;gap:20px}
  .char-profile:nth-child(even) .char-portrait{order:0}
  .char-portrait img{height:auto;max-height:70vh}
  .char-info{padding:26px 22px}
}
@media (max-width:680px){
  .section{padding:80px 16px}
  .card-row{grid-template-columns:1fr;gap:18px}
  .flip-card{height:auto;perspective:none}
  .flip-inner{transform:none !important}
  .flip-front,.flip-back{position:relative;transform:none !important;backface-visibility:visible}
  .flip-back{display:none}
  .flip-card.flipped .flip-back{display:flex}
  .flip-card.flipped .flip-front{display:none}
  .nav-item{padding:9px 13px;min-width:54px}
  .hero-cn{letter-spacing:4px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.2s !important}
  .reveal{opacity:1;transform:none}
}