body {
    min-height: 100vh;
    background-image: linear-gradient(to bottom right, #A6DCDD, #83DEB5, #4DB8BA);
    background-attachment: fixed;
    margin: 0; /*贴合浏览器外边距*/
    padding:0;/*贴合浏览器内边距*/
    width: 100%;/*贴合浏览器宽度*/
    height: auto;/*自适应高度，避免底部页脚被裁切*/
    display: block;
  }

  /* 首页场景容器：让轮播与页脚保持固定相对位置，并允许滚动显示完整页脚 */
  .page-scene {
    position: relative;
    min-height: 160vh; /* 给页脚留滚动空间 */
  }
  .container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* =================== 饮品区域 =================== */
  .drinks {
    display: flex;
    justify-content: center;   /* 水平居中分布 */
    align-items: center;       /* 垂直居中 */
    gap: 120px;                 /* 图片间距80px */
    perspective: 1000px;       /* 为3D旋转提供透视效果 */
    width: 100%;               /* 确保容器占满宽度 */
    height: 100vh;             /* 确保容器占满视口高度 */
    position: relative;        /* 为绝对定位提供参考 */
    overflow: hidden; /* ✅ 防止子元素撑宽页面 */
  }

  /* 图片轮播容器 */
  .image-carousel {
    position: absolute;
    left: 50%;
    top: 52vh; /* 保持与视口一致的垂直位置 */
    transform: translate(-50%, -50%) scale(0.95);
    width: 500px; /* 改为500px */
    height: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease, transform 1s ease;
    z-index: 2;
  }
  @keyframes carouselScale {
    0% {
      transform: translate(-50%, -50%) scale(0.95);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .carousel-container {
    position: relative;
    width: 500px; /* 改为500px */
    height: auto;
    overflow: hidden; /* 改回hidden，防止图片溢出 */
    transition: height 0.5s ease; /* 添加高度过渡效果 */
  }

  .carousel-image {
    width: 500px; /* 改为500px */
    height: auto;
    max-height: none; /* 移除最大高度限制 */
    display: block;
    object-fit: contain;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px; /* 添加圆角 */
    overflow: hidden; /* 确保圆角生效 */
  }
  
  /* 第一张图片初始为relative，给容器提供高度 */
  .carousel-image:first-child {
    position: relative;
    opacity: 0; /* 初始仍然隐藏，等待JS控制 */
  }

  /* 圆点指示器 */
  .carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
    position: relative;
    z-index: 10;
  }

  .carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .carousel-dot:hover {
    background-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
  }

  .carousel-dot.active {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 1);
    transform: scale(1.3);
  }

  /* 透明肥皂泡泡装饰 */
  .bubbles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s ease;
  }

  .bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.1);
    animation: floatBubble 12s infinite ease-in-out; /* 默认12秒，JS会动态设置 */
  }

  @keyframes floatBubble {
    0% {
      transform: translate(0, 0) scale(1);
      opacity: 0.3;
    }
    10% {
      transform: translate(20px, -80px) scale(1.05);
      opacity: 0.5;
    }
    25% {
      transform: translate(-15px, -200px) scale(1.1);
      opacity: 0.6;
    }
    40% {
      transform: translate(25px, -400px) scale(0.95);
      opacity: 0.5;
    }
    50% {
      transform: translate(-10px, -600px) scale(1.05);
      opacity: 0.4;
    }
    65% {
      transform: translate(30px, -800px) scale(1.1);
      opacity: 0.5;
    }
    80% {
      transform: translate(-20px, -1000px) scale(0.9);
      opacity: 0.3;
    }
    100% {
      transform: translate(0, calc(-100vh - 200px)) scale(1);
      opacity: 0;
    }
  }

  /* 轮播两侧系列图：左三张、右三张 */
  .series-side {
    position: absolute;
    top: 50vh;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 73px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
    z-index: 2;
  }

  .series-left {
    left: calc(12% - 50px);
  }

  .series-right {
    right: calc(12% - 50px);
  }

  .series-side .series-link {
    display: block;
    line-height: 0;
    text-decoration: none;
  }

  .series-side .series-img {
    width: auto;
    max-width: 420px;
    max-height: 360px;
    object-fit: contain;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
      inset 2px 2px 4px rgba(255, 255, 255, 0.35),
      inset -1px -1px 3px rgba(0, 0, 0, 0.08),
      0 8px 24px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }

  .series-side .series-img:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow:
      inset 2px 2px 4px rgba(255, 255, 255, 0.4),
      inset -1px -1px 3px rgba(0, 0, 0, 0.06),
      0 12px 32px rgba(0, 0, 0, 0.18);
  }

  /* =================== 图片样式 =================== */
  .drink {
    width: auto;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    transition: all 1.8s ease-in-out;
    position: relative;
    z-index: 1;
  }

  /* cali图片在最上层 */
  .drink2 {
    z-index: 10;
    animation: caliFlip 1s ease-in-out forwards;
    animation-delay: 3.5s; /* 等待前面的动画完成 + 0.5s停留 */
  }

  /* U 1图片初始透明，等待显现，始终在cali的位置 */
  .drink5 {
    z-index: 5;
    opacity: 0;
    width: auto;
    height: 300px;
    position: absolute;
    left: calc(50% - 250px); /* cali在flex布局中的位置：中心 + 半个gap */
    top: 20%;
    transform: translate(-50%, -50%);
    animation: u1Appear 1s ease-in-out forwards, u1SlideToCorner 1.5s ease-in-out forwards;
    animation-delay: 3.5s, 8s; /* 与cali翻转同时开始，然后滑到左上角 */
  }

  /* cali图片水平翻转并变透明 */
  @keyframes caliFlip {
    0% {
      transform: scaleX(1);
      opacity: 1;
    }
    50% {
      transform: scaleX(0);
      opacity: 0.5;
    }
    100% {
      transform: scaleX(0);
      opacity: 0;
    }
  }

  /* U 1图片显现 */
  @keyframes u1Appear {
    0% {
      opacity: 0;
      transform: scaleX(0);
    }
    50% {
      opacity: 0.5;
      transform: scaleX(0);
    }
    100% {
      opacity: 1;
      top: 25%;
      transform: scaleX(1);
    }
  }

  /* HA1图片从左侧滑入 */
  .drink6 {
    z-index: 5;
    width: auto;
    height: 150px;
    position: absolute;
    left: -500px;
    top: 48%;
    transform: translateY(-50%);
    border-radius: 0; /* 重置圆角 */
    animation: ha1SlideIn 1.5s ease-out forwards, ha1SlideToCorner 1.5s ease-in-out forwards;
    animation-delay: 4.5s, 8s; /* U1显现完成后开始，然后滑到左上角 */
  }

  /* RORA1图片从右侧滑入 */
  .drink7 {
    z-index: 5;
    width: auto;
    height: 150px;
    position: absolute;
    right: -800px;
    top: 48%;
    transform: translateY(-50%);
    border-radius: 0; /* 重置圆角 */
    animation: rora1SlideIn 1.5s ease-out forwards, rora1SlideToCorner 1.5s ease-in-out forwards;
    animation-delay: 4.5s, 8s; /* 与HA1同时开始，然后滑到左上角 */
  }

  /* Bubble Tea1图片淡入 */
  .drink8 {
    z-index: 3;
    width: auto;
    height: 43px;
    position: absolute;
    left: 52%;
    top: 65%;
    transform: translate(-50%, -50%);
    opacity: 0;
    border-radius: 0; /* 重置圆角 */
    animation: bubbleTeaFadeIn 2s ease-in-out forwards, bubbleTeaSlideToCorner 1.5s ease-in-out forwards;
    animation-delay: 6s, 8s; /* HA1和RORA1滑入完成后开始，然后滑到左上角 */
  }

  /* HA1滑入动画 */
  @keyframes ha1SlideIn {
    0% {
      left: -500px;
    }
    100% {
      left: calc(50% - 520px - 20px - 75px); /* U1左边，间隔20px，U1在calc(50% + 60px) */
    }
  }

  /* RORA1滑入动画 */
  @keyframes rora1SlideIn {
    0% {
      right: -500px;
    }
    100% {
      right: calc(50% - 580px - 20px - 75px); /* U1右边，间隔20px */
    }
  }

  /* Bubble Tea1淡入动画 */
  @keyframes bubbleTeaFadeIn {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  /* U1滑到左上角动画 */
  @keyframes u1SlideToCorner {
    0% {
      left: calc(50% - 140px);
      top: 40%;
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      left: 160px;
      top: 50px;
      transform: translate(-50%, -50%) scale(0.25);
    }
  }

  /* HA1滑到左上角动画 */
  @keyframes ha1SlideToCorner {
    0% {
      left: calc(50% - 520px - 20px - 75px);
      top: 48%;
      transform: translateY(-50%) scale(1);
    }
    100% {
      left: -95px;
      top: 65px;
      transform: translateY(-50%) scale(0.3);
    }
  }

  /* RORA1滑到左上角动画 */
  @keyframes rora1SlideToCorner {
    0% {
      left: calc(50% + 70px - 20px - 75px);
      top: 48%;
      transform: translateY(-50%) scale(1);
    }
    100% {
      left: -55px;
      top: 65px;
      transform: translateY(-50%) scale(0.3);
    }
  }
 

  /* Bubble Tea1滑到左上角动画 */
  @keyframes bubbleTeaSlideToCorner {
    0% {
      left: 52%;
      top: 65%;
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      left: 210px;
      top: 110px;
      transform: translate(-50%, -50%) scale(0.29);
    }
  }

  /* 覆盆子气泡水 - 停留后从左侧移动到中心再变透明 */
  .drink1 {
    animation: slideFromLeft 2s ease-in-out forwards;
    animation-delay: 1.5s;
  }

  @keyframes slideFromLeft {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    50% {
      transform: translateX(370px);
      opacity: 1;
    }
    100% {
      transform: translateX(370px);
      opacity: 0;
    }
  }

  /* 抹茶旋风 - 停留后从右侧移动到中心再变透明 */
  .drink3 {
    animation: slideFromRight 2s ease-in-out forwards;
    animation-delay: 1.5s;
  }

  @keyframes slideFromRight {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    50% {
      transform: translateX(-350px);
      opacity: 1;
    }
    100% {
      transform: translateX(-350px);
      opacity: 0;
    }
  }

  /* 提拉米苏奶茶 - 停留后从最右侧移动到中心再变透明 */
  .drink4 {
    animation: slideFromFarRight 2s ease-in-out forwards;
    animation-delay: 1.5s;
  }

  @keyframes slideFromFarRight {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    50% {
      transform: translateX(-680px);
      opacity: 1;
    }
    100% {
      transform: translateX(-680px);
      opacity: 0;
    }
  }

  /* 响应式定位 - 小屏幕适配 */
  @media (max-width: 768px) {
    .drink5 {
      left: 50px !important;
    }
    .drink6 {
      left: 10px !important;
    }
    .drink7 {
      left: 30px !important;
    }
    .drink8 {
      left: 10px !important;
    }
  }

  @media (max-width: 480px) {
    .drink5 {
      left: 20px !important;
    }
    .drink6 {
      left: 5px !important;
    }
    .drink7 {
      left: 15px !important;
    }
    .drink8 {
      left: 5px !important;
    }
  }

  /* =================== Header：Logo（返回时显示）+ 导航栏（始终显示）=================== */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  /* Logo：只在返回首页时显示 */
  .logo {
    height: 120px;
    width: auto;
    top: -5px;
    left: -20px;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  /* 返回首页时显示 Logo */
  .home-return .logo {
    opacity: 1;
    visibility: visible;
  }

  /* 导航栏：透明玻璃底板样式，与系列按钮一致，与系列按钮同步显示 */
  .header-nav {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-left: auto;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
      inset 2px 2px 4px rgba(255, 255, 255, 0.35),
      inset -1px -1px 3px rgba(0, 0, 0, 0.08),
      0 8px 24px rgba(0, 0, 0, 0.12);
    transition: opacity 1s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    opacity: 0;
    pointer-events: none;
  }

  .header-nav:hover {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow:
      inset 2px 2px 4px rgba(255, 255, 255, 0.4),
      inset -1px -1px 3px rgba(0, 0, 0, 0.06),
      0 12px 32px rgba(0, 0, 0, 0.18);
  }

  /* 下拉菜单容器 */
  .nav-dropdown {
    position: relative;
  }

  /* 导航栏隐藏时，下拉菜单也不可交互 */
  .header-nav[style*="pointer-events: none"] .nav-dropdown {
    pointer-events: none;
  }

  .nav-link {
    display: block;
    line-height: 0;
    text-decoration: none;
    transition: transform 0.3s ease;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .nav-link:hover {
    transform: scale(1.1);
  }

  .nav-icon {
    width: auto;
    height: 40px;
    max-width: 40px;
    object-fit: contain;
    display: block;
  }

  /* 下拉菜单：提高底板不透明度，便于看清文字 */
  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 280px;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
      inset 2px 2px 4px rgba(255, 255, 255, 0.4),
      inset -1px -1px 3px rgba(0, 0, 0, 0.06),
      0 8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1001;
  }

  .nav-dropdown.active .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .dropdown-item {
    display: block;
    padding: 12px 20px;
    color: #5eacad;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 8px;
    margin: 0 8px;
  }

  .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #4d9394;
  }

  .dropdown-item:active {
    background-color: rgba(255, 255, 255, 0.2);
  }

  /* =================== 返回首页：跳过入场动效，直接最终态 ===================
   * 根元素 class 由 JS 根据 sessionStorage 添加：html.home-return
   * 以下仅做状态覆盖，不包含动画关键帧；入场动效仍由上方原有 class 控制。
   */
  .home-return .image-carousel {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }

  .home-return .series-side {
    opacity: 1;
    pointer-events: auto;
  }

  .home-return .header-nav {
    opacity: 1;
    pointer-events: auto;
  }

  .home-return .carousel-dots {
    opacity: 1;
    pointer-events: auto;
  }

  .home-return .bubbles-container {
    opacity: 1;
  }

  /* 【接入点】返回首页时饮品区表现：二选一或自定义
   * 方案 A：隐藏饮品区，只保留轮播+六张系列图
   */
  .home-return .drinks {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
  }
  .home-return .drinks .drink {
    animation: none !important;
  }

  /* 方案 B（可选）：保留饮品区“最终态”（Logo 在左上角等），取消动画
   * 若使用方案 B，请注释掉上面 .home-return .drinks 的 opacity/visibility，
   * 并在此处为 .drink1~.drink8 设置 animation: none 及与入场动效结束帧一致的
   * 位置/透明度，例如：
   * .home-return .drink2 { animation: none; opacity: 0; }
   * .home-return .drink5 { animation: none; left: 160px; top: 50px; transform: translate(-50%, -50%) scale(0.25); opacity: 1; }
   * … 其余 .drink 同理，数值与 u1SlideToCorner / ha1SlideToCorner 等 100% 一致。
   */

  /* =================== 页脚：透明毛玻璃样式，与导航栏一致 =================== */
  .site-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 20px;
    text-align: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
    /* 透明毛玻璃：与 .header-nav 同一风格 */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
      inset 0 2px 4px rgba(255, 255, 255, 0.35),
      inset 0 -1px 3px rgba(0, 0, 0, 0.08),
      0 -8px 24px rgba(0, 0, 0, 0.12);
  }
  .site-footer a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
  }
  .site-footer a:hover {
    text-decoration: underline;
  }
  .site-footer .footer-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    max-width: 980px;
    margin: 0 auto;
    text-align: left;
  }

  .site-footer .footer-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* 分类导航：更大更粗 */
  .site-footer .footer-categories a {
    font-size: 15px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
  }

  /* 法规链接保持小一点 */
  .site-footer .footer-links a {
    font-size: 13px;
    font-weight: 500;
  }

  @media (max-width: 520px) {
    .site-footer {
      padding: 10px 14px;
    }
    .site-footer .footer-categories {
      grid-template-columns: 1fr;
    }
    .site-footer .footer-categories a {
      white-space: normal;
      font-size: 14px;
    }
  }
  .home-return .site-footer {
    opacity: 1;
    pointer-events: auto;
  }

  /* =================== 首页页脚：四列竖排法规导航 =================== */
  .site-footer.footer-legal {
    padding: 30px 20px;
  }

  .site-footer .legal-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 18px;
    max-width: 1040px;
    margin: 0 auto;
    text-align: left;
  }

  .site-footer .legal-footer-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .site-footer .legal-footer-section h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
  }

  .site-footer .legal-footer-section a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    display: block;
    font-size: 13px;
  }

  .site-footer .legal-footer-section a:hover {
    text-decoration: underline;
  }

  .site-footer .legal-footer-section p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
  }

  .site-footer .muted {
    color: rgba(255, 255, 255, 0.75);
  }

  .site-footer .muted-link {
    font-weight: 600;
  }

  .site-footer .legal-footer-copy {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.95);
  }

  .site-footer .ins-qr-icon {
    width: 120px;
    height: 120px;
    border-radius: 14px;
    display: block;
    object-fit: cover;
    margin-top: 6px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .site-footer .ins-qr-icon:hover {
    transform: scale(1.04);
    opacity: 0.95;
  }

  @media (max-width: 700px) {
    .site-footer .legal-footer-grid {
      grid-template-columns: 1fr;
    }
    .site-footer .legal-footer-section {
      align-items: flex-start;
    }
    .site-footer .ins-qr-icon {
      width: 110px;
      height: 110px;
    }
  }