/* ============================================
   基础样式 - Base Styles
   ============================================ */

:root {
  --app-viewport-height: 100vh;
}

/* 禁止页面滚动 - 全屏滚动模式 */
html, body {
  height: var(--app-viewport-height, 100vh);
  width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: fixed;
}

body {
  font-family: "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  max-width: 100vw;
  box-sizing: border-box;
}

/* 隐藏滚动条 - 跨浏览器兼容 */
body::-webkit-scrollbar {
  display: none;
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

html {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 确保所有元素都使用border-box盒模型 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 确保所有块级元素不会超出容器宽度 */
div, section, header, footer, main, article, aside {
  max-width: 100%;
  overflow-x: hidden;
}

/* 确保图片和媒体元素响应式 */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* 确保表格响应式 */
table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
  white-space: nowrap;
}

/* 确保文本内容不会导致水平滚动 */
p, h1, h2, h3, h4, h5, h6 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

/* 确保导航容器不会导致水平滚动 */
.et-hero-tabs-container {
  max-width: 100vw;
  overflow-x: hidden;
}

/* 确保滑动条不会超出容器 */
.et-hero-tab-slider {
  max-width: 100%;
}

a {
  text-decoration: none;
}

/* ============================================
   全屏滚动容器 - Fullpage Container
   ============================================ */

.et-fullpage-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--app-viewport-height, 100vh);
  overflow: hidden;
  z-index: 1;
}

/* ============================================
   滚动事件保障规则 - Scroll Event Protection
   ============================================ */

/*
 * 强制全局响应优化
 * 确保装饰性覆盖层不会阻止滚动事件
 */

/* 默认规则：所有高z-index的伪元素默认不接收鼠标事件 */
*::before,
*::after {
  pointer-events: none;
}

/* 需要交互的元素恢复pointer-events */
a::before, a::after,
button::before, button::after,
input::before, input::after,
select::before, select::after,
textarea::before, textarea::after,
[role="button"]::before, [role="button"]::after,
.et-hero-tab::before, .et-hero-tab::after,
.et-download-btn::before, .et-download-btn::after {
  pointer-events: auto;
}

/* Canvas背景层不接收事件 */
canvas.blur-canvas {
  pointer-events: none !important;
}

/* 装饰性覆盖层和背景层不接收事件 */
.et-hero-tabs::before,
.et-hero-tabs::after,
.et-slide::before,
.et-slide::after,
[data-decoration]::before,
[data-decoration]::after {
  pointer-events: none !important;
}
