/* =========================================================
   江苏省第七届水文勘测职业技能竞赛（决赛）— H5 复刻
   设计画布 320 × 486，在屏幕中垂直居中；页面上下滑动切换
   ========================================================= */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #04101f;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #0a2647 0%, #04101f 70%);
}

/* ---------- 舞台 ---------- */
.frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 570px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 50% 50%;
  background: #04101f;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
body.is-desktop .frame {
  box-shadow: 0 24px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
}

.pages {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* ---------- 单页 ---------- */
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
}

/* 486 高的设计画布，在整屏高度里垂直居中（与易企秀 view 一致） */
.canvas {
  position: absolute;
  left: 0;
  top: 50%;
  width: 320px;
  height: 486px;
  margin-top: -243px;
}

/* ---------- 元素 ---------- */
.el {
  position: absolute;
  transform-origin: 50% 50%;
}

.el-image { overflow: hidden; }
.el-image img {
  display: block;
  border: 0;
  pointer-events: none;
}

.el-text {
  overflow: hidden;
  word-break: break-word;
  line-break: normal;
}

.el-shape { overflow: hidden; }
.el-shape svg { display: block; }

.el-bg { position: absolute; inset: 0; }
.el-carousel { overflow: hidden; }

[data-click] { cursor: pointer; }

/* ---------- 动画（对应易企秀 ANIMATION_TYPE） ---------- */
.el[data-anim] { opacity: 0; }
.is-active .el[data-anim] {
  opacity: 1;
  animation: var(--anim);
}

@keyframes fadeIn {
  0% { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInRight {
  0% { opacity: 0; transform: translate3d(200px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeInLeft {
  0% { opacity: 0; transform: translate3d(-200px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeInDown {
  0% { opacity: 0; transform: translate3d(0, -200px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeInUp {
  0% { opacity: 0; transform: translate3d(0, 200px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes zoomIn {
  0% { opacity: 0; transform: scale3d(.3, .3, .3); }
  50% { opacity: 1; }
}
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  0% { opacity: 0; transform: scale3d(.3, .3, .3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(.9, .9, .9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(.97, .97, .97); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes slideUp {
  0% { transform: translate3d(0, 100%, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes slideDown {
  0% { transform: translate3d(0, -100%, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); }
}

/* ---------- 轮播（image-slider-style3 封面流） ---------- */
.image-slider {
  position: relative;
  width: 100%;
  height: 100%;
}
.image-slider .slide {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 4px 0 hsla(0, 0%, 60%, .5);
  transition-property: transform, opacity;
  transition-duration: .4s;
  backface-visibility: hidden;
}
.image-slider .slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.image-slider .style3-current { transform: translateX(0); opacity: 1; z-index: 2; }
.image-slider .style3-left1 { transform: translateX(-30px); opacity: .6; z-index: 1; }
.image-slider .style3-right1 { transform: translateX(30px); opacity: .6; z-index: 1; }
.image-slider .style3-alternate { opacity: 0; z-index: 1; }

/* ---------- 弹窗 ---------- */
.popup-root { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.popup {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
  display: none;
  isolation: isolate;
}
.popup.is-open { display: block; }

/* ---------- 上滑箭头（易企秀 u-arrow-bottom） ---------- */
.u-arrow-bottom {
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 150;
  width: 24px;
  height: 14px;
  margin-left: -12px;
  cursor: pointer;
}
.u-arrow-bottom.is-hidden { display: none; }
.pre-wrap-bottom {
  width: 24px;
  height: 14px;
  position: relative;
  animation: start 1.5s ease-in-out infinite;
}
.pre-box1, .pre-box2 { height: 15px; width: 11px; position: absolute; top: -5px; overflow: hidden; }
.pre-box2 { left: 10px; }
.pre1, .pre2 {
  background-color: #fff;
  width: 14px;
  height: 5px;
  border-radius: 2px;
  position: absolute;
  box-shadow: 1px -1px 1px #646464;
  top: 5px;
}
.pre1 { left: 1px; transform: rotate(130deg); }
.pre2 { left: -4.5px; transform: rotate(50deg); }

@keyframes start {
  0%, 30% { opacity: 0; transform: translateY(10px); }
  60% { opacity: 1; transform: translate(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

/* 隐藏滚动条 */
::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- 整页内嵌（第 6 页） ---------- */
.page-external { background: #061a2e; }

.ext-page { position: absolute; inset: 0; }
.ext-iframe-host { position: absolute; inset: 0; background: #eaf3f8; }
.ext-iframe { display: block; width: 100%; height: 100%; border: 0; }

.ext-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #061a2e;
  color: #8fb8e6;
  font-size: 12px;
  letter-spacing: .5px;
}
.ext-loading p { margin: 0; }
.ext-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(143, 184, 230, .22);
  border-top-color: #4ea8ff;
  animation: extSpin .85s linear infinite;
}
@keyframes extSpin { to { transform: rotate(360deg); } }

.ext-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 26px;
  background: rgba(4, 16, 31, .94);
  color: #cfe4ff;
  font-size: 13px;
  text-align: center;
}
.ext-fallback.show { display: flex; }
.ext-fallback p { margin: 0; }

.ext-btn {
  display: inline-block;
  padding: 9px 18px;
  border: 0;
  border-radius: 20px;
  background: #1e6fd9;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.ext-btn.ext-ghost {
  background: transparent;
  border: 1px solid rgba(207, 228, 255, .35);
  color: #cfe4ff;
}

/* 内嵌页底部导航：上一页 / 下一页 */
.ext-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
}
.ext-nav-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px 12px;
  border: 0;
  border-radius: 18px;
  background: rgba(6, 22, 40, .62);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.ext-nav-btn:active { background: rgba(6, 22, 40, .82); }
.ext-nav-btn svg { display: block; }