html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* 设计令牌：与 Figma / 原页面一致，便于统一改色与排版 */
:root {
  --guigu-navy: #0a2463;
  --guigu-navy-hover: #082050;
  --guigu-slate: #2c3e50;
  --guigu-muted: #5a6c7d;
  --guigu-surface: #fafbfc;
  --guigu-header-h: 5.5rem;
}

/* 整屏分页：视口内轨道平移，每屏一块 section */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body.page-slides {
  overflow: hidden;
}

.page-stage {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
}

.page-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}

.page-track.is-instant {
  transition: none;
}

.page-track.is-sliding-down,
.page-track.is-sliding-up {
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}

@media (prefers-reduced-motion: reduce) {
  .page-track {
    transition-duration: 0.01ms;
  }
}

.slide-section {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--guigu-header-h);
  padding-bottom: 1.5rem;
  position: relative;
  isolation: isolate;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE / 旧 Edge */
}

.slide-section::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* 全宽背景层：Ken Burns 仅在当前屏轻微缩放 */
.slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--slide-bg-image);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  filter: saturate(1.05) brightness(0.92);
  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1s ease;
  pointer-events: none;
}

.slide-section.is-active .slide-bg {
  transform: scale(1);
  filter: saturate(1.08) brightness(1);
}

.slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* 浅色区块：磨砂 + 渐变保证正文可读 */
.slide-overlay--light {
  background: linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(250, 251, 252, 0.88) 45%,
      rgba(255, 255, 255, 0.82) 100%
    ),
    radial-gradient(
      ellipse 120% 80% at 50% 0%,
      rgba(10, 36, 99, 0.06),
      transparent 55%
    );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(10px);
}

/* 首屏：深蓝渐变压暗，突出标题 */
.slide-overlay--hero {
  background: linear-gradient(
      120deg,
      rgba(8, 25, 72, 0.82) 0%,
      rgba(10, 36, 99, 0.55) 42%,
      rgba(12, 40, 90, 0.35) 100%
    ),
    radial-gradient(
      ellipse 100% 70% at 70% 20%,
      rgba(255, 255, 255, 0.12),
      transparent 50%
    );
}

.slide-inner {
  position: relative;
  z-index: 2;
}

/* Experience：Ship Design 船型缩略图悬停放大 */
.experience-vessel-thumb {
  overflow: hidden;
}

.experience-vessel-cell img {
  display: block;
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-vessel-cell:hover img,
.experience-vessel-cell:focus-within img {
  transform: scale(1.08);
}

/* Experience：案例主图 */
.experience-case-feature-img img {
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-case-feature:hover .experience-case-feature-img img {
  transform: scale(1.03);
}

/* 切屏结束后内容入场（由 .is-active 触发，JS 在过渡结束时挂上） */
@keyframes slide-content-in {
  from {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes slide-hero-line {
  from {
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* 内容在滑页期间就开始淡入，与页面切换形成自然衔接 */
.slide-section.is-active .slide-animate {
  animation: slide-content-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

/* Hero 各元素错开出现，增强层次感 */
.slide-section.is-active .slide-animate--hero h1 {
  animation: slide-hero-line 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
}

.slide-section.is-active .slide-animate--hero .hero-sub {
  animation: slide-hero-line 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both;
}

.slide-section.is-active .slide-animate--hero .hero-tagline {
  animation: slide-hero-line 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.58s both;
}

.slide-section.is-active .slide-animate--hero .hero-actions {
  animation: slide-hero-line 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.72s both;
}

@media (prefers-reduced-motion: reduce) {
  .slide-bg {
    transform: scale(1);
    transition: none;
  }

  .slide-section.is-active .slide-bg {
    transform: scale(1);
  }

  .slide-animate,
  .slide-section.is-active .slide-animate,
  .slide-section.is-active .slide-animate--hero h1,
  .slide-section.is-active .slide-animate--hero .hero-sub,
  .slide-section.is-active .slide-animate--hero .hero-tagline,
  .slide-section.is-active .slide-animate--hero .hero-actions {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .scroll-hint,
  .slide-section--hero.is-active .scroll-hint {
    animation: none;
    opacity: 1;
    transform: translateX(-50%);
  }

  .scroll-hint-icon {
    animation: none;
  }

  .slide-nav-dot {
    transition: none;
  }

  .experience-vessel-cell img {
    transition: none;
  }

  .experience-vessel-cell:hover img,
  .experience-vessel-cell:focus-within img {
    transform: none;
  }

  .experience-case-feature:hover .experience-case-feature-img img {
    transform: none;
  }
}

/* 首屏在深色遮罩上：文字改浅色（覆盖原内联色） */
.slide-section--hero .hero-title {
  color: #f4f7fc !important;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.25);
}

.slide-section--hero .hero-sub {
  color: rgba(255, 255, 255, 0.95) !important;
  letter-spacing: 0.12em !important;
}

.slide-section--hero .hero-tagline {
  color: rgba(232, 238, 248, 0.88) !important;
}

.slide-section--hero .hero-actions a:first-of-type {
  background: #fff !important;
  color: var(--guigu-navy) !important;
}

.slide-section--hero .hero-actions a:first-of-type:hover {
  background: #e8edf7 !important;
}

.slide-section--hero .hero-actions a:last-of-type {
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: #fff !important;
}

.slide-section--hero .hero-actions a:last-of-type:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* 顶栏：在首屏深色背景上切换为浅色导航 */
.site-header {
  transition: background-color 0.45s ease, box-shadow 0.45s ease,
    border-color 0.45s ease;
}

.site-header.is-on-dark {
  background-color: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header.is-on-dark .site-logo {
  color: #fff !important;
}

.site-header.is-on-dark .site-nav a {
  color: rgba(255, 255, 255, 0.88) !important;
}

.site-header.is-on-dark .site-nav a:hover {
  color: #fff !important;
}

.site-header.is-on-dark .site-nav a span.absolute {
  background: rgba(255, 255, 255, 0.9) !important;
}

/* Contact 区域：在深蓝上叠一层极淡纹理感 */
.contact-block {
  position: relative;
  overflow: hidden;
}

.contact-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--contact-bg-image, none);
  background-size: cover;
  background-position: center;
  opacity: 0.14;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.contact-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 36, 99, 0.2) 0%,
    rgba(10, 36, 99, 0.92) 100%
  );
  pointer-events: none;
}

.contact-block > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   导航圆点指示器
   ============================================================ */
.slide-nav-dots {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: auto;
}

.slide-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  border: 1.5px solid rgba(10, 36, 99, 0.4);
  background: rgba(10, 36, 99, 0.15);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
  display: block;
}

.slide-nav-dot:hover {
  background: rgba(10, 36, 99, 0.5);
  border-color: rgba(10, 36, 99, 0.75);
  transform: scale(1.4);
}

.slide-nav-dot.is-active {
  background: #0a2463;
  border-color: #0a2463;
  transform: scale(1.7);
}

/* 深色首屏时圆点切换为浅色 */
.slide-nav-dots.is-on-dark .slide-nav-dot {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.22);
}

.slide-nav-dots.is-on-dark .slide-nav-dot:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.85);
}

.slide-nav-dots.is-on-dark .slide-nav-dot.is-active {
  background: #fff;
  border-color: #fff;
}

/* ============================================================
   首屏滚动提示
   ============================================================ */
@keyframes scroll-hint-appear {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50%       { transform: translateY(7px); opacity: 0.3; }
}

.scroll-hint {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
}

.slide-section--hero.is-active .scroll-hint {
  animation: scroll-hint-appear 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.4s both;
}

/* 独立包裹层做弹跳，避免与 rotate 冲突 */
.scroll-hint-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scroll-hint-bounce 1.8s ease-in-out 2.2s infinite;
}

.scroll-hint-arrow {
  width: 10px;
  height: 10px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.65);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.65);
  transform: rotate(45deg);
}

.scroll-hint-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}

/* ============================================================
   活动导航链接高亮
   ============================================================ */
.site-nav a.is-current {
  color: var(--guigu-navy) !important;
}

.site-nav a.is-current > span.absolute {
  width: 100% !important;
  transition: none !important;
}

.site-header.is-on-dark .site-nav a.is-current {
  color: rgba(255, 255, 255, 1) !important;
}

.site-header.is-on-dark .site-nav a.is-current > span.absolute {
  background: rgba(255, 255, 255, 0.9) !important;
  width: 100% !important;
}

/* ============================================================
   过渡期间平滑淡出前一屏内容（避免内容闪现）
   ============================================================ */
.slide-section:not(.is-active) .slide-animate {
  transition: opacity 0.2s ease;
}

/* 按钮悬停过渡更顺滑 */
.hero-actions a {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ============================================================
   卡片交错入场动画（Services / Capability）
   ============================================================ */
@keyframes slide-card-in {
  from {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.slide-section.is-active .card-stagger-1 {
  animation: slide-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both;
}
.slide-section.is-active .card-stagger-2 {
  animation: slide-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
.slide-section.is-active .card-stagger-3 {
  animation: slide-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.60s both;
}
.slide-section.is-active .card-stagger-4 {
  animation: slide-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
}

/* Services、Capability、Experience：flex 列布局使内容垂直居中 */
#services.slide-section,
#capability.slide-section,
#experience.slide-section {
  display: flex;
  flex-direction: column;
}

#experience.slide-section {
  padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
  #experience.slide-section {
    padding-bottom: 0.85rem;
  }
}

#services .slide-inner,
#capability .slide-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

/* Experience：内容较多，小屏收紧上下留白便于一屏内展示 */
#experience .slide-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0.5rem;
  padding-bottom: 0.65rem;
}

@media (min-width: 640px) {
  #experience .slide-inner {
    padding-top: 0.65rem;
    padding-bottom: 0.85rem;
  }
}

@media (min-width: 768px) {
  #experience .slide-inner {
    padding-top: 0.85rem;
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 1024px) {
  #experience .slide-inner {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
  }
}

/* About：flex 列布局将 Contact 块固定在底部 */
#about.slide-section {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  overflow-y: hidden;
}

#about .slide-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

#about .contact-block,
#about .about-contact-wrap {
  flex-shrink: 0;
}

/* 减少动画偏好：关闭卡片交错动画 */
@media (prefers-reduced-motion: reduce) {
  .card-stagger-1,
  .card-stagger-2,
  .card-stagger-3,
  .card-stagger-4 {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   响应式布局
   ============================================================ */

/* 移动端 header 高度收窄 */
@media (max-width: 767px) {
  :root {
    --guigu-header-h: 3.75rem;
  }
}

/* About section：移动端允许内部滚动（内容较多） */
@media (max-width: 767px) {
  #about.slide-section {
    overflow-y: auto;
  }
}

/* ── 汉堡按钮 ── */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  margin-right: -0.25rem;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .hamburger-btn {
    display: flex;
  }
}

.hamburger-line {
  width: 22px;
  height: 1.5px;
  background: currentColor;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-btn.is-open .hamburger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.hamburger-btn.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger-btn.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* 深色首屏上汉堡图标颜色 */
.site-header.is-on-dark .hamburger-line {
  background: rgba(255, 255, 255, 0.9);
}

/* ── 移动端菜单抽屉 ── */
.mobile-menu {
  position: fixed;
  top: var(--guigu-header-h);
  left: 0;
  right: 0;
  z-index: 48;
  background: #fff;
  border-bottom: 1px solid rgba(10, 36, 99, 0.1);
  box-shadow: 0 8px 24px rgba(10, 36, 99, 0.08);
  transform: translateY(-110%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
  pointer-events: none;
  display: none;
}

@media (max-width: 767px) {
  .mobile-menu {
    display: block;
  }
}

.mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}

.mobile-menu-nav a {
  display: block;
  padding: 0.875rem 1.5rem;
  font-size: 15px;
  font-weight: 400;
  color: #2c3e50;
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 36, 99, 0.06);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-menu-nav a:last-child {
  border-bottom: none;
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a.is-current {
  background: rgba(10, 36, 99, 0.04);
  color: #0a2463;
}

/* ── Hero section：响应式字体 ── */
@media (max-width: 639px) {
  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions a {
    padding: 0.8rem 1.5rem !important;
    text-align: center;
    display: block;
  }
}

/* ── Services/Capability/About 标题：超小屏收窄 ── */
@media (max-width: 480px) {
  #services .slide-inner,
  #capability .slide-inner {
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
  }
}