/* ===================================================================
   致枫儿 · 浪漫表白页样式
   主题：枫叶 / 暖金绯红 / 异地想念
   =================================================================== */

:root{
  --bg1:#150810;
  --bg2:#2a0e1a;
  --bg3:#1a0a14;
  --gold:#f5b942;
  --amber:#ff9c4a;
  --crimson:#e23054;
  --rose:#ff6f91;
  --cream:#fff3e6;
  --soft:#f7d9c4;
  --maple:#ff5a3c;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Noto Serif SC","Songti SC",serif;
  background:var(--bg1);
  color:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}

/* ---------- 背景层 ---------- */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.aurora{
  position:fixed;inset:-20%;z-index:-1;
  background:
    radial-gradient(40% 50% at 20% 20%, rgba(226,48,84,.35), transparent 60%),
    radial-gradient(45% 55% at 85% 25%, rgba(245,185,66,.25), transparent 60%),
    radial-gradient(50% 60% at 50% 90%, rgba(255,90,60,.30), transparent 60%),
    linear-gradient(160deg,var(--bg2),var(--bg1) 45%,var(--bg3));
  filter:saturate(1.1);
  animation:auroraMove 18s ease-in-out infinite alternate;
}
@keyframes auroraMove{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.15) translate(-3%,-2%);}
}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}

main{position:relative;z-index:2;}

/* ---------- 启动遮罩 ---------- */
.enter{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%, #3a0f1f, #0d0508 80%);
  transition:opacity 1s ease, visibility 1s ease;
}
.enter.hide{opacity:0;visibility:hidden;}
.enter__inner{text-align:center;padding:24px;animation:floatUp 1.2s ease both;}
.enter__heart{font-size:64px;animation:beat 1.6s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(255,90,60,.8));}
.enter__title{
  font-family:"Ma Shan Zheng",cursive;
  font-size:clamp(48px,12vw,96px);letter-spacing:.15em;margin:.2em 0 .1em;
  background:linear-gradient(120deg,var(--gold),var(--rose),var(--amber));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 22px rgba(255,120,90,.45));
}
.enter__sub{color:var(--soft);opacity:.85;letter-spacing:.25em;font-size:14px;margin-bottom:2em;}
.enter__btn{
  font-family:"Noto Serif SC",serif;font-size:18px;letter-spacing:.2em;
  color:#2a0a12;font-weight:700;
  padding:16px 40px;border:none;border-radius:999px;cursor:pointer;
  background:linear-gradient(120deg,var(--gold),var(--amber),var(--rose));
  background-size:200% 200%;
  box-shadow:0 10px 30px rgba(255,120,90,.45),0 0 0 1px rgba(255,220,180,.4) inset;
  animation:btnGlow 3s ease infinite;
  transition:transform .25s ease;
}
.enter__btn:hover{transform:translateY(-3px) scale(1.04);}
.enter__btn:active{transform:scale(.97);}
.enter__hint{margin-top:18px;font-size:12px;color:var(--soft);opacity:.5;letter-spacing:.1em;}
@keyframes btnGlow{0%,100%{background-position:0 50%;}50%{background-position:100% 50%;}}
@keyframes beat{0%,100%{transform:scale(1);}25%{transform:scale(1.18);}40%{transform:scale(1);}55%{transform:scale(1.12);}}
@keyframes floatUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}

/* ---------- 音乐按钮 ---------- */
.music{
  position:fixed;top:22px;right:22px;z-index:40;
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,220,180,.4);
  background:rgba(40,12,22,.55);backdrop-filter:blur(8px);
  color:var(--gold);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .3s ease,box-shadow .3s ease;
}
.music:hover{transform:scale(1.08);box-shadow:0 0 24px rgba(255,150,90,.6);}
.music__disc{display:inline-block;}
.music.playing .music__disc{animation:spin 4s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;padding:80px 20px 40px;
}
.hero__glow{
  position:absolute;width:min(80vw,620px);height:min(80vw,620px);border-radius:50%;
  background:radial-gradient(circle,rgba(255,120,90,.30),transparent 65%);
  filter:blur(20px);animation:pulse 6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.8;}50%{transform:scale(1.12);opacity:1;}}

.photo{position:relative;width:min(66vw,300px);height:min(66vw,300px);margin-bottom:34px;
  transform-style:preserve-3d;transition:transform .2s ease;}
.photo__ring,.photo__ring--2{
  position:absolute;inset:-16px;border-radius:50%;
  border:2px solid transparent;
  background:linear-gradient(120deg,var(--gold),var(--rose),var(--amber),var(--crimson)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 9s linear infinite;
}
.photo__ring--2{inset:-30px;opacity:.5;animation-duration:14s;animation-direction:reverse;}
.photo__frame{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 6px rgba(20,8,16,.6),0 20px 60px rgba(226,48,84,.45),0 0 60px rgba(255,120,90,.4);
}
.photo__frame img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);}
.photo__shine{
  position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  background-size:250% 250%;animation:shine 5s ease-in-out infinite;
}
@keyframes shine{0%{background-position:120% 0;}60%,100%{background-position:-60% 0;}}
.photo__caption{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  font-family:"Ma Shan Zheng",cursive;font-size:20px;color:var(--cream);
  background:rgba(30,8,16,.7);padding:4px 18px;border-radius:999px;
  border:1px solid rgba(255,200,150,.35);white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}

.hero__name{
  font-family:"Ma Shan Zheng",cursive;font-size:clamp(64px,18vw,160px);line-height:1;
  letter-spacing:.08em;position:relative;
  background:linear-gradient(120deg,var(--gold) 0%,var(--rose) 40%,var(--amber) 70%,var(--crimson) 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px rgba(255,120,90,.5));
  animation:hueShift 6s ease infinite;
}
@keyframes hueShift{0%,100%{background-position:0 50%;}50%{background-position:100% 50%;}}
.hero__type{margin-top:22px;font-size:clamp(15px,4vw,22px);color:var(--soft);letter-spacing:.12em;min-height:1.6em;}
.caret{color:var(--gold);animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}

.scrolltip{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);text-align:center;
  color:var(--soft);opacity:.7;font-size:12px;letter-spacing:.15em;}
.scrolltip__mouse{width:22px;height:36px;border:2px solid var(--soft);border-radius:14px;margin:8px auto 0;position:relative;}
.scrolltip__mouse i{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:4px;height:7px;border-radius:2px;background:var(--gold);animation:wheel 1.6s ease infinite;}
@keyframes wheel{0%{opacity:0;top:6px;}30%{opacity:1;}100%{opacity:0;top:18px;}}

/* ---------- 通用区块 ---------- */
section{padding:14vh 22px;text-align:center;position:relative;}
.kicker{font-family:"Dancing Script",cursive;font-size:20px;color:var(--gold);letter-spacing:.2em;opacity:.9;margin-bottom:10px;}
.sec-title{font-family:"Noto Serif SC",serif;font-weight:700;font-size:clamp(24px,6vw,40px);line-height:1.5;margin-bottom:42px;
  text-shadow:0 4px 24px rgba(255,120,90,.3);}
.reveal{opacity:0;transform:translateY(50px);transition:opacity 1s ease,transform 1s ease;}
.reveal.in{opacity:1;transform:none;}

/* ---------- 计时器 ---------- */
.counter{display:flex;gap:clamp(8px,3vw,26px);justify-content:center;flex-wrap:wrap;}
.cbox{
  min-width:clamp(64px,20vw,108px);padding:22px 8px;border-radius:18px;
  background:linear-gradient(160deg,rgba(255,180,120,.14),rgba(226,48,84,.10));
  border:1px solid rgba(255,200,150,.25);backdrop-filter:blur(6px);
  box-shadow:0 12px 30px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.04) inset;
}
.cbox span{display:block;font-size:clamp(30px,8vw,52px);font-weight:700;
  background:linear-gradient(120deg,var(--gold),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;}
.cbox label{font-size:13px;color:var(--soft);letter-spacing:.2em;}
.counter__note{margin-top:26px;color:var(--soft);font-size:15px;letter-spacing:.1em;}

/* ---------- 异地地图 ---------- */
.map{display:flex;align-items:center;justify-content:center;gap:clamp(4px,2vw,18px);max-width:640px;margin:0 auto;}
.city{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto;}
.city__name{font-size:14px;color:var(--cream);letter-spacing:.1em;white-space:nowrap;}
.dot{width:16px;height:16px;border-radius:50%;background:var(--gold);position:relative;box-shadow:0 0 14px var(--amber);}
.city--me .dot{background:var(--rose);box-shadow:0 0 14px var(--rose);}
.dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid currentColor;color:var(--amber);animation:ping 2s ease-out infinite;opacity:.6;}
.city--me .dot::after{color:var(--rose);}
@keyframes ping{0%{transform:scale(.6);opacity:.8;}100%{transform:scale(2.2);opacity:0;}}
.link{position:relative;flex:1 1 auto;min-width:90px;height:60px;}
.link svg{width:100%;height:100%;overflow:visible;}
.link path{stroke:rgba(255,180,120,.55);stroke-width:2;stroke-dasharray:6 8;animation:dash 1.4s linear infinite;}
@keyframes dash{to{stroke-dashoffset:-28;}}
.link__heart{position:absolute;top:0;left:0;color:var(--rose);font-size:20px;filter:drop-shadow(0 0 8px var(--rose));offset-path:path("M10,30 C100,-10 200,70 290,30");animation:travel 4s ease-in-out infinite;}
@keyframes travel{0%{offset-distance:0%;}50%{offset-distance:100%;}50.01%{offset-distance:100%;}100%{offset-distance:0%;}}
.distance__text{margin-top:40px;font-size:clamp(16px,4.5vw,22px);line-height:1.9;color:var(--soft);}
.distance__text b{color:var(--gold);}

/* ---------- 情书 ---------- */
.letter{max-width:620px;margin:0 auto;text-align:left;
  background:linear-gradient(160deg,rgba(40,14,24,.6),rgba(20,8,16,.55));
  border:1px solid rgba(255,200,150,.2);border-radius:22px;
  padding:clamp(28px,6vw,52px);backdrop-filter:blur(8px);
  box-shadow:0 24px 60px rgba(0,0,0,.4);}
.letter .line{font-size:clamp(16px,4.4vw,21px);line-height:2.1;color:var(--cream);opacity:0;transform:translateY(14px);}
.letter .line.show{opacity:1;transform:none;transition:all .8s ease;}
.letter .line--big{font-family:"Ma Shan Zheng",cursive;font-size:clamp(24px,7vw,34px);color:var(--gold);margin:.3em 0;text-shadow:0 2px 18px rgba(255,150,90,.4);}
.letter .sign{text-align:right;margin-top:1.2em;color:var(--rose);font-style:italic;}

/* ---------- 告白 ---------- */
.vow-sec{padding-bottom:18vh;}
.vow{font-family:"Ma Shan Zheng",cursive;font-size:clamp(36px,11vw,80px);line-height:1.4;
  background:linear-gradient(120deg,var(--gold),var(--rose),var(--amber));
  background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hueShift 5s ease infinite;filter:drop-shadow(0 6px 30px rgba(255,120,90,.5));}
.vow small{font-family:"Noto Serif SC",serif;font-size:clamp(14px,4vw,20px);color:var(--soft);-webkit-text-fill-color:var(--soft);letter-spacing:.2em;}
.lovebtn{margin-top:40px;font-family:"Noto Serif SC",serif;font-size:16px;letter-spacing:.15em;
  color:var(--cream);padding:14px 32px;border-radius:999px;cursor:pointer;
  background:rgba(226,48,84,.18);border:1px solid rgba(255,150,120,.5);
  transition:all .3s ease;}
.lovebtn:hover{background:rgba(226,48,84,.35);transform:translateY(-2px);box-shadow:0 0 26px rgba(255,110,90,.5);}
.vow__secret{margin-top:28px;min-height:1.4em;font-size:clamp(16px,4.5vw,22px);color:var(--gold);
  font-family:"Ma Shan Zheng",cursive;letter-spacing:.08em;}

/* ---------- 页脚 ---------- */
.foot{padding:8vh 20px 12vh;text-align:center;color:var(--soft);}
.foot b{color:var(--gold);font-family:"Ma Shan Zheng",cursive;font-size:1.2em;}
.foot__date{margin-top:8px;font-size:12px;opacity:.5;letter-spacing:.2em;}

/* 漂浮的小爱心（JS 生成） */
.floaty{position:fixed;z-index:30;pointer-events:none;will-change:transform,opacity;user-select:none;}

/* ===================================================================
   特效增强层
   =================================================================== */

/* 细颗粒噪点，增加电影质感 */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 光标跟随光晕 */
.cursor-glow{position:fixed;left:0;top:0;width:360px;height:360px;border-radius:50%;
  z-index:6;pointer-events:none;transform:translate(-50%,-50%);opacity:0;
  transition:opacity .35s ease;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,150,90,.16),rgba(255,90,130,.08) 42%,transparent 70%);}

/* 点击涟漪 */
.ripple{position:fixed;z-index:31;width:14px;height:14px;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);border:2px solid rgba(255,180,120,.8);
  box-shadow:0 0 18px rgba(255,140,90,.6);animation:rippleOut .9s ease-out forwards;}
@keyframes rippleOut{to{width:200px;height:200px;opacity:0;border-width:1px;}}

/* 正在播放 */
.nowplaying{position:fixed;top:26px;right:84px;z-index:40;
  display:flex;align-items:center;font-size:13px;letter-spacing:.05em;color:var(--soft);
  background:rgba(40,12,22,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(255,200,150,.3);border-radius:999px;padding:8px 16px;
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .6s ease,opacity .5s ease,padding .4s ease;padding-left:0;padding-right:0;}
.nowplaying.show{max-width:60vw;opacity:1;padding-left:16px;padding-right:16px;}
.nowplaying span{background:linear-gradient(120deg,var(--gold),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500;}

/* 音乐按钮的声波条 */
.music__wave{display:none;align-items:flex-end;gap:2px;height:14px;}
.music.playing .music__disc{display:none;}
.music.playing .music__wave{display:flex;}
.music__wave i{width:3px;height:5px;border-radius:2px;background:var(--gold);animation:eq .9s ease-in-out infinite;}
.music__wave i:nth-child(2){animation-delay:.15s;}
.music__wave i:nth-child(3){animation-delay:.3s;}
.music__wave i:nth-child(4){animation-delay:.45s;}
@keyframes eq{0%,100%{height:4px;}50%{height:14px;}}

/* 主视觉旋转光束 */
.hero__rays{position:absolute;top:50%;left:50%;width:140vmax;height:140vmax;
  transform:translate(-50%,-55%);pointer-events:none;z-index:-1;opacity:.5;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,190,130,.07) 0deg 6deg, transparent 6deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 0%,transparent 55%);
  mask:radial-gradient(circle,#000 0%,transparent 55%);
  animation:spin 60s linear infinite;}

/* 照片周围的小星光 */
.sparkle{position:absolute;transform:translate(-50%,-50%);color:#fff;pointer-events:none;
  text-shadow:0 0 8px var(--gold);animation:twinkle 2.4s ease-in-out infinite;}
.sparkle::before{content:"✦";}
@keyframes twinkle{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.3);}50%{opacity:1;transform:translate(-50%,-50%) scale(1);}}

/* 计时盒微光呼吸 */
.cbox{animation:cardBreath 4s ease-in-out infinite;}
.cbox:nth-child(2){animation-delay:.4s;}
.cbox:nth-child(3){animation-delay:.8s;}
.cbox:nth-child(4){animation-delay:1.2s;}
@keyframes cardBreath{0%,100%{box-shadow:0 12px 30px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.04) inset;}
  50%{box-shadow:0 12px 36px rgba(226,48,84,.35),0 0 22px rgba(255,150,90,.25),0 0 0 1px rgba(255,200,150,.18) inset;}}

@media (max-width:480px){
  .photo__ring--2{inset:-22px;}
  .map{gap:2px;}
  .city__name{font-size:12px;}
  .cursor-glow{display:none;}
  .nowplaying{top:auto;bottom:22px;right:22px;}
}