/* ==========================================================================
   2026 奇瑞全球售后服务技能大赛 H5
   设计稿 2667×5150（比例 1 : 1.931），页面按「图片精确框定 + 透明热区」还原
   ========================================================================== */

:root{
  --cyan:#25D8F5;
  --cyan-dim:rgba(37,216,245,.22);
  --blue:#135BAD;
  --deep:#072242;
  --ink:#FFFFFF;
  --ink-70:rgba(255,255,255,.72);
  --line:rgba(37,216,245,.28);
  --ease:cubic-bezier(.22,1,.36,1);

  --vh:100vh;
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);

  /* 设计稿宽高比常量 */
  --ratio:1.931;
}

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

html,body{
  margin:0; padding:0; height:100%;
  background:#062039;
  color:var(--ink);
  font-family:"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  overflow:hidden;
}
body{ position:fixed; inset:0; }

button{ font-family:inherit; border:0; background:none; color:inherit; padding:0; cursor:pointer; }
h1,h2,h3,p{ margin:0; }

/* ============================== 加载页 ============================== */
.loader{
  position:fixed; inset:0; z-index:999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
  background:radial-gradient(120% 80% at 50% 40%, #135BAD 0%, #0A3A78 45%, #062039 100%);
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__mark{
  display:flex; align-items:center; gap:9px;
  font-size:10.5px; font-weight:700; letter-spacing:.16em;
  color:rgba(255,255,255,.86);
}
.loader__mark i{
  width:1px; height:11px;
  background:rgba(255,255,255,.45);
  display:block;
}
.loader__bar{
  width:120px; height:2px; border-radius:2px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
}
.loader__bar b{
  display:block; height:100%; width:38%;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation:loadSlide 1.05s infinite var(--ease);
}
@keyframes loadSlide{
  from{ transform:translateX(-100%); }
  to{ transform:translateX(330%); }
}

/* ============================== 翻页引擎 ============================== */
.stage{
  position:relative;
  width:100%; height:100%;
  overflow:hidden;
  touch-action:none;
}
.track{
  position:absolute; top:0; left:0; width:100%;
  will-change:transform;
  transform:translate3d(0,0,0);
}

.screen{
  position:relative;
  width:100%; height:var(--vh);
  overflow:hidden;
  /* 上下补边用纯色硬切（切点藏在图片后面），保证与设计稿边缘零色差 */
  background:linear-gradient(180deg,
    var(--c-top, #135BAD) 0%,
    var(--c-top, #135BAD) 49.9%,
    var(--c-bot, #124889) 50%,
    var(--c-bot, #124889) 100%);
}

/* ---- 图片精确框：宽高比 = 设计稿，居中，超出裁切 / 不足留白由底色补 ---- */
.art{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(100%, calc(var(--vh) / var(--ratio)));
  aspect-ratio:2667 / 5150;
  overflow:hidden;
  z-index:2;
}
.art img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

/* 封面轻微呼吸推镜 */
.art--cover img{
  transform:scale(1);
  transition:transform 9s ease-out;
}
.screen.is-active .art--cover img{ transform:scale(1.028); }

/* ============================== 透明热区 ============================== */
.hit{
  position:absolute;
  z-index:5;
  background:transparent;
  border-radius:6px;
  transition:background .18s;
}
.hit:active{ background:rgba(255,255,255,.10); }

/* 返回：设计稿「◀返回」位置，留足点击面积
   注意：cover 模式下左右会裁掉约 5%，起点必须避开裁切区 */
.hit--back{
  left:6.5%; top:12.2%;
  width:22%; height:6.2%;
}

/* 抽签：覆盖抽签箱与「点击抽签」文字 */
.hit--draw{
  left:14%; top:29%;
  width:72%; height:45%;
}
.hit--draw:active{ background:rgba(37,216,245,.10); }

/* 照片直播：二维码卡片整块可点 */
.hit--live{
  left:14%; top:34.5%;
  width:72%; height:45.5%;
}
.hit--live:active{ background:rgba(37,216,245,.10); }

/* 点击波纹 */
.hit__ripple{
  position:absolute; left:50%; top:50%;
  width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:999px;
  border:1px solid var(--cyan);
  opacity:0;
  pointer-events:none;
}
.hit.is-tapped .hit__ripple{ animation:ripple .85s var(--ease); }
@keyframes ripple{
  0%{ transform:scale(.4); opacity:.85; }
  100%{ transform:scale(4.2); opacity:0; }
}

/* ============================== 上滑提示 ============================== */
.swipe-hint{
  position:absolute; left:50%; bottom:calc(10px + var(--safe-b));
  transform:translateX(-50%);
  z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  color:rgba(255,255,255,.72);
  font-size:11px; letter-spacing:.24em; text-indent:.24em;
  text-shadow:0 1px 6px rgba(3,26,58,.85);
  animation:hintFloat 2.2s infinite var(--ease);
  transition:opacity .5s;
  pointer-events:none;
}
@keyframes hintFloat{
  0%,100%{ transform:translate(-50%,0); opacity:.55; }
  50%{ transform:translate(-50%,-7px); opacity:.95; }
}
.stage[data-page="0"] .swipe-hint{ opacity:1; }
.stage:not([data-page="0"]) .swipe-hint{ opacity:0; }

/* ============================== 音乐按钮 ============================== */
.audio-btn{
  position:absolute; z-index:40;
  top:calc(14px + var(--safe-t)); right:12px;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.9);
}
.audio-btn__disc{
  position:relative; z-index:2;
  width:28px; height:28px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,42,84,.42);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .2s, border-color .2s;
}
.audio-btn.is-playing .audio-btn__disc{
  border-color:var(--cyan);
  background:rgba(37,216,245,.18);
  animation:spin 6.5s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.audio-btn__ring{
  position:absolute; inset:0; border-radius:999px;
  border:1px solid var(--cyan); opacity:0;
}
.audio-btn.is-playing .audio-btn__ring{ animation:ringPulse 2.6s infinite var(--ease); }
@keyframes ringPulse{
  0%{ transform:scale(.72); opacity:.75; }
  100%{ transform:scale(1.32); opacity:0; }
}

/* 未播放时的引导气泡（移动端禁止自动播放，需要用户轻触） */
.audio-tip{
  position:absolute; z-index:39;
  top:calc(14px + var(--safe-t) + 40px);
  right:10px;
  padding:7px 12px;
  border-radius:9px;
  font-size:11.5px; letter-spacing:.06em; white-space:nowrap;
  color:#fff;
  background:rgba(6,32,57,.88);
  border:1px solid rgba(37,216,245,.5);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 22px rgba(0,0,0,.4), 0 0 0 0 rgba(37,216,245,.32);
  cursor:pointer;
  transform-origin:top right;
  animation:tipBreathe 2.2s ease-in-out infinite;
  transition:opacity .38s var(--ease), transform .38s var(--ease), visibility .38s;
}
/* 指向上方音乐按钮的小箭头 */
.audio-tip::before{
  content:"";
  position:absolute; top:-5px; right:16px;
  width:8px; height:8px;
  background:rgba(6,32,57,.88);
  border-left:1px solid rgba(37,216,245,.5);
  border-top:1px solid rgba(37,216,245,.5);
  transform:rotate(45deg);
}
@keyframes tipBreathe{
  0%,100%{ box-shadow:0 8px 22px rgba(0,0,0,.4), 0 0 0 0 rgba(37,216,245,.30); }
  50%{ box-shadow:0 8px 22px rgba(0,0,0,.4), 0 0 0 5px rgba(37,216,245,0); }
}
.audio-tip.is-hidden{
  animation:none;
  opacity:0; visibility:hidden;
  transform:translateY(-6px) scale(.94);
}

@media (prefers-reduced-motion:reduce){
  .audio-tip{ animation:none; }
}

/* ============================== 进度点 ============================== */
.dots{
  position:absolute; right:9px; top:50%;
  transform:translateY(-50%);
  z-index:40;
  display:flex; flex-direction:column; gap:9px;
  padding:6px 4px;
}
.dots button{
  width:4px; height:4px; border-radius:999px;
  background:rgba(255,255,255,.36);
  transition:height .4s var(--ease), background .4s;
}
.dots button.is-on{ height:15px; background:var(--cyan); }

/* ============================== 抽签动画 ============================== */
.drawing{
  position:fixed; inset:0; z-index:700;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  background:rgba(4,20,42,.72);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; visibility:hidden;
  transition:opacity .25s, visibility .25s;
}
.drawing.is-open{ opacity:1; visibility:visible; }
.drawing__box{ display:flex; gap:16px; }
.drawing__box i{
  width:13px; height:13px; border-radius:3px;
  background:var(--cyan);
  box-shadow:0 0 18px rgba(37,216,245,.8);
  animation:drawBounce .9s infinite var(--ease);
}
.drawing__box i:nth-child(2){ animation-delay:.14s; }
.drawing__box i:nth-child(3){ animation-delay:.28s; }
@keyframes drawBounce{
  0%,100%{ transform:translateY(0) scale(1); opacity:.55; }
  50%{ transform:translateY(-16px) scale(1.12); opacity:1; }
}
.drawing p{ font-size:13px; letter-spacing:.22em; text-indent:.22em; color:var(--ink-70); }

/* ============================== 结果弹层 ============================== */
.modal{
  position:fixed; inset:0; z-index:800;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(3,16,34,.76);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
.modal.is-open{ opacity:1; visibility:visible; }
.modal__panel{
  position:relative;
  width:100%; max-width:320px;
  padding:34px 26px 26px;
  border-radius:20px;
  background:linear-gradient(170deg, rgba(19,91,173,.96) 0%, rgba(8,38,76,.98) 100%);
  border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  transform:translateY(18px) scale(.96);
  transition:transform .42s var(--ease);
}
.modal.is-open .modal__panel{ transform:translateY(0) scale(1); }

.draw-result{ text-align:center; margin-bottom:26px; }
.draw-result__label{
  font-size:11.5px; letter-spacing:.3em; text-indent:.3em;
  color:var(--cyan); margin-bottom:14px;
}
.draw-result__no{
  font-size:66px; font-weight:800; line-height:1;
  letter-spacing:.02em;
  background:linear-gradient(180deg,#FFFFFF 0%,#9FE7F8 60%,#25D8F5 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
  animation:popIn .5s var(--ease) both;
}
@keyframes popIn{
  from{ transform:scale(.55); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}
.draw-result__team{
  margin-top:12px;
  font-size:14px; letter-spacing:.12em;
  color:rgba(255,255,255,.88);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; border-radius:999px;
  font-size:14.5px; font-weight:600; letter-spacing:.10em;
  transition:transform .16s var(--ease), opacity .2s;
}
.btn:active{ transform:scale(.97); }
.btn--primary{
  color:#04243F;
  background:linear-gradient(135deg,#8FF0FF 0%,#25D8F5 100%);
  box-shadow:0 10px 26px rgba(37,216,245,.28);
}
.btn--block{ width:100%; }

.modal__close{
  position:absolute; right:10px; top:8px;
  width:36px; height:36px; font-size:24px; font-weight:300; line-height:1;
  color:rgba(255,255,255,.5);
}

/* ============================== 分享引导 ============================== */
.share-mask{
  position:fixed; inset:0; z-index:900;
  display:flex; flex-direction:column; align-items:center;
  padding:calc(14px + var(--safe-t)) 26px;
  background:rgba(3,14,30,.9);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
.share-mask.is-open{ opacity:1; visibility:visible; }
.share-mask__arrow{ align-self:flex-end; margin-right:-16px; color:var(--cyan); }
.share-mask__title{
  margin-top:auto;
  font-size:16.5px; font-weight:600; letter-spacing:.10em;
}
.share-mask__desc{
  margin-top:10px; font-size:12.5px; letter-spacing:.06em;
  color:var(--ink-70);
}
.share-mask__close{
  margin-top:auto; margin-bottom:calc(26px + var(--safe-b));
  padding:11px 30px; border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  font-size:13px; letter-spacing:.10em;
  color:rgba(255,255,255,.78);
}

/* ============================== Toast ============================== */
.toast{
  position:fixed; left:50%; top:50%; z-index:950;
  transform:translate(-50%,-50%) scale(.94);
  max-width:76vw;
  padding:12px 20px; border-radius:11px;
  background:rgba(6,32,57,.94);
  border:1px solid var(--line);
  font-size:13px; line-height:1.6; letter-spacing:.04em;
  text-align:center;
  opacity:0; visibility:hidden;
  pointer-events:none;
  transition:opacity .24s, transform .24s var(--ease), visibility .24s;
}
.toast.is-show{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }

/* ============================== PC 预览约束 ============================== */@media (min-width:520px){
  body{ background:#03101F; }
  .stage{
    max-width:430px; margin:0 auto;
    box-shadow:0 0 0 1px rgba(37,216,245,.14), 0 30px 90px rgba(0,0,0,.6);
  }
  .dots{ right:auto; left:calc(50% - 215px + 9px); }
  .audio-btn{ right:auto; left:calc(50% + 215px - 46px); }
}

@media (prefers-reduced-motion:reduce){
  .audio-btn.is-playing .audio-btn__disc,
  .swipe-hint,
  .drawing__box i{ animation:none !important; }
  .screen.is-active .art--cover img{ transform:none; }
}