/* ============================================================
   mememe · 0119
   一个单页电子贺卡。手机优先，先按 375px 调，再管桌面。
   配色只有四个：底、字、暖光、粉。
   ============================================================ */

:root{
  --bg:      #06060a;
  --ink:     #f4f0ec;
  --muted:   #8d8798;
  --warm:    #ffd6aa;   /* 灯光 */
  --pink:    #ffb3c7;   /* 点缀 */
  --line:    rgba(255,255,255,.10);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "PingFang SC",
              "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* 开灯之前不许滚 */
body.locked{ overflow:hidden; height:100svh; }


/* ============================================================
   0. 灯罩
   ============================================================ */
.veil{
  position:fixed; inset:0; z-index:100;
  background:#000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  cursor:pointer;
  transition:opacity 1.5s ease, visibility 1.5s;
}
body.lit .veil{ opacity:0; visibility:hidden; pointer-events:none; }

.veil-l1{
  font-family:Didot, Georgia, "Songti SC", serif;
  font-size:clamp(1.35rem, 6vw, 1.9rem);
  font-weight:400; letter-spacing:.14em; text-indent:.14em;
  color:#e9e3dc;
  opacity:0;
  animation:veilIn 1.4s .35s both;
}
.veil-l2{
  margin-top:clamp(18px,3.4vh,26px);
  font-size:clamp(11px,3.1vw,12.5px);
  letter-spacing:.34em; text-indent:.34em;
  color:#5d5866;
  animation:veilIn 1.4s .9s both;
}
.veil-dot{
  margin-top:clamp(26px,5vh,40px);
  width:5px; height:5px; border-radius:50%;
  background:var(--warm);
  box-shadow:0 0 14px 3px rgba(255,214,170,.45);
  animation:breathe 2.8s ease-in-out 1.6s infinite both;
}

@keyframes veilIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
@keyframes breathe{
  0%,100%{ opacity:.22; transform:scale(.85); }
  50%    { opacity:1;   transform:scale(1.15); }
}


/* ============================================================
   1. 首屏：灯光 + 三个 me + 名字
   ============================================================ */
.intro{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  overflow:hidden;
}

/* 灯光：从中间散开的一团暖光 */
.glow{
  position:absolute; top:44%; left:50%;
  width:180vmax; height:180vmax;
  transform:translate(-50%,-50%) scale(.12);
  border-radius:50%;
  background:radial-gradient(circle,
      rgba(255,214,170,.16) 0%,
      rgba(255,179,199,.07) 26%,
      rgba(255,214,170,.03) 46%,
      transparent 66%);
  opacity:0;
  transition:transform 2.6s cubic-bezier(.16,.8,.2,1), opacity 1.8s ease;
  pointer-events:none;
}
body.lit .glow{ transform:translate(-50%,-50%) scale(1); opacity:1; }

/* 三个 me：竖排，一个个亮起来 */
.me-stack{
  display:flex; flex-direction:column;
  align-items:center; gap:clamp(-2px, -0.3vh, 0px);
  transition:opacity .8s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}
.me{
  font-family:Didot, Georgia, serif;
  font-size:clamp(2.6rem, 13vw, 5.2rem);
  line-height:1.02;
  letter-spacing:.02em;
  color:transparent;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1), color .9s ease;
}
body.me1 .me1,
body.me2 .me2,
body.me3 .me3{
  opacity:1;
  transform:none;
  color:var(--ink);
}
/* 第三个变成她的名字和生日，前两个退场 */
body.named .me-stack{ opacity:0; transform:translateY(-10px) scale(.96); }

.identity{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
}
.name{
  font-family:Didot, "Playfair Display", Georgia, "Songti SC", serif;
  font-weight:400;
  font-size:clamp(3rem, 17vw, 8.5rem);
  line-height:1;
  letter-spacing:.04em;
  background:linear-gradient(100deg, #fff 0%, var(--pink) 38%, var(--warm) 72%, #fff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:0; transform:translateY(12px);
  transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.bday{
  margin-top:clamp(14px,2.6vh,22px);
  font-size:clamp(11px,3vw,13px);
  letter-spacing:.52em; text-indent:.52em;
  color:var(--pink);
  opacity:0; transform:translateY(8px);
  transition:opacity 1s .25s ease, transform 1s .25s cubic-bezier(.2,.8,.2,1);
}
body.named .name,
body.named .bday{ opacity:1; transform:none; }

/* 向下提示 */
.scroll-hint{
  position:absolute; bottom:clamp(24px,4.5vh,42px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; transition:opacity 1s .9s ease;
}
body.named .scroll-hint{ opacity:.55; }
.scroll-hint span{
  font-size:9.5px; letter-spacing:.4em; text-indent:.4em; color:var(--muted);
}
.scroll-hint i{
  display:block; width:1px; height:34px;
  background:linear-gradient(to bottom, var(--line), transparent);
  animation:drip 2.4s ease-in-out infinite;
}
@keyframes drip{
  0%,100%{ transform:translateY(-3px); opacity:.35; }
  50%    { transform:translateY(4px);  opacity:1; }
}


/* ============================================================
   2. 正文
   ============================================================ */
.body{
  padding:clamp(56px,10vh,110px) 7vw clamp(44px,8vh,80px);
  max-width:640px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
}

.work{
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#0d0d13;
}
.work img{ display:block; width:100%; height:auto; }

/* 没有图时的占位，替换成 img 之后可以删掉这段 */
.work-ph{
  aspect-ratio:4/5;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,179,199,.10), transparent 62%),
    linear-gradient(160deg, #14141c, #0a0a10);
}
.work-ph span{ font-size:12px; letter-spacing:.3em; text-indent:.3em; color:var(--muted); }
.work-ph em{ font-style:normal; font-size:10.5px; letter-spacing:.16em; color:#4d4956; }

.line{
  margin-top:clamp(34px,6.5vh,52px);
  font-family:Didot, "Songti SC", Georgia, serif;
  font-size:clamp(1.12rem, 4.6vw, 1.45rem);
  font-weight:400;
  line-height:1.95;
  letter-spacing:.06em;
  text-align:center;
  color:#e7e1da;
}

/* 三个入口 */
.links{
  width:100%;
  margin-top:clamp(40px,7vh,64px);
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.entry{
  display:flex; align-items:baseline; gap:16px;
  padding:19px 2px;
  border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit;
  background:none; border-left:0; border-right:0; border-top:0;
  font-family:inherit; font-size:inherit;
  text-align:left; cursor:pointer;
  transition:padding-left .4s cubic-bezier(.2,.8,.2,1), background .4s;
  -webkit-tap-highlight-color:transparent;
}
.entry:hover,
.entry:focus-visible{ padding-left:9px; outline:none; }
.entry:hover .entry-ti{ color:#fff; }

.entry-no{
  font-size:10px; letter-spacing:.18em; color:#4f4a59;
  min-width:18px; padding-top:2px;
}
.entry-ti{
  font-size:clamp(13.5px,3.7vw,15px);
  letter-spacing:.04em; color:#cdc7d2;
  transition:color .35s;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:10px;
}
.entry-ti em{
  font-style:normal;
  font-size:10.5px; letter-spacing:.16em;
  color:#6f6979;
  padding:3px 8px;
  border:1px solid var(--line); border-radius:999px;
}

.foot{
  margin-top:clamp(52px,9vh,84px);
  font-size:10px; letter-spacing:.2em;
  color:#4a4655;
  text-align:center;
}


/* ============================================================
   3. 引语弹层
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:9vw;
  background:rgba(4,4,8,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden;
  transition:opacity .55s ease, visibility .55s;
}
.modal.on{ opacity:1; visibility:visible; }
.modal-in{
  max-width:460px; width:100%;
  padding:clamp(28px,7vw,44px);
  border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(168deg, rgba(255,179,199,.075), rgba(255,214,170,.03));
  transform:translateY(12px);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  text-align:center;
}
.modal.on .modal-in{ transform:none; }
.quote{
  font-family:Didot, "Songti SC", Georgia, serif;
  font-size:clamp(1.02rem,4.2vw,1.25rem);
  line-height:2.05; letter-spacing:.05em; color:#ece6df;
}
.modal-close{
  margin-top:26px;
  background:none; border:1px solid var(--line); border-radius:999px;
  padding:11px 24px; cursor:pointer;
  font-family:inherit; font-size:10.5px; letter-spacing:.26em; text-indent:.26em;
  color:var(--muted);
  transition:border-color .35s, color .35s;
}
.modal-close:hover{ border-color:var(--pink); color:var(--pink); }


/* ============================================================
   4. 音乐按钮：默认静音
   ============================================================ */
.sound{
  position:fixed; top:max(16px, env(safe-area-inset-top)); right:16px;
  z-index:90;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  color:var(--muted);
  cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:color .3s, border-color .3s, background .3s;
  opacity:0; pointer-events:none;
}
body.named .sound{ opacity:1; pointer-events:auto; transition-delay:1.6s; }
.sound:hover{ color:var(--warm); border-color:rgba(255,214,170,.35); }
.sound:disabled{ cursor:default; }

/* 真的在响的时候：图标轻轻摆，外面一圈缓慢扩散
   这套呼吸圈是跟 ime-quiz 那版的 .bgmbtn.on::before 学的 */
.sound.playing{
  color:var(--warm);
  border-color:rgba(255,214,170,.42);
  background:rgba(255,214,170,.07);
}
.sound.playing::before{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:1.5px solid rgba(255,214,170,.30);
  animation:ring 3s ease-out infinite;
}
@keyframes ring{
  0%       { transform:scale(.88); opacity:.85; }
  70%,100% { transform:scale(1.32); opacity:0; }
}
.sound.playing svg{ animation:swing 4.4s ease-in-out infinite; }
@keyframes swing{
  0%,100%{ transform:rotate(-5deg); }
  50%    { transform:rotate(5deg); }
}

/* 没有音频文件时：变灰、不可点，但不报错 */
.sound.dead{ color:#3f3b48; border-color:rgba(255,255,255,.05); }

/* 静音时那条斜杠 */
.sound-off{
  position:absolute; width:20px; height:1px;
  background:currentColor; transform:rotate(-45deg);
  transition:opacity .3s, transform .3s;
}
.sound.playing .sound-off{ opacity:0; transform:rotate(-45deg) scaleX(0); }


/* ============================================================
   5. 滚动渐入
   ============================================================ */
.rv{
  opacity:0; transform:translateY(20px);
  transition:opacity .85s ease, transform .85s cubic-bezier(.2,.8,.2,1);
}
.rv.in{ opacity:1; transform:none; }


/* ============================================================
   6. 桌面端微调
   ============================================================ */
@media (min-width:760px){
  .body{ padding-left:0; padding-right:0; }
  .line{ letter-spacing:.1em; }
  .entry:hover{ background:linear-gradient(90deg, rgba(255,255,255,.03), transparent); }
}

/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}