/* ==========================================================================
   20270101.com — v2 电影年鉴（hero 改造叠加层）
   只做「覆盖 + 新增」，不改 main.css 既有规则；删除本文件并移除 index.html
   中的引用即可回滚。目标：从「工具集合」变成「电影感的全球新年时刻」。
   设计语言：深空蓝 + 香槟金 / 编辑式排版 / 无容器数字 / 完整 3D 地球。
   ========================================================================== */

/* ---------------------------------------------------------------- 1. 令牌补色 */
:root{
  --gold-2:#f3d488;            /* 更亮的主金 */
  --champagne:#fbecc8;         /* 高光香槟 */
  --warm-glow:rgba(243,212,136,.42);
  --hairline:rgba(243,212,136,.28);
}

/* ---------------------------------------------------------------- 2. 首屏骨架 */
.hero{
  padding:clamp(104px,13vh,140px) 20px 56px;
  display:flex;align-items:flex-start;
}
.hero-inner{
  max-width:1040px;
  margin:0 auto;
  padding-bottom:0;
}

/* 眉标：重新启用，做成克制的细金线 */
.v2-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:10px;letter-spacing:.42em;color:var(--gold-2);
  opacity:.85;margin-bottom:22px;
}
.v2-eyebrow::before,.v2-eyebrow::after{
  content:"";width:38px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-2));
}
.v2-eyebrow::after{background:linear-gradient(90deg,var(--gold-2),transparent);}

/* 主标题：细体衬线，金色渐变收在第二行 */
.hero-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(38px,6.2vw,76px);
  line-height:1.06;letter-spacing:-.01em;
  color:var(--champagne);
  text-shadow:0 4px 40px rgba(2,6,18,.8);
}
.hero-sub{
  margin-top:16px;
  font-size:clamp(13px,1.4vw,16px);
  letter-spacing:.22em;color:var(--muted);
  text-transform:uppercase;
}

/* ---------------------------------------------------------------- 3. 午夜条 */
.hero-mine{
  position:relative;
  margin:clamp(26px,3.4vh,38px) auto 0;
  display:flex;align-items:center;justify-content:center;
  gap:18px;flex-wrap:wrap;
  padding:14px 26px;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  font-size:13px;color:var(--muted);
}
/* 暗底衬：保证文字在日出亮部上依然清晰 */
.hero-mine::before{
  content:"";position:absolute;inset:-1px;z-index:-1;
  background:
    radial-gradient(ellipse 70% 120% at 50% 50%,rgba(3,8,22,.82),rgba(3,8,22,.45) 70%,transparent),
    linear-gradient(90deg,transparent,rgba(243,212,136,.05),transparent);
}
.hero-mine .hm-city{display:inline-flex;align-items:center;gap:9px}
.hero-mine .hm-pin{
  width:7px;height:7px;border-radius:50%;background:var(--gold-2);
  box-shadow:0 0 0 3px rgba(243,212,136,.16),0 0 14px var(--gold-2);
}
.hero-mine .hm-city b{
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--champagne);font-size:14px;
}
.hero-mine .hm-dot{color:var(--gold-2);opacity:.6;font-size:10px}
.hero-mine .hm-zone{
  font-family:var(--font-mono);color:var(--gold-2);
  letter-spacing:.06em;font-size:12.5px;
}
.hero-mine .hm-when{display:inline-flex;align-items:baseline;gap:8px}
.hero-mine .hm-when strong{
  font-family:var(--font-display);font-size:24px;font-weight:600;
  color:#fff;line-height:1;
}
.hero-mine .hm-when em{font-style:normal;font-size:10px;letter-spacing:.18em;color:var(--muted)}
.hero-mine .hm-slot{
  display:inline-flex;align-items:baseline;gap:4px;
  font-family:var(--font-mono);color:var(--gold-2);
}
.hero-mine .hm-slot .hm-slot-l{font-size:9px;letter-spacing:.16em;opacity:.7}
.hero-mine .hm-slot b{font-size:14px;color:#fff;font-weight:600}
.hero-mine .hm-slot span{font-size:10px;opacity:.7}

/* ---------------------------------------------------------------- 4. 无容器倒计时 */
.v2-countdown{
  margin:clamp(28px,4vh,46px) auto 0;
  display:flex;align-items:flex-start;justify-content:center;
  background:none;border:0;padding:0;gap:0;
}
.v2-countdown .cd-unit{
  flex:0 0 auto;
  min-width:clamp(74px,10vw,132px);
  padding:6px clamp(10px,1.6vw,22px);
  background:none;border:0;
  position:relative;
}
.v2-countdown .cd-unit + .cd-unit::before{
  content:"";position:absolute;left:0;top:18%;height:64%;
  width:1px;background:linear-gradient(180deg,transparent,var(--hairline),transparent);
}
.v2-countdown .cd-num{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(46px,7vw,88px);
  font-weight:500;line-height:1;
  background:linear-gradient(180deg,#fff 0%,var(--champagne) 42%,var(--gold-2) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
  letter-spacing:.01em;
}
.v2-countdown .cd-label{
  margin-top:12px;display:block;
  font-size:9.5px;letter-spacing:.3em;color:var(--muted);
  text-transform:uppercase;
}
/* 秒数的呼吸微光：纯装饰，不依赖 DOM 变化 */
.v2-countdown #cdSeconds{
  filter:drop-shadow(0 0 10px rgba(243,212,136,.35));
  animation:cdBreath 2.4s ease-in-out infinite;
}
@keyframes cdBreath{
  0%,100%{filter:drop-shadow(0 0 6px rgba(243,212,136,.22))}
  50%{filter:drop-shadow(0 0 16px rgba(243,212,136,.55))}
}

/* 到达态：保持无容器，居中放大 */
.cd-arrived{text-align:center;margin-top:30px}
.cd-arrived .arrived-star{color:var(--gold-2);font-size:26px}
.cd-arrived h2{
  font-family:var(--font-display);font-size:clamp(30px,4vw,52px);
  color:var(--champagne);margin:10px 0;
}
.cd-arrived p{color:var(--muted);letter-spacing:.08em}

/* ---------------------------------------------------------------- 5. CTA */
.v2-cta{
  margin:clamp(30px,4.4vh,48px) auto 0;
  display:flex;align-items:center;justify-content:center;
  gap:20px;flex-wrap:wrap;
}
.v2-cta .btn-gold{
  border-radius:999px;
  min-height:56px;padding:0 42px;
  font-size:13px;letter-spacing:.18em;font-weight:600;
  box-shadow:0 10px 40px rgba(243,212,136,.32),inset 0 1px 0 rgba(255,255,255,.55);
}
.v2-textlink{
  background:none;border:0;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:color .25s,border-color .25s;
}
.v2-textlink:hover{color:var(--gold-2);border-bottom-color:var(--gold-2)}
.v2-dot{color:var(--gold-2);opacity:.5;font-size:10px}

/* ---------------------------------------------------------------- 6. 33 站队列 */
.v2-progress{
  display:block!important;
  width:min(100%,760px);
  margin:clamp(34px,5vh,56px) auto 0;
  border-top:1px solid var(--hairline);
  padding-top:16px;background:none;
}
.v2-progress .wp-head{
  display:flex!important;justify-content:space-between;align-items:baseline;
  gap:10px;flex-wrap:wrap;
  font-size:9px;letter-spacing:.28em;color:var(--gold-2);
}
.v2-progress .wp-right{font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.v2-progress .wp-right strong{color:var(--champagne);font-weight:600}
.v2-progress .wp-track{
  display:flex;gap:3px;height:5px;margin:12px 0 10px;
}
.v2-progress .wp-cell{
  flex:1 1 0;border-radius:1px;
  background:rgba(159,232,255,.10);
  transition:background .4s,box-shadow .4s;
}
.v2-progress .wp-cell.on{
  background:linear-gradient(180deg,var(--champagne),var(--gold-2));
  box-shadow:0 0 8px rgba(243,212,136,.55);
}
.v2-progress .wp-cell.next{
  background:rgba(243,212,136,.35);
  animation:nextPulse 1.4s ease-in-out infinite;
}
@keyframes nextPulse{
  0%,100%{opacity:.5}
  50%{opacity:1;box-shadow:0 0 10px rgba(243,212,136,.7)}
}
.v2-progress .wp-foot{
  display:flex!important;justify-content:space-between;
  font-size:8.5px;letter-spacing:.14em;color:var(--dim);
}

/* ---------------------------------------------------------------- 7. 滚动提示 */
.hero .scroll-cue{bottom:22px}

/* ---------------------------------------------------------------- 8. 移动端（独立媒体查询，不嵌套） */
@media(max-width:640px){
  .hero{padding:92px 16px 48px;align-items:flex-start}
  .v2-eyebrow{font-size:8.5px;letter-spacing:.32em;gap:10px;margin-bottom:18px}
  .v2-eyebrow::before,.v2-eyebrow::after{width:24px}
  .hero-title{font-size:clamp(31px,9vw,44px);line-height:1.12}
  .hero-sub{margin-top:12px;font-size:11px;letter-spacing:.16em}
  .hero-mine{gap:8px 12px;padding:12px 14px;font-size:11px;justify-content:flex-start}
  .hero-mine .hm-city b{font-size:12px}
  .hero-mine .hm-when em{display:none}
  .hero-mine .hm-when strong{font-size:19px}
  .hero-mine .hm-slot b{font-size:12px}
  .v2-countdown{margin-top:26px}
  .v2-countdown .cd-unit{min-width:0;flex:1 1 0;padding:4px 2px}
  .v2-countdown .cd-num{font-size:clamp(32px,10.5vw,44px)}
  .v2-countdown .cd-label{margin-top:8px;font-size:7.5px;letter-spacing:.18em}
  .v2-countdown .cd-unit + .cd-unit::before{top:12%;height:56%}
  .v2-cta{flex-direction:column;gap:14px;margin-top:28px}
  .v2-cta .btn-gold{width:100%;padding:0 20px}
  .v2-textlink{width:100%;text-align:center}
  .v2-dot{display:none}
  .v2-progress{margin-top:30px}
}

/* RTL：数字与「09 / 33」保持从左到右 */
.hero-mine .hm-slot,.hero-mine .hm-when,.hero-mine .hm-zone{direction:ltr;unicode-bidi:isolate}

/* ================================================================
   9. 艺术马赛克弹窗 v2（画布前置 · 精简 · 实时预览）
   ================================================================ */
.px-modal{border:1px solid var(--hairline,rgba(233,200,122,.28))}
.px-modal .sm-head{text-align:center}
.px-modal .px-tech{
  border:1px solid var(--hairline,rgba(233,200,122,.18));
  background:rgba(159,232,255,.04);
  padding:10px 14px;margin-top:14px;border-radius:2px}
.px-modal .px-canvas-frame{
  position:relative;
  border-radius:2px;
  box-shadow:0 0 24px rgba(243,212,136,.12)}
/* 模板选择器：去原生大圆角，统一 Art Deco 语言 */
.px-modal #pxTemplate.input,
.px-modal textarea.input{border-radius:2px}
/* 操作按钮统一细棱角 */
.px-modal .btn{border-radius:2px}
.px-modal .sm-actions{gap:10px}

/* 移动端：画布前置，让作品成为主角 */
@media(max-width:640px){
  .px-modal{padding:24px 16px 20px}
  .px-modal .px-layout{display:flex;flex-direction:column}
  .px-modal .px-canvas-frame{order:-1;max-width:300px;margin:0 auto 18px}
  .px-modal .px-tabs{margin:14px 0}
  .px-modal .px-controls .field-label:first-child{margin-top:4px}
  .px-modal .px-secret{min-height:64px}
  .px-modal .px-cap{margin:6px 0 10px}
  .px-modal .px-keep{
    background:rgba(159,232,255,.05);
    border-left:2px solid var(--gold-2,#f3d488);
    padding:8px 12px;border-radius:0 2px 2px 0}
}