/* ============================================================
   花厢倪家院子 - 中式纹理动态背景系统
   Huaxiang Chinoiserie Background System
   ============================================================ */

:root {
  /* 花厢东方纸张色彩系统 */
  --hx-paper: #efe7d7;
  --hx-paper-light: #f5efe4;
  --hx-paper-warm: #f0e8d8;
  --hx-ink: #373832;
  --hx-text: #45463f;
  --hx-text-soft: #6b6960;
  --hx-card: rgba(248, 243, 233, 0.88);
  --hx-card-strong: rgba(251, 247, 239, 0.94);
  --hx-border: rgba(112, 103, 83, 0.14);
  --hx-shadow: rgba(55, 56, 50, 0.06);
}

/* 主背景层 - 温润米白底色 */
body {
  background-color: var(--hx-paper);
}

/* 固定背景纹理层 - 米白/黄色区域明显淡黄色纹理 */
.huaxiang-background {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background-color: var(--hx-paper);
  background-image:
    linear-gradient(
      180deg,
      rgba(243, 220, 170, 0.25) 0%,
      rgba(238, 210, 160, 0.35) 50%,
      rgba(232, 200, 150, 0.42) 100%
    ),
    image-set(
      url("images/backgrounds/huaxiang-chinoiserie-desktop.avif") type("image/avif"),
      url("images/backgrounds/huaxiang-chinoiserie-desktop.webp") type("image/webp")
    );
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: scroll;
  opacity: 0.85;
  filter: saturate(1.15) contrast(1.08);
}

/* 移动端背景适配 */
@media (max-width: 768px) {
  .huaxiang-background {
    background-position: 50% top;
    background-image:
      linear-gradient(
        180deg,
        rgba(243, 220, 170, 0.28) 0%,
        rgba(238, 210, 160, 0.38) 50%,
        rgba(232, 200, 150, 0.45) 100%
      ),
      image-set(
        url("images/backgrounds/huaxiang-chinoiserie-mobile.avif") type("image/avif"),
        url("images/backgrounds/huaxiang-chinoiserie-mobile.webp") type("image/webp")
      );
    opacity: 0.80;
    filter: saturate(1.12) contrast(1.06);
  }
}

/* 动态光影层 - 庭院树影效果 */
.huaxiang-light-shadow {
  position: fixed;
  inset: -8%;
  z-index: -9;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
}

.huaxiang-light-shadow::before,
.huaxiang-light-shadow::after {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(
      ellipse 38% 32% at 30% 24%,
      rgba(255, 250, 230, 0.24) 0%,
      rgba(255, 250, 230, 0.08) 28%,
      transparent 56%
    ),
    radial-gradient(
      ellipse 42% 36% at 68% 52%,
      rgba(94, 99, 74, 0.06) 0%,
      rgba(94, 99, 74, 0.02) 32%,
      transparent 52%
    );
  filter: blur(32px);
  will-change: transform, opacity;
  animation: huaxiangLightDrift 38s ease-in-out infinite alternate;
}

.huaxiang-light-shadow::after {
  opacity: 0.48;
  animation-duration: 52s;
  animation-direction: alternate-reverse;
  background:
    radial-gradient(
      ellipse 36% 28% at 72% 28%,
      rgba(255, 248, 221, 0.18) 0%,
      rgba(255, 248, 221, 0.06) 24%,
      transparent 48%
    ),
    radial-gradient(
      ellipse 44% 38% at 26% 66%,
      rgba(112, 108, 88, 0.05) 0%,
      transparent 44%
    );
}

@keyframes huaxiangLightDrift {
  0% {
    transform: translate3d(-1.2%, -0.8%, 0) scale(1.018);
    opacity: 0.42;
  }
  42% {
    transform: translate3d(0.8%, 1.2%, 0) scale(1.036);
    opacity: 0.58;
  }
  100% {
    transform: translate3d(1.6%, -0.4%, 0) scale(1.024);
    opacity: 0.46;
  }
}

/* 移动端光影优化 */
@media (max-width: 768px) {
  .huaxiang-light-shadow::before,
  .huaxiang-light-shadow::after {
    opacity: 0.28;
    animation-duration: 48s;
    filter: blur(24px);
  }

  .huaxiang-light-shadow::after {
    opacity: 0.32;
    animation-duration: 58s;
  }
}

/* 减少动效模式支持 */
@media (prefers-reduced-motion: reduce) {
  .huaxiang-light-shadow::before,
  .huaxiang-light-shadow::after {
    animation: none !important;
    opacity: 0.36;
  }
}

/* 内容卡片 - 宣纸质感 */
.huaxiang-card {
  background: var(--hx-card);
  border: 1px solid var(--hx-border);
  border-radius: 8px;
  box-shadow:
    0 2px 8px var(--hx-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.huaxiang-card-strong {
  background: var(--hx-card-strong);
  border: 1px solid var(--hx-border);
  border-radius: 8px;
  box-shadow:
    0 3px 12px var(--hx-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}

/* 菜单卡片 - 高可读性 */
.menu-item-card {
  background: rgba(252, 249, 242, 0.92);
  border: 1px solid rgba(112, 103, 83, 0.12);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(55, 56, 50, 0.04);
}

/* 页脚 - 深色变体 */
footer.huaxiang-footer {
  background: linear-gradient(
    180deg,
    rgba(46, 44, 40, 0.02) 0%,
    rgba(46, 44, 40, 0.04) 100%
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* 导航栏 - 保持清晰 */
header.site-nav {
  background: rgba(253, 250, 245, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hx-border);
}

/* 白色区域纹理 - 统一使用第二张效果 */
.intro-strip,
.geo-intro-section,
.specialty-section,
.events-section,
.experience-section,
.feature-section,
.itinerary-section,
.guide-section,
.faq-section,
section[style*="background: var(--white)"],
section[style*="background: #fff"],
section[style*="background: white"] {
  position: relative;
}

.intro-strip::before,
.geo-intro-section::before,
.specialty-section::before,
.events-section::before,
.experience-section::before,
.feature-section::before,
.itinerary-section::before,
.guide-section::before,
.faq-section::before,
section[style*="background: var(--white)"]::before,
section[style*="background: #fff"]::before,
section[style*="background: white"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      180deg,
      rgba(243, 220, 170, 0.25) 0%,
      rgba(238, 210, 160, 0.35) 50%,
      rgba(232, 200, 150, 0.42) 100%
    ),
    image-set(
      url("images/backgrounds/huaxiang-chinoiserie-desktop.avif") type("image/avif"),
      url("images/backgrounds/huaxiang-chinoiserie-desktop.webp") type("image/webp")
    );
  background-size: cover;
  background-position: center;
  opacity: 0.85;
  filter: saturate(1.15) contrast(1.08);
  z-index: 0;
}

.intro-strip > *,
.geo-intro-section > *,
.specialty-section > *,
.events-section > *,
.experience-section > *,
.feature-section > *,
.itinerary-section > *,
.guide-section > *,
.faq-section > *,
section[style*="background: var(--white)"] > *,
section[style*="background: #fff"] > *,
section[style*="background: white"] > * {
  position: relative;
  z-index: 1;
}

/* 预加载占位符 - 防止白屏闪烁 */
.huaxiang-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("images/backgrounds/huaxiang-chinoiserie-placeholder.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.6;
  z-index: -1;
}

/* 确保背景图加载后占位符消失 */
.huaxiang-background.loaded::before {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

/* ============================================================
   Hero区域中式纹理遮罩 - 棕色背景用反白遮罩显示纹理
   ============================================================ */

/* Hero区域纹理叠加层 - 深棕色反白线条效果 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(
      ellipse 60% 50% at 45% 40%,
      rgba(255, 248, 230, 0.12) 0%,
      rgba(255, 245, 220, 0.06) 35%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 45% 40% at 70% 65%,
      rgba(255, 250, 235, 0.10) 0%,
      rgba(255, 248, 225, 0.04) 40%,
      transparent 75%
    ),
    image-set(
      url("images/backgrounds/huaxiang-chinoiserie-desktop.avif") type("image/avif"),
      url("images/backgrounds/huaxiang-chinoiserie-desktop.webp") type("image/webp")
    );
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  opacity: 0.38;
  mix-blend-mode: screen;
  filter: brightness(0.95) contrast(1.35) invert(0.05);
  animation: huaxiangHeroLight 42s ease-in-out infinite alternate;
}

@keyframes huaxiangHeroLight {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2%, -1%, 0) scale(1.02);
  }
  100% {
    transform: translate3d(-1%, 1.5%, 0) scale(1.01);
  }
}

/* 移动端Hero纹理 */
@media (max-width: 768px) {
  .hero::after {
    background-image:
      radial-gradient(
        ellipse 65% 55% at 50% 45%,
        rgba(255, 248, 230, 0.10) 0%,
        rgba(255, 245, 220, 0.05) 40%,
        transparent 75%
      ),
      image-set(
        url("images/backgrounds/huaxiang-chinoiserie-mobile.avif") type("image/avif"),
        url("images/backgrounds/huaxiang-chinoiserie-mobile.webp") type("image/webp")
      );
    background-size: 100% 100%, cover;
    opacity: 0.35;
    filter: brightness(0.92) contrast(1.30) invert(0.05);
    animation-duration: 48s;
  }
}

/* 确保Hero内容层级正确 */
.hero-content,
.hero-quick-actions,
.hero-scroll {
  position: relative;
  z-index: 2;
}

/* Hero区域 - 纹理可见度适中 */
.hero-section {
  position: relative;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(243, 235, 221, 0.08) 0%,
    rgba(243, 235, 221, 0.24) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-section > * {
  position: relative;
  z-index: 2;
}

/* 性能优化 - 硬件加速 */
.huaxiang-background,
.huaxiang-light-shadow,
.huaxiang-light-shadow::before,
.huaxiang-light-shadow::after {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 移动端滚动优化 - 避免iOS fixed定位问题 */
@supports (-webkit-touch-callout: none) {
  .huaxiang-background {
    background-attachment: scroll;
  }
}

/* 小屏设备 - 进一步降低透明度 */
@media (max-width: 480px) {
  .huaxiang-card {
    background: rgba(252, 249, 244, 0.94);
  }

  .menu-item-card {
    background: rgba(253, 251, 246, 0.96);
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .huaxiang-card,
  .huaxiang-card-strong,
  .menu-item-card {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.2);
  }
}