/*!
 * iQ 开屏轮播（网站版） · 与 App 开屏同一套画面与动效
 * 部署位置：/static/launch/launch.css（配合同目录 launch.js，模板 header_common.php 里各引一行）
 * 换图：把 01.jpg ~ 07.jpg 覆盖到 /static/launch/ 即可；换顺序/文案改 launch.js。
 *
 * 每条规则都带 #iqLaunch 前缀（一个 id + 一个 class 的优先级）：
 *  · 能压住 Discuz 自己的 img/div/i/button 样式
 *  · 也不会被文件开头那条"作用域重置"反过来盖掉（重置用的是 #iqLaunch *，只有 1 个 id）
 */

/* ---------- 幕布：决定要放开屏时先把论坛内容藏住，避免"先闪一下论坛再弹开屏" ---------- */
html.iqL-boot { background: #12100E !important; overflow: hidden !important; }
html.iqL-boot body { background: #12100E !important; overflow: hidden !important; }
html.iqL-boot body > *:not(#iqLaunch) { visibility: hidden !important; }

/* ---------- 作用域重置（论坛的样式不要漏进来） ---------- */
#iqLaunch, #iqLaunch * {
  box-sizing: border-box; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-decoration: none; list-style: none;
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
}

#iqLaunch {
  position: fixed !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important; display: block !important;
  z-index: 2147483000 !important; visibility: visible !important; overflow: hidden;
  background: #12100E; opacity: 0;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-user-select: none; user-select: none; touch-action: pan-y;
  transition: opacity .72s cubic-bezier(.22, .61, .36, 1);
}
#iqLaunch.iqL-in { opacity: 1; }
#iqLaunch.iqL-out { opacity: 0; transition-duration: .52s; }
#iqLaunch.iqL-out .iqL-stage { transform: scale(1.045); transition: transform .52s ease; }

#iqLaunch .iqL-stage { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }

/* ---------- 单张画面 ---------- */
#iqLaunch .iqL-slide { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; opacity: 0; will-change: transform, opacity; }
#iqLaunch .iqL-slide.iqL-cur { opacity: 1; }
#iqLaunch .iqL-zoom { position: absolute; left: 0; top: 0; right: 0; bottom: 0; will-change: transform; }

/* 模糊铺底：竖图放到宽屏上时左右不露黑边，跟主体同向、慢很多 */
#iqLaunch .iqL-bg {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .66; filter: blur(28px); -webkit-filter: blur(28px); transform: scale(1.26);
  animation: iqL-kbslow 16s ease-in-out calc(0s - var(--iq-t, 0s)) both;
}

/* 主体画面：完整不裁构图；进场时轻微落定，之后由父层缓慢推近 */
#iqLaunch .iqL-art {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: scale(1.035);
  transition: opacity .95s ease, transform 1.4s cubic-bezier(.22, .61, .36, 1);
}
#iqLaunch .iqL-slide.iqL-ready .iqL-art { opacity: 1; transform: scale(1); }

#iqLaunch .iqL-mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(10, 13, 22, .34); animation: iqL-breathe 7s ease-in-out infinite; }
#iqLaunch .iqL-shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 54%;
  background-image: linear-gradient(to top, rgba(5, 8, 14, .92) 0%, rgba(5, 8, 14, .52) 40%, rgba(5, 8, 14, 0) 100%);
}

/* ---------- 文案：分层进场（细线 → 标题 → 说明） ---------- */
#iqLaunch .iqL-cap { position: absolute; left: 6.6vw; right: 6.6vw; bottom: 21vh; max-width: 34em; }
#iqLaunch .iqL-line { display: block; width: 0; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .92); opacity: 0; }
#iqLaunch .iqL-ct {
  display: block; margin-top: 16px; font-size: clamp(23px, 6.4vw, 40px); font-weight: 600; line-height: 1.32;
  letter-spacing: .05em; color: #fff; text-shadow: 0 2px 22px rgba(0, 0, 0, .5); opacity: 0;
}
#iqLaunch .iqL-cd {
  display: block; margin-top: 12px; font-size: clamp(13.5px, 3.5vw, 18px); line-height: 1.78;
  color: rgba(255, 255, 255, .86); text-shadow: 0 1px 14px rgba(0, 0, 0, .45); opacity: 0;
}
#iqLaunch .iqL-slide.iqL-on .iqL-line { animation: iqL-line .62s cubic-bezier(.22, .61, .36, 1) calc(.12s - var(--iq-t, 0s)) both; }
#iqLaunch .iqL-slide.iqL-on .iqL-ct { animation: iqL-rise .82s cubic-bezier(.22, .61, .36, 1) calc(.22s - var(--iq-t, 0s)) both; }
#iqLaunch .iqL-slide.iqL-on .iqL-cd { animation: iqL-rise .82s cubic-bezier(.22, .61, .36, 1) calc(.38s - var(--iq-t, 0s)) both; }

/* 缓慢推近：四种方向，相邻不重样 */
#iqLaunch .iqL-kb0 .iqL-zoom { animation: iqL-kb0 9s ease-in-out calc(0s - var(--iq-t, 0s)) both; }
#iqLaunch .iqL-kb1 .iqL-zoom { animation: iqL-kb1 9s ease-in-out calc(0s - var(--iq-t, 0s)) both; }
#iqLaunch .iqL-kb2 .iqL-zoom { animation: iqL-kb2 9s ease-in-out calc(0s - var(--iq-t, 0s)) both; }
#iqLaunch .iqL-kb3 .iqL-zoom { animation: iqL-kb3 9s ease-in-out calc(0s - var(--iq-t, 0s)) both; }

@keyframes iqL-kb0 { from { transform: scale(1.04) translate3d(0, 1.2%, 0); } to { transform: scale(1.13) translate3d(0, -2%, 0); } }
@keyframes iqL-kb1 { from { transform: scale(1.13) translate3d(2%, 0, 0); } to { transform: scale(1.04) translate3d(-2%, 0, 0); } }
@keyframes iqL-kb2 { from { transform: scale(1.05) translate3d(-1.8%, 1.6%, 0); } to { transform: scale(1.13) translate3d(1.8%, -1.8%, 0); } }
@keyframes iqL-kb3 { from { transform: scale(1.12) translate3d(-1.8%, -1.6%, 0); } to { transform: scale(1.04) translate3d(1.8%, 1.6%, 0); } }
@keyframes iqL-kbslow { from { transform: scale(1.26) translate3d(0, 0, 0); } to { transform: scale(1.34) translate3d(-1.4%, -1.4%, 0); } }
@keyframes iqL-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@keyframes iqL-line { from { width: 0; opacity: 0; } to { width: min(62px, 14vw); opacity: .92; } }
@keyframes iqL-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes iqL-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes iqL-fill { from { width: 0; } to { width: 100%; } }
@keyframes iqL-pop {
  0% { opacity: 0; transform: scale(.92) translateY(14px); }
  60% { opacity: 1; transform: scale(1.03) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes iqL-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .42); } 50% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); } }
@keyframes iqL-track { from { opacity: 0; letter-spacing: .34em; } to { opacity: 1; letter-spacing: .18em; } }

/* ---------- 固定层：跳过 / 指示点 / 进入按钮（翻页时不动） ---------- */
#iqLaunch .iqL-chrome { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 6; pointer-events: none; }
#iqLaunch .iqL-top {
  position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: flex-end;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 4.8vw 0;
}
#iqLaunch .iqL-skip {
  pointer-events: auto; cursor: pointer; padding: 8px 17px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26);
  color: rgba(255, 255, 255, .94); font-size: clamp(12px, 3.2vw, 14px); letter-spacing: .1em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: iqL-in .6s ease calc(.15s - var(--iq-t, 0s)) both;
}
#iqLaunch .iqL-foot {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
#iqLaunch .iqL-dots { display: flex; align-items: center; margin-bottom: 22px; }
#iqLaunch .iqL-dot {
  position: relative; display: block; width: 6px; height: 6px; margin: 0 4.5px; border-radius: 999px;
  background: rgba(255, 255, 255, .45); box-shadow: 0 0 6px rgba(0, 0, 0, .45); overflow: hidden;
  transition: width .4s cubic-bezier(.22, .61, .36, 1), background-color .4s ease;
}
#iqLaunch .iqL-dot-on { width: 26px; }
#iqLaunch .iqL-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: #fff; animation: iqL-fill linear forwards; }
#iqLaunch .iqL-enter {
  pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: center;
  height: clamp(44px, 12vw, 50px); padding: 0 clamp(32px, 11vw, 50px); border-radius: 999px;
  background: #fff; color: #15161b; font-size: clamp(14px, 3.7vw, 16px); font-weight: 600; letter-spacing: .1em;
  animation: iqL-pop .82s cubic-bezier(.22, .61, .36, 1) calc(.28s - var(--iq-t, 0s)) both,
             iqL-glow 2.6s ease-in-out calc(1.2s - var(--iq-t, 0s)) infinite;
}
#iqLaunch .iqL-brand {
  font-size: clamp(11px, 3vw, 13px); color: rgba(255, 255, 255, .62); text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
  animation: iqL-track .9s ease calc(.35s - var(--iq-t, 0s)) both;
}

/* ---------- 宽屏（电脑版）：文案不拉满整行，间距松一点 ---------- */
@media (min-width: 900px) {
  #iqLaunch .iqL-cap { left: 7vw; right: 7vw; bottom: 22vh; max-width: 30em; }
  #iqLaunch .iqL-shade { height: 46%; }
  #iqLaunch .iqL-top { padding-right: 3.4vw; }
  #iqLaunch .iqL-dots { margin-bottom: 26px; }
}

/* ---------- 系统开了「减弱动态效果」就只做静态轮播 ---------- */
@media (prefers-reduced-motion: reduce) {
  #iqLaunch .iqL-zoom, #iqLaunch .iqL-bg, #iqLaunch .iqL-mask { animation: none !important; }
  #iqLaunch .iqL-art { transition: opacity .3s ease; transform: none; }
  #iqLaunch.iqL-out .iqL-stage { transition: none; }
}

/* ---------- 冻结取帧模式（?iql_seek=1，给录屏与定时截图用，正常访问不会进这个分支） ----------
   原理和 App 那边的取帧预览一样：所有动画都写了 calc(基准延迟 - var(--iq-t))，
   把动画挂起（paused）再把 --iq-t 设成某个时刻，画面就停在那一秒。 */
#iqLaunch.iqL-seek .iqL-fill { animation: none !important; }          /* 进度条改用内联宽度表示 */
#iqLaunch.iqL-seek .iqL-art { opacity: 1; transform: none; }           /* 取帧时不等图片渐显 */
#iqLaunch.iqL-seek .iqL-zoom, #iqLaunch.iqL-seek .iqL-bg, #iqLaunch.iqL-seek .iqL-mask,
#iqLaunch.iqL-seek .iqL-line, #iqLaunch.iqL-seek .iqL-ct, #iqLaunch.iqL-seek .iqL-cd,
#iqLaunch.iqL-seek .iqL-skip, #iqLaunch.iqL-seek .iqL-brand, #iqLaunch.iqL-seek .iqL-enter {
  animation-play-state: paused !important;
}