/* ============================================
   婚礼纪级特效引擎 · 公共样式
   配合 婚庆特效.js 使用
   ============================================ */

/* ---------- 顶部滚动进度条 ---------- */
.fx-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;z-index:999;
  background:linear-gradient(90deg,var(--fx-accent,#ff6b6b),var(--fx-accent2,#ffd166),var(--fx-accent,#ff6b6b));
  background-size:200% 100%;box-shadow:0 0 12px var(--fx-accent,#ff6b6b);
  transition:width .15s linear;border-radius:0 4px 4px 0;
}

/* ---------- 全屏粒子画布 ---------- */
.fx-canvas{
  position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
}

/* ---------- 信封开场动画 ---------- */
.fx-envelope-wrap{
  position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;
  transition:opacity .9s ease,visibility .9s ease;
}
.fx-envelope-wrap.fx-done{opacity:0;visibility:hidden;pointer-events:none;}
.fx-env-bg{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 30%,var(--fx-bg2,#b8455a),var(--fx-bg,#7a1630) 70%);
}
.fx-env-spark{
  position:absolute;inset:0;opacity:.5;
  background:radial-gradient(circle at 20% 20%,rgba(255,215,130,.35),transparent 45%),
             radial-gradient(circle at 80% 70%,rgba(255,215,130,.25),transparent 45%),
             radial-gradient(circle at 65% 15%,rgba(255,255,255,.18),transparent 40%);
}
.fx-env-title{
  position:relative;font-size:clamp(26px,8vw,40px);letter-spacing:.3em;color:#ffe9b8;
  margin-bottom:10px;text-shadow:0 0 24px rgba(255,215,130,.8);
  animation:fxTitlePulse 2.4s ease-in-out infinite;
}
@keyframes fxTitlePulse{0%,100%{text-shadow:0 0 18px rgba(255,215,130,.6);}50%{text-shadow:0 0 36px rgba(255,215,130,1);}}
.fx-env-sub{
  position:relative;font-size:14px;letter-spacing:.5em;color:rgba(255,233,184,.8);margin-bottom:34px;
}
.fx-envelope{position:relative;width:min(300px,78vw);height:196px;cursor:pointer;perspective:900px;}
.fx-envelope .fx-env-back{
  position:absolute;inset:0;background:linear-gradient(160deg,var(--fx-env2,#e8a54a),var(--fx-env,#c07a2a));
  border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.fx-envelope .fx-env-front{
  position:absolute;inset:0;border-radius:10px;overflow:hidden;z-index:4;
  background:linear-gradient(160deg,var(--fx-env2,#e8a54a),var(--fx-env,#c07a2a));
}
.fx-env-front::before,.fx-env-front::after{
  content:"";position:absolute;bottom:0;width:50%;height:52%;z-index:6;
  background:linear-gradient(160deg,var(--fx-env2,#e8a54a),var(--fx-env,#b06d22));
}
.fx-env-front::before{left:0;clip-path:polygon(0 0,100% 0,0 100%);}
.fx-env-front::after{right:0;clip-path:polygon(0 0,100% 0,100% 100%);}
.fx-env-pocket{
  position:absolute;left:0;bottom:0;width:100%;height:54%;z-index:5;
  background:linear-gradient(180deg,var(--fx-env,#c07a2a),var(--fx-env3,#92591d));
  border-radius:0 0 10px 10px;
}
.fx-env-flap{
  position:absolute;top:0;left:0;width:100%;height:100%;z-index:7;
  background:linear-gradient(160deg,var(--fx-env3,#c98a35),var(--fx-env2,#e0a04a));
  clip-path:polygon(0 0,50% 62%,100% 0);
  transform-origin:top center;transition:transform .9s cubic-bezier(.6,.05,.28,.91);
  transform:rotateX(0deg);
}
.fx-envelope.fx-open .fx-env-flap{transform:rotateX(180deg);}
.fx-env-letter{
  position:absolute;left:10%;width:80%;height:150px;top:34px;z-index:3;
  background:linear-gradient(180deg,#fffdf6,#fdf3df);
  border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  transition:transform 1s cubic-bezier(.22,1,.36,1);
  transform:translateY(0);
}
.fx-envelope.fx-open .fx-env-letter{transform:translateY(-86px) scale(1.03);}
.fx-env-letter .fx-letter-h{font-size:30px;letter-spacing:.2em;color:var(--fx-accent,#c0392b);}
.fx-env-letter .fx-letter-s{font-size:13px;letter-spacing:.4em;color:#b3906a;}
.fx-env-seal{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;
  width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--fx-accent2,#ffd166),var(--fx-accent,#c0392b));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;
  box-shadow:0 6px 18px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,255,255,.4);
  transition:transform .9s .1s cubic-bezier(.6,.05,.28,.91),opacity .4s;
  animation:fxSealPulse 2s ease-in-out infinite;
}
@keyframes fxSealPulse{0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 0 0 rgba(255,215,130,.6);}50%{box-shadow:0 6px 24px rgba(0,0,0,.5),0 0 0 18px rgba(255,215,130,0);}}
.fx-envelope.fx-open .fx-env-seal{transform:translate(-50%,-50%) scale(.2);opacity:0;}
.fx-env-hint{
  position:relative;margin-top:36px;font-size:15px;letter-spacing:.35em;color:#ffe9b8;
  animation:fxHint 1.8s ease-in-out infinite;
}
@keyframes fxHint{0%,100%{opacity:.55;}50%{opacity:1;}}

/* ---------- 音乐浮动按钮 ---------- */
.fx-music-btn{
  position:fixed;right:16px;bottom:18px;z-index:900;width:52px;height:52px;border-radius:50%;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;
  background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.4);color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:transform .3s ease;
}
.fx-music-btn:hover{transform:scale(1.1);}
.fx-music-btn .fx-music-icon{animation:fxSpin 3s linear infinite;}
.fx-music-btn.fx-muted .fx-music-icon{animation:none;opacity:.5;}
@keyframes fxSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.fx-music-btn .fx-ring{
  position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(255,255,255,.5);
  animation:fxRing 2s ease-out infinite;
}
.fx-music-btn.fx-muted .fx-ring{display:none;}
@keyframes fxRing{0%{transform:scale(.8);opacity:1;}100%{transform:scale(1.5);opacity:0;}}

/* ---------- 顶部回顶按钮 ---------- */
.fx-top-btn{
  position:fixed;right:16px;bottom:80px;z-index:899;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);cursor:pointer;background:rgba(255,255,255,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:18px;
  display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.fx-top-btn.fx-show{opacity:1;visibility:visible;}

/* ---------- 照片轮播 ---------- */
.fx-swiper{
  position:relative;overflow:hidden;border-radius:14px;touch-action:pan-y;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}
.fx-swiper .fx-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.22,1,.36,1);}
.fx-swiper .fx-slide{flex:0 0 100%;min-width:100%;position:relative;}
.fx-swiper .fx-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.fx-swiper .fx-dots{
  position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:7px;z-index:5;
}
.fx-swiper .fx-dot{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;
  transition:width .3s ease,background .3s ease;
}
.fx-swiper .fx-dot.fx-on{width:22px;border-radius:6px;background:#fff;}
.fx-swiper .fx-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.2);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.5);
  color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transition:opacity .3s ease;
}
.fx-swiper:hover .fx-arrow{opacity:1;}
.fx-swiper .fx-prev{left:10px;}
.fx-swiper .fx-next{right:10px;}

/* ---------- 祝福墙 ---------- */
.fx-guest-wrap{margin-top:26px;}
.fx-guest-form{
  display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:14px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);
}
.fx-guest-form input,.fx-guest-form textarea{
  width:100%;border:none;border-radius:10px;padding:12px 14px;font-size:15px;
  background:rgba(255,255,255,.9);color:#333;outline:none;font-family:inherit;
}
.fx-guest-form textarea{min-height:70px;resize:none;}
.fx-guest-btn{
  border:none;border-radius:30px;padding:13px;font-size:16px;letter-spacing:.2em;cursor:pointer;
  background:linear-gradient(90deg,var(--fx-accent,#c0392b),var(--fx-accent2,#ff6b6b));
  color:#fff;font-weight:600;box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition:transform .25s ease,box-shadow .25s ease;
}
.fx-guest-btn:active{transform:scale(.96);}
.fx-guest-wall{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.fx-guest-card{
  padding:14px;border-radius:12px;position:relative;
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);
  animation:fxCardIn .6s cubic-bezier(.22,1,.36,1) both;
}
.fx-guest-card:nth-child(odd){transform:rotate(-1.6deg);}
.fx-guest-card:nth-child(even){transform:rotate(1.6deg);}
.fx-guest-card .fx-g-card-txt{font-size:14px;line-height:1.7;color:#fff;}
.fx-guest-card .fx-g-card-name{margin-top:8px;font-size:12px;color:rgba(255,255,255,.75);text-align:right;letter-spacing:.1em;}
@keyframes fxCardIn{from{opacity:0;transform:translateY(18px) scale(.9);}to{opacity:1;}}

/* ---------- 标题流光 ---------- */
.fx-shine{
  background:linear-gradient(100deg,var(--fx-accent2,#ffd166) 20%,#fff 40%,var(--fx-accent2,#ffd166) 60%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:fxShine 3.2s linear infinite;
}
@keyframes fxShine{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ---------- 金粉粒子 burst ---------- */
.fx-burst{position:fixed;inset:0;z-index:1200;pointer-events:none;overflow:hidden;}
.fx-burst span{
  position:absolute;width:10px;height:10px;border-radius:2px;opacity:1;
  animation:fxBurstFly 1.4s cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes fxBurstFly{
  0%{transform:translate(0,0) rotate(0);opacity:1;}
  100%{transform:translate(var(--bx),var(--by)) rotate(var(--br));opacity:0;}
}

/* ---------- 页面元素入场 ---------- */
.fx-reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1);}
.fx-reveal.fx-in{opacity:1;transform:none;}

@media (max-width:380px){
  .fx-guest-wall{grid-template-columns:1fr;}
}