@import './fonts.css';
@import './tailwind.css';
@import './theme.css';

/* 自定义动画和过渡效果 */
.transition-opacity {
  transition-property: opacity;
}

.duration-2000 {
  transition-duration: 2000ms;
}

/* 首页三语欢迎词：切换时渐入（仅透明度） */
@keyframes welcome-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-welcome-fade-in {
  animation: welcome-fade-in 0.75s ease-in-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .animate-welcome-fade-in {
    animation: none;
  }
}

/* 首页菜单槽位：不做 3D 旋转，避免绘制超出布局盒导致「间距看起来忽大忽小」 */
.carousel-tile-3d {
  transform: none;
}

/* 六边形图标底 */
.clip-hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* 菜单块底边：与「台面」接缝高光 */
.menu-tile-face {
  position: relative;
}

.menu-tile-face::after {
  content: "";
  position: absolute;
  z-index: 25;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 22%,
    rgba(220, 240, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.25) 78%,
    transparent 100%
  );
  box-shadow:
    0 0 10px 1px rgba(180, 220, 255, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 垂直镜像倒影（WebKit）：遮罩渐变与先前相反 — 近接缝弱、越远越强再淡出 */
.tile-reflect {
  -webkit-box-reflect: below 6px
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.03) 18%,
      rgba(255, 255, 255, 0.08) 38%,
      rgba(255, 255, 255, 0.16) 55%,
      rgba(255, 255, 255, 0.28) 72%,
      rgba(255, 255, 255, 0.38) 88%,
      transparent 100%
    );
}

/* 第 3、4 矩形入口：倒影更贴按钮底 */
.tile-reflect.tile-reflect--center-pair {
  -webkit-box-reflect: below -14px
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.03) 18%,
      rgba(255, 255, 255, 0.08) 38%,
      rgba(255, 255, 255, 0.16) 55%,
      rgba(255, 255, 255, 0.28) 72%,
      rgba(255, 255, 255, 0.38) 88%,
      transparent 100%
    );
}

/*
 * 梯形底边斜：盒模型底在长边最低角，-webkit-box-reflect 相对整盒定位，短边底角更高，
 * 短边与倒影短边会多出 ≈(Δy·H)。外梯 polygon Δy≈0.063、内梯 ≈0.032，用更大负 below 补偿。
 */
.tile-reflect.tile-reflect--trap-outer {
  -webkit-box-reflect: below clamp(-54px, -9vw - 8px, -34px)
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.03) 18%,
      rgba(255, 255, 255, 0.08) 38%,
      rgba(255, 255, 255, 0.16) 55%,
      rgba(255, 255, 255, 0.28) 72%,
      rgba(255, 255, 255, 0.38) 88%,
      transparent 100%
    );
}

.tile-reflect.tile-reflect--trap-inner {
  -webkit-box-reflect: below clamp(-38px, -6vw - 8px, -22px)
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.03) 18%,
      rgba(255, 255, 255, 0.08) 38%,
      rgba(255, 255, 255, 0.16) 55%,
      rgba(255, 255, 255, 0.28) 72%,
      rgba(255, 255, 255, 0.38) 88%,
      transparent 100%
    );
}

@media (max-width: 767px) {
  /* 窄屏保留横向滚动时 y 轴会被收成 auto，真倒影常被裁掉：关掉 reflect，用下方柔光带代替 */
  .tile-reflect {
    -webkit-box-reflect: none;
  }

  .tile-reflect::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: calc(100% + 4px);
    height: clamp(2.5rem, 30%, 4rem);
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(200, 225, 255, 0.07) 45%,
      rgba(255, 255, 255, 0.16) 100%
    );
    filter: blur(10px);
    opacity: 0.78;
    border-radius: 2px;
  }

  /* 首页：手机均为矩形块，与梯形无关，柔光统一且压低高度 */
  .home-menu-carousel .tile-reflect::after {
    top: calc(100% + 1px) !important;
    height: clamp(0.65rem, 5dvh, 1.1rem) !important;
    opacity: 0.48 !important;
    filter: blur(5px) !important;
  }
}

@supports not (-webkit-box-reflect: below 0 linear-gradient(transparent, transparent)) {
  .tile-reflect {
    -webkit-box-reflect: none;
    padding-bottom: 2.75rem;
  }

  /* Firefox 等：无真镜像，用底部柔光模拟反光带 */
  .tile-reflect::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: calc(100% + 3px);
    height: clamp(2.25rem, 26%, 3.75rem);
    max-width: 100%;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(200, 225, 255, 0.06) 40%,
      rgba(255, 255, 255, 0.13) 100%
    );
    filter: blur(8px);
    opacity: 0.7;
    border-radius: 2px;
  }
}

@media (max-width: 767.98px) {
  @supports not (-webkit-box-reflect: below 0 linear-gradient(transparent, transparent)) {
    .home-menu-carousel .tile-reflect::after {
      top: calc(100% + 1px) !important;
      height: clamp(0.65rem, 5dvh, 1.1rem) !important;
      opacity: 0.48 !important;
      filter: blur(5px) !important;
    }
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  .tile-reflect {
    -webkit-box-reflect: below 2px
      linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.035) 45%,
        rgba(255, 255, 255, 0.12) 85%,
        transparent 100%
      );
  }

  .tile-reflect.tile-reflect--center-pair {
    -webkit-box-reflect: below -12px
      linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.035) 45%,
        rgba(255, 255, 255, 0.12) 85%,
        transparent 100%
      );
  }

  .tile-reflect.tile-reflect--trap-outer {
    -webkit-box-reflect: below clamp(-48px, -7.5vw - 6px, -30px)
      linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.035) 45%,
        rgba(255, 255, 255, 0.12) 85%,
        transparent 100%
      );
  }

  .tile-reflect.tile-reflect--trap-inner {
    -webkit-box-reflect: below clamp(-34px, -5.5vw - 6px, -18px)
      linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.035) 45%,
        rgba(255, 255, 255, 0.12) 85%,
        transparent 100%
      );
  }
}

/*
 * 首页手机（<768px）：六块均为圆角矩形，去掉梯形 clip；控制高度与柔光倒影，便于两列一屏内看完。
 */
@media (max-width: 767.98px) {
  .home-menu-carousel .menu-tile-face {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border-radius: 0 !important;
    width: min(41vw, 8.125rem) !important;
    max-width: min(41vw, 8.125rem) !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    max-height: min(28dvh, 8.5rem) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.36) !important;
  }

  .home-menu-carousel .menu-tile-content {
    gap: 0.375rem !important;
    padding: 0.2rem 0.25rem !important;
  }
}

/*
 * iPad / 平板 768～1279px：六块总宽原大于视口，易被裁切或只能露出一半。
 * 按比例缩窄（约 7/10.25）并收紧 gap，使一行完整显示；轮播区 overflow 放开以免倒影被裁。
 */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .home-menu-carousel .carousel-track {
    gap: 0.5rem !important;
    overflow: visible !important;
  }

  .home-menu-carousel .menu-tile-face.menu-tile--outer {
    width: 6.73rem !important;
    height: calc(7rem * 4 / 3 * 0.932 / 0.868 / 0.82) !important;
  }

  .home-menu-carousel .menu-tile-face.menu-tile--inner-trap {
    width: 7rem !important;
    height: calc(7rem * 4 / 3 / 0.868) !important;
  }

  .home-menu-carousel .menu-tile-face.menu-tile--center {
    width: 7rem !important;
    max-width: 7rem !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
  }

  .home-menu-carousel .clip-hexagon {
    height: 2.85rem !important;
    width: 2.85rem !important;
  }

  .home-menu-carousel .clip-hexagon svg {
    height: 1.35rem !important;
    width: 1.35rem !important;
  }

  .home-menu-carousel .tile-reflect {
    margin-bottom: 2.75rem !important;
  }
}

/* 轮播轨道：隐藏滚动条；横向滑动仅 md+ 一排时启用（手机为两列网格） */
.carousel-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@media (min-width: 768px) {
  .carousel-track {
    touch-action: pan-x pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

/* 平滑滚动与移动端视口（含动态工具栏的 dvh）；全宽防横向溢出 */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  width: 100%;
  overflow-x: clip;
}

#root {
  width: 100%;
  min-height: 100dvh;
  min-height: 100vh;
}

.app-shell {
  min-height: 100dvh;
}

/* 共享天文台等「单屏页」：根节点不增高、不出现整页滚动条 */
html.app-viewport-lock,
html.app-viewport-lock body {
  height: 100%;
  overflow: hidden;
}

html.app-viewport-lock #root {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* App 外壳在锁定视口时铺满 #root，便于 Layout flex-1 吃到高度 */
html.app-viewport-lock #root .app-shell {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  flex: 1 1 0%;
}

/* 路由主区域占满锁定视口下的剩余高度（与 Toast 容器分离，避免兄弟节点平分 flex） */
html.app-viewport-lock .app-shell-main {
  display: flex;
  min-height: 0;
  min-width: 0;
  flex: 1 1 0%;
  flex-direction: column;
}

@media (pointer: coarse) {
  html.app-viewport-lock #root {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
  }
}

/* 可滚动区域隐藏滚动条（仍可触控/滚轮滚动） */
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* iPad / 触控设备：Safari 100vh 与地址栏错位时，用 -webkit-fill-available 兜底 */
@media (pointer: coarse) {
  #root {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }

  .layout-min-h-touch {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
  }
}

/* 横屏且高度较小时：避免页面被撑得过高难滚动 */
@media (orientation: landscape) and (max-height: 480px) {
  html {
    font-size: 15px;
  }
}

/* 触控友好的点击区域 */
@media (hover: none) {
  button,
  a {
    min-height: 44px;
    min-width: 44px;
  }
}