/* ==========================================================================
   星辰手机开业邀请函 · H5 样式
   配色：中国红 #C81E28 / 深红 #8C0F14 / 鎏金 #E8B54B / 浅金 #F6DE9A
        米白 #FFF9F2 / 墨黑 #2A1012
   ========================================================================== */

:root{
  --red:#C81E28;
  --red-deep:#8C0F14;
  --red-dark:#5A0307;
  --gold:#E8B54B;
  --gold-lt:#F6DE9A;
  --gold-dk:#B98A24;
  --cream:#FFF9F2;
  --ink:#2A1012;
  --ink-2:#4A3730;
  --muted:#8A6E64;
  --muted-2:#B0988C;
  --maxw:480px;
  --pad:22px;
  --safe-b:env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after{box-sizing:border-box}

/* 🚨 hidden 属性必须真的隐藏：
   下方各全屏层都写了 display:flex，会覆盖 [hidden] 的默认 display:none，
   导致"标了 hidden 却依然遮住整屏、拦截所有点击"。这里强制兜底。 */
[hidden]{display:none !important}

html,body{
  margin:0;padding:0;
  background:#0A0809;
  color:var(--ink);
  font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
body{overflow-x:hidden}

img{display:block;max-width:100%;border:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
p,h1,h2,h3,h4{margin:0}

/* ---------- 加载层 ---------- */
.loader{
  position:fixed;inset:0;z-index:9000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:linear-gradient(160deg,#8C0F14 0%,#5A0307 60%,#2A0104 100%);
  transition:opacity .5s ease,visibility .5s ease;
}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader-ring{position:relative;display:grid;place-items:center}
.loader-arc{transform-origin:40px 40px;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-word{
  position:absolute;font-family:"Noto Serif SC",serif;font-weight:700;
  font-size:26px;color:var(--gold-lt);
}
.loader-text{font-size:12px;letter-spacing:2px;color:rgba(246,222,154,.62)}

/* ---------- 音乐开关 ---------- */
.music-btn{
  position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:16px;z-index:8000;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--gold-lt);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(232,181,75,.55);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease,opacity .3s;
  animation:musicPulse 2.4s ease-in-out infinite;
}
.music-btn svg{position:absolute;transition:opacity .3s ease,transform .3s ease}
.music-btn .music-off{opacity:0;transform:scale(.7)}
.music-btn.is-off{animation:none;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.25);opacity:.75}
.music-btn.is-error{border-color:rgba(255,120,120,.9);background:rgba(180,30,30,.4)}
.music-btn.is-error::after{
  content:"";position:absolute;right:0;bottom:0;
  width:11px;height:11px;border-radius:50%;
  background:#FF6B6B;border:2px solid rgba(10,8,9,.85);
}
.music-btn.is-off .music-on{opacity:0;transform:scale(.7)}
.music-btn.is-off .music-off{opacity:1;transform:scale(1)}
.music-btn.is-playing{box-shadow:0 0 16px rgba(232,181,75,.5)}
.music-btn.is-playing .music-on{animation:noteSpin 3.6s linear infinite}
@keyframes noteSpin{to{transform:rotate(360deg)}}
@keyframes musicPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,181,75,.42)}
  50%{box-shadow:0 0 0 10px rgba(232,181,75,0)}
}
/* 第 2 屏浅底时改用深色描边，保证可见 */
.music-btn.on-light{
  background:rgba(200,30,40,.09);
  border-color:rgba(200,30,40,.32);
  color:var(--red-deep);
}
.music-btn.on-light .music-off path:last-child{stroke:#C81E28}

/* ---------- 舞台 ---------- */
.stage{width:100%;max-width:var(--maxw);margin:0 auto;background:#0A0809}
.screen{position:relative;width:100%;overflow:hidden}

/* ==========================================================================
   第 1 屏 · 封面
   ========================================================================== */
.screen--cover{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  color:#fff;
}
.cover-bg,.cover-glow{position:absolute;inset:0;pointer-events:none}
.cover-bg{background:linear-gradient(170deg,#B8111B 0%,#8C0F14 45%,#4A0206 100%)}
.cover-glow{
  background:radial-gradient(60% 42% at 50% 16%,
    rgba(255,199,90,.34) 0%,rgba(255,140,45,.1) 52%,rgba(140,15,20,0) 100%);
}

/* 灯笼 */
.lantern{
  position:absolute;top:76px;width:76px;
  animation:sway 4.2s ease-in-out infinite;
  transform-origin:50% 0;
}
.lantern svg{width:100%;height:auto}
.lantern--l{left:6px;animation-delay:0s}
.lantern--r{right:6px;animation-delay:1.6s}
@keyframes sway{
  0%,100%{transform:rotate(-4deg)}
  50%{transform:rotate(4deg)}
}

/* 礼花星点 */
.sparkles{position:absolute;inset:0;pointer-events:none}
.sparkles i{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);border-radius:50%;
  background:var(--gold-lt);
  animation:twinkle 2.6s ease-in-out infinite;
  animation-delay:var(--d);
}
@keyframes twinkle{
  0%,100%{opacity:.15;transform:scale(.6)}
  50%{opacity:.95;transform:scale(1.25)}
}

/* 封面内容 */
.cover-inner{
  position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(28px + env(safe-area-inset-top,0px)) var(--pad) calc(26px + var(--safe-b));
}
.cover-top,.cover-mid{display:flex;flex-direction:column;align-items:center}

.tag{
  font-size:11px;letter-spacing:1.5px;
  color:var(--gold-lt);
  border:1px solid rgba(232,181,75,.7);
  border-radius:4px;padding:6px 14px;
}

.hero-art{width:min(62vw,230px);margin:12px 0 0}
.hero-art svg{width:100%;height:auto;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.32));
  animation:heroFloat 5s ease-in-out infinite}
@keyframes heroFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

.title-block{text-align:center;margin-top:12px}
.title-main{
  font-family:"Noto Serif SC","Songti SC",serif;
  font-weight:900;font-size:clamp(40px,12.5vw,52px);
  line-height:1.2;letter-spacing:3px;
  color:var(--gold-lt);
  text-shadow:0 4px 16px rgba(90,3,7,.6);
}
.title-sub{
  margin-top:4px;font-size:11px;letter-spacing:5px;
  color:var(--gold);font-weight:500;
}

/* 分隔线 */
.divider{display:flex;align-items:center;gap:8px;margin-top:22px}
.divider span{display:block;width:44px;height:2px;border-radius:1px;background:var(--gold);opacity:.65}

.shop-name{
  margin-top:14px;text-align:center;
  font-family:"Noto Serif SC","Songti SC",serif;
  font-weight:700;font-size:19px;line-height:1.5;
  color:#FFF8EC;
}

/* 信息卡 */
.info-card{
  width:100%;margin-top:18px;
  padding:16px 18px;border-radius:12px;
  display:flex;flex-direction:column;gap:12px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(232,181,75,.4);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.info-row{display:flex;align-items:center;gap:10px;font-size:13px;color:#FFEFD2}
.info-row svg{flex:none}

/* 进入按钮 */
.btn-enter{
  width:min(100%,240px);height:52px;margin-top:26px;
  border-radius:26px;
  font-size:15px;font-weight:500;color:#7A0A12;
  background:linear-gradient(135deg,#FADDA0 0%,#E8B54B 100%);
  box-shadow:0 8px 24px rgba(232,181,75,.45);
  transition:transform .2s ease,box-shadow .2s ease;
  animation:btnBreathe 2.6s ease-in-out infinite;
}
.btn-enter:active{transform:scale(.96);box-shadow:0 4px 14px rgba(232,181,75,.4)}
@keyframes btnBreathe{
  0%,100%{box-shadow:0 8px 24px rgba(232,181,75,.45)}
  50%{box-shadow:0 8px 32px rgba(232,181,75,.72)}
}

.scroll-hint{
  position:absolute;left:50%;bottom:calc(8px + var(--safe-b));
  transform:translateX(-50%);
  opacity:.62;animation:bounce 1.8s ease-in-out infinite;
}
@keyframes bounce{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,7px)}
}

/* ==========================================================================
   第 2 屏 · 内容
   ========================================================================== */
.screen--body{background:var(--cream);padding-bottom:calc(30px + var(--safe-b))}

.body-head{
  padding:calc(28px + env(safe-area-inset-top,0px)) var(--pad) 24px;
  background:linear-gradient(160deg,#B8111B 0%,#8C0F14 100%);
}
.body-head h2{
  font-family:"Noto Serif SC","Songti SC",serif;
  font-weight:700;font-size:22px;line-height:1.35;
  color:var(--gold-lt);
}
.body-head p{margin-top:5px;font-size:12px;color:#F0C9A0}

.body-inner{
  display:flex;flex-direction:column;gap:22px;
  padding:24px var(--pad) 0;
}

/* 板块标题 */
.sec-head{display:flex;align-items:center;gap:8px}
.sec-bar{width:4px;height:18px;border-radius:2px;background:var(--red);flex:none}
.sec-head h3{
  flex:1;
  font-family:"Noto Serif SC","Songti SC",serif;
  font-weight:700;font-size:17px;color:var(--ink);
}
.sec-more{font-size:11px;color:var(--muted-2)}

/* 轮播 */
.swiper{position:relative;border-radius:12px;overflow:hidden;background:#EFE4DA}
.swiper-track{
  display:flex;
  transition:transform .38s cubic-bezier(.25,.8,.3,1);
  will-change:transform;
}
.swiper-slide{flex:0 0 100%;aspect-ratio:16/9;background:#EFE4DA}
.swiper-slide img{width:100%;height:100%;object-fit:cover}

.swiper-dots{
  position:absolute;left:0;right:0;bottom:10px;
  display:flex;justify-content:center;gap:5px;
}
.swiper-dots i{
  display:block;width:5px;height:5px;border-radius:3px;
  background:rgba(255,255,255,.55);
  transition:width .3s ease,background .3s ease;
}
.swiper-dots i.is-active{width:16px;background:var(--gold-lt)}

/* 缩略图 */
.thumb-row{
  display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
}
.thumb{
  position:relative;aspect-ratio:1;border-radius:7px;overflow:hidden;
  opacity:.62;transition:opacity .25s ease,transform .25s ease;
  outline:2px solid transparent;outline-offset:-2px;
}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.is-active{opacity:1;outline-color:var(--gold)}
.thumb:active{transform:scale(.94)}

/* 优惠卡 */
.coupon-list{display:flex;flex-direction:column;gap:12px}
.coupon{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:12px;
  background:#fff;border:1px solid #F0DBCE;
}
.coupon--hl{
  background:linear-gradient(135deg,#FFF4E6 0%,#FCE6D3 100%);
  border-color:rgba(232,181,75,.55);
}
.coupon-badge{
  flex:none;width:62px;height:62px;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:#FAEDC2;color:#A8741A;
}
.coupon--hl .coupon-badge{background:linear-gradient(160deg,#D9282F 0%,#9C0810 100%);color:var(--gold-lt)}
.coupon-badge strong{font-size:16px;line-height:1.1;font-weight:700}
.coupon--hl .coupon-badge strong{font-family:"Inter",sans-serif;font-size:17px}
.coupon-badge small{font-size:9px;opacity:.9}
.coupon-info{flex:1;min-width:0}
.coupon-info h4{font-size:14px;font-weight:600;color:var(--ink)}
.coupon-info p{margin-top:4px;font-size:11px;line-height:1.55;color:var(--muted)}
.coupon-btn{
  flex:none;height:32px;padding:0 14px;border-radius:16px;
  font-size:12px;font-weight:500;color:var(--red);
  border:1px solid var(--red);
  transition:transform .2s ease;
}
.coupon-btn--fill{
  color:#7A0A12;border:0;
  background:linear-gradient(135deg,#FADDA0 0%,#E8B54B 100%);
}
.coupon-btn:active{transform:scale(.94)}

/* 海报 */
.poster-wrap{position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(232,181,75,.45)}
.poster-wrap img{width:100%;aspect-ratio:16/9;object-fit:cover}
.poster-tag{
  position:absolute;left:12px;top:12px;
  padding:5px 10px;border-radius:4px;
  font-size:10px;font-weight:500;
  color:var(--gold-lt);background:rgba(140,15,20,.92);
}

/* 致辞 */
.letter{
  position:relative;
  padding:20px;border-radius:12px;
  background:#fff;border:1px solid rgba(232,181,75,.4);
}
.letter-quote{margin-bottom:10px}
.letter p{font-size:13px;line-height:1.85;color:var(--ink-2)}
.letter-sign{
  margin-top:12px;text-align:right;
  font-size:12px;font-weight:500;color:#A8741A;
}

/* ==========================================================================
   第 3 屏 · 到店
   ========================================================================== */
.screen--nav{
  min-height:100vh;min-height:100svh;
  padding:calc(24px + env(safe-area-inset-top,0px)) 0 calc(30px + var(--safe-b));
  color:#fff;
}
.nav-bg,.nav-glow{position:absolute;inset:0;pointer-events:none}
.nav-bg{background:linear-gradient(160deg,#4A0206 0%,#8C0F14 45%,#B8111B 100%)}
.nav-glow{
  background:radial-gradient(58% 34% at 50% 82%,
    rgba(255,199,90,.3) 0%,rgba(255,140,45,.09) 52%,rgba(140,15,20,0) 100%);
}
.nav-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:16px;
  padding:0 var(--pad);
}

/* 荣誉徽章 */
.honor{display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 0 4px;text-align:center}
.honor-medal{width:56px;height:56px}
.honor-medal svg{width:100%;height:auto;
  animation:heroFloat 4.6s ease-in-out infinite}
.honor h2{
  font-family:"Noto Serif SC","Songti SC",serif;
  font-weight:700;font-size:15px;color:var(--gold-lt);
}
.honor p{font-size:11px;color:#E0A98F}

/* 地图卡 */
.map-card{border-radius:12px;overflow:hidden;background:#fff}
.map-box{position:relative;height:140px;background:#EFE4DA}
.map-box img{width:100%;height:100%;object-fit:cover}
.map-pin{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-100%);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));
  animation:pinDrop .9s cubic-bezier(.34,1.4,.5,1) both;
}
@keyframes pinDrop{
  from{transform:translate(-50%,-190%);opacity:0}
  to{transform:translate(-50%,-100%);opacity:1}
}
.map-info{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.map-addr{font-size:13px;font-weight:500;line-height:1.55;color:var(--ink)}
.map-meta{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}

/* 按钮行 */
.action-row{display:flex;gap:12px}
.btn-gold,.btn-ghost{
  flex:1;height:48px;border-radius:24px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;font-weight:500;text-decoration:none;
  transition:transform .2s ease;
}
.btn-gold{
  color:#7A0A12;
  background:linear-gradient(135deg,#FADDA0 0%,#E8B54B 100%);
  box-shadow:0 6px 20px rgba(232,181,75,.4);
}
.btn-ghost{
  color:var(--gold-lt);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(232,181,75,.75);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn-gold:active,.btn-ghost:active{transform:scale(.96)}

/* 分享卡 */
.share-card{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(232,181,75,.3);
}
.share-text{flex:1;min-width:0}
.share-text h4{font-size:13px;font-weight:500;color:#FFEFD2}
.share-text p{margin-top:4px;font-size:11px;line-height:1.55;color:#D9A794}
.share-btn{
  flex:none;height:34px;padding:0 16px;border-radius:17px;
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;color:var(--gold-lt);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(232,181,75,.6);
  transition:transform .2s ease;
}
.share-btn:active{transform:scale(.94)}

.nav-foot{text-align:center;font-size:10px;color:#B0806E;padding-top:2px}

/* ==========================================================================
   全屏图片预览
   ========================================================================== */
.viewer{
  position:fixed;inset:0;z-index:9500;
  display:flex;flex-direction:column;
  background:#0A0809;
  opacity:0;transition:opacity .28s ease;
}
.viewer.is-open{opacity:1}
.viewer-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top,0px)) 18px 12px;
}
.viewer-count{font-size:13px;font-weight:500;color:#EDE4DA;font-family:"Inter",sans-serif}
.viewer-close{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.12);
}
.viewer-stage{
  flex:1;min-height:0;
  display:grid;place-items:center;
  padding:0 20px;
  overflow:hidden;
}
.viewer-stage img{
  max-width:100%;max-height:100%;
  border-radius:10px;object-fit:contain;
  border:1px solid rgba(232,181,75,.3);
  transition:transform .3s ease;
}
.viewer-caption{
  padding:16px 24px calc(28px + var(--safe-b));
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
}
.viewer-title{font-size:14px;font-weight:500;color:#FFF8EC}
.viewer-tip{font-size:11px;color:#8A7B72}
.viewer-dots{display:flex;gap:5px;margin-top:6px}
.viewer-dots i{
  display:block;width:4px;height:4px;border-radius:2px;background:#5A4F49;
  transition:width .3s ease,background .3s ease;
}
.viewer-dots i.is-active{width:16px;background:var(--gold)}

/* ==========================================================================
   微信分享提示
   ========================================================================== */
.wechat-tip{
  position:fixed;inset:0;z-index:9800;
  display:flex;flex-direction:column;align-items:flex-end;
  padding:12px 28px 0 0;
  background:rgba(10,8,9,.86);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s ease;
}
.wechat-tip.is-open{opacity:1}
.wechat-arrow{margin-right:6px}
.wechat-tip p{margin-top:16px;font-size:15px;color:var(--gold-lt);text-align:center;width:100%;padding-right:0}

/* ==========================================================================
   动效：入场
   ========================================================================== */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .62s ease,transform .62s cubic-bezier(.22,.9,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   分享海报面板
   ========================================================================== */
.poster-sheet{
  position:fixed;inset:0;z-index:9600;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity .3s ease;
}
.poster-sheet.is-open{opacity:1}
.poster-mask{position:absolute;inset:0;background:rgba(10,8,9,.82);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.poster-body{
  position:relative;z-index:2;
  width:100%;max-width:min(420px,92vw);
  max-height:92vh;
  display:flex;flex-direction:column;
  background:linear-gradient(175deg,#2A0104 0%,#1A0103 100%);
  border-radius:20px 20px 0 0;
  border-top:1px solid rgba(232,181,75,.42);
  padding-bottom:calc(14px + var(--safe-b));
  transform:translateY(16px);
  transition:transform .34s cubic-bezier(.22,.9,.3,1);
}
.poster-sheet.is-open .poster-body{transform:translateY(0)}

.poster-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 12px;flex:none;
}
.poster-head h4{
  font-family:"Noto Serif SC","Songti SC",serif;
  font-size:16px;font-weight:700;color:var(--gold-lt);
}
.poster-x{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;color:#D9BE8A;
  background:rgba(255,255,255,.09);
}

/* 图片区：横向留白，保证长按菜单能正常弹出 */
.poster-scroll{
  flex:1;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 18px;
  display:flex;justify-content:center;
}
.poster-img-wrap{
  width:100%;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(232,181,75,.4);
  box-shadow:0 8px 28px rgba(0,0,0,.5);
}
.poster-img-wrap img{
  display:block;width:100%;height:auto;
  /* 关键：允许长按保存，不要禁用触摸 */
  -webkit-touch-callout:default;
  -webkit-user-select:auto;user-select:auto;
  pointer-events:auto;
}

.poster-tip{
  flex:none;text-align:center;
  font-size:12.5px;color:#E0BE85;
  padding:14px 18px 4px;line-height:1.5;
}
.poster-acts{
  flex:none;display:flex;gap:10px;
  padding:12px 18px 4px;
}
.poster-act{
  flex:1;height:44px;border-radius:22px;
  font-size:14px;font-weight:500;
  display:grid;place-items:center;
  transition:transform .2s ease,opacity .2s ease;
}
.poster-act:active{transform:scale(.96)}
.poster-act--main{
  background:linear-gradient(135deg,#F0C860 0%,#D69B2A 100%);
  color:#5A0307;font-weight:700;
  box-shadow:0 4px 14px rgba(232,181,75,.3);
}
.poster-act--ghost{
  color:var(--gold-lt);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(232,181,75,.5);
}

/* 桌面端居中显示 */
@media (min-width:560px){
  .poster-sheet{align-items:center}
  .poster-body{border-radius:20px;max-height:88vh}
}

/* 减少动效偏好 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}