body {
    min-height: 100vh;
    background-image: linear-gradient(to bottom right, #A6DCDD, #83DEB5, #4DB8BA);
    background-attachment: fixed;
    margin: 0; /*贴合浏览器外边距*/
    padding:0;/*贴合浏览器内边距*/
    width: 100%;/*贴合浏览器宽度*/
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
  }

  .logo {
    height: 120px;
    width: auto;
    top: -5px;
    left: -20px;
    position: absolute;
  }

  .photo-stack {
    position: absolute;
   top: 48%;
   left: 50%;
   transform: translate(-50%, -45%);
   width: min(80vw, 520px);
   height: min(60vh, 380px);
   z-index: 0;
   display: block;

  }

  .photo-stack .photo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(36vw, 300px);
    max-width: 300px;
    height: auto;
    border-radius: 20px;
    transform: translate(-50%, -50%) translate(var(--stack-x, 0px), var(--stack-y, 0px)) rotate(var(--stack-rot, 0deg));
    transition: transform 0.6s ease, z-index 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    z-index: var(--stack-z, 1);
    cursor: pointer;
    will-change: transform;
  }

  .photo-stack .photo:nth-child(1) {
    --stack-x: -12px;
    --stack-y: -24px;
    --stack-rot: 6deg;
    --spread-x: -440px;
    --spread-y: -90px;
    --spread-rot: 12deg;
    --stack-z: 9;
  }

  .photo-stack .photo:nth-child(2) {
    --stack-x: 14px;
    --stack-y: -10px;
    --stack-rot: -4deg;
    --spread-x: -120px;
    --spread-y: -100px;
    --spread-rot: -15deg;
    --stack-z: 6;
  }

  .photo-stack .photo:nth-child(3) {
    --stack-x: -28px;
    --stack-y: 8px;
    --stack-rot: 10deg;
    --spread-x: 150px;
    --spread-y: -135px;
    --spread-rot: 14deg;
    --stack-z: 5;
  }

  .photo-stack .photo:nth-child(4) {
    --stack-x: 18px;
    --stack-y: 12px;
    --stack-rot: -8deg;
    --spread-x: 400px;
    --spread-y: -85px;
    --spread-rot: -12deg;
    --stack-z: 4;
  }

  .photo-stack .photo:nth-child(5) {
    --stack-x: -8px;
    --stack-y: 26px;
    --stack-rot: 3deg;
    --spread-x: -600px;
    --spread-y: 100px;
    --spread-rot: -13deg;
    --stack-z: 3;
  }

  .photo-stack .photo:nth-child(6) {
    --stack-x: 24px;
    --stack-y: 30px;
    --stack-rot: -6deg;
    --spread-x: -320px;
    --spread-y: 110px;
    --spread-rot: 11deg;
    --stack-z: 2;
  }

  .photo-stack .photo:nth-child(7) {
    --stack-x: -26px;
    --stack-y: 40px;
    --stack-rot: 8deg;
    --spread-x: -30px;
    --spread-y: 100px;
    --spread-rot: 15deg;
    --stack-z: 1;
  }

  .photo-stack .photo:nth-child(8) {
    --stack-x: 10px;
    --stack-y: 46px;
    --stack-rot: -5deg;
    --spread-x: 260px;
    --spread-y: 110px;
    --spread-rot: -13deg;
    --stack-z: 0;
  }

  .photo-stack .photo:nth-child(9) {
    --stack-x: -6px;
    --stack-y: 54px;
    --stack-rot: 4deg;
    --spread-x: 520px;
    --spread-y: 110px;
    --spread-rot: 11deg;
    --stack-z: -1;
  }

  .photo-stack:hover .photo {
    transform: translate(-50%, -50%) translate(var(--spread-x, 0px), var(--spread-y, 0px)) rotate(var(--spread-rot, 0deg));
    opacity: 0.9;
  }

  .photo-stack:hover .photo:hover {
    transform: translate(-50%, -50%) translate(var(--spread-x, 0px), var(--spread-y, 0px)) rotate(var(--spread-rot, 0deg)) scale(1.1);
    z-index: 30;
    opacity: 1;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24);
  }

  .drink-image {
    position: absolute;
    width: 300px;
    height: auto;
    left: 10%;
    top: 78%;
    margin-bottom: 200px;
    bottom: 50px;
    opacity: 0;
    transition: opacity 1.5s ease-in;
    pointer-events: none;
    z-index: 10;
   
  }

  .drink-image.show {
    opacity: 1;
  }

  #drink-image-2,
  #drink-image-3,
  #drink-image-4,
  #drink-image-5,
  #drink-image-6,
  #drink-image-7,
  #drink-image-8,
  #drink-image-9
  {
    top: 78%;
    margin-bottom: 200px;
  }

  .cali-text {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: 100%;
    font-size: 100px;
    font-weight: bold;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .cali-text.show {
    opacity: 1;
  }

  .cali-description {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: calc(100% + 120px);
    font-size: 25px;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    max-width: 1000px;
  }

  .cali-description.show {
    opacity: 1;
  }


  .jatuni-text {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: 100%;
    font-size: 100px;
    font-weight: bold;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .jatuni-text.show {
    opacity: 1;
  }

  .jatuni-description {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: calc(100% + 120px);
    font-size: 25px;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    max-width: 1000px;
  }

  .jatuni-description.show {
    opacity: 1;
  }

  .juva-text {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: 100%;
    font-size: 100px;
    font-weight: bold;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .juva-text.show {
    opacity: 1;
  }

  .juva-description {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: calc(100% + 120px);
    font-size: 25px;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    max-width: 1000px;
  }

  .juva-description.show {
    opacity: 1;
  }

  .lusaka-text {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: 100%;
    font-size: 100px;
    font-weight: bold;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .lusaka-text.show {
    opacity: 1;
  }

  .lusaka-description {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: calc(100% + 120px);
    font-size: 25px;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    max-width: 1000px;
  }

  .lusaka-description.show {
    opacity: 1;
  }

  .martti-text {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: 100%;
    font-size: 100px;
    font-weight: bold;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .martti-text.show {
    opacity: 1;
  }

  .martti-description {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: calc(100% + 120px);
    font-size: 25px;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    max-width: 1000px;
  }

  .martti-description.show {
    opacity: 1;
  }

  .mikkeli-text {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: 100%;
    font-size: 100px;
    font-weight: bold;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .mikkeli-text.show {
    opacity: 1;
  }

  .mikkeli-description {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: calc(100% + 120px);
    font-size: 25px;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    max-width: 1000px;
  }

  .mikkeli-description.show {
    opacity: 1;
  }

  .natal-text {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: 100%;
    font-size: 100px;
    font-weight: bold;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .natal-text.show {
    opacity: 1;
  }

  .natal-description {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: calc(100% + 120px);
    font-size: 25px;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    max-width: 1000px;
  }

  .natal-description.show {
    opacity: 1;
  }

  .ruopio-text {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: 100%;
    font-size: 100px;
    font-weight: bold;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .ruopio-text.show {
    opacity: 1;
  }

  .ruopio-description {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: calc(100% + 120px);
    font-size: 25px;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    max-width: 1000px;
  }

  .ruopio-description.show {
    opacity: 1;
  }

  .sofia-text {
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: 100%;
    font-size: 100px;
    font-weight: bold;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .sofia-text.show {
    opacity: 1;
  }

  .sofia-description {  
    position: absolute;
    left: calc(10% + 300px + 40px);
    top: calc(100% + 120px);
    font-size: 25px;
    color: white;
    opacity: 0;
    transition: opacity 2s ease-in;
    pointer-events: none;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    max-width: 1000px;
  }

  .sofia-description.show {
    opacity: 1;
  }

  .layered-background {
    position: fixed;
    top: 0%;
    left: 0;
    width: 100%;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: -2;
  }

  .layered-background img {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
  }

  .tea-base {
    bottom: -5%;
  }

  .milk-layer {
    bottom: 0;
    opacity: 0.55;
    mix-blend-mode: screen;
    animation: milkDrift 14s ease-in-out infinite alternate;
  }

  .milk-layer-1 {
    animation-duration: 16s;
    animation-delay: -3s;
  }

  .milk-layer-2 {
    animation-duration: 20s;
    animation-delay: -9s;
    opacity: 0.45;
  }

  @keyframes milkDrift {
    0% {
      transform: translate(-52%, 0);
      opacity: 0.35;
    }
    50% {
      transform: translate(-48%, 2%);
      opacity: 0.65;
    }
    100% {
      transform: translate(-51%, -1%);
      opacity: 0.45;
    }
  }

  .pearls {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160px;
    pointer-events: none;
    z-index: -1;
  }

  .pearl {
    position: absolute;
    bottom: 20px;
    width: 40px;
    height: auto;
    animation: pearlDrift 6s ease-in-out infinite;
    transform-origin: center;
  }

  @keyframes pearlDrift {
    0% {
      transform: translate(-15px, -4px);
    }
    50% {
      transform: translate(15px, 5px);
    }
    100% {
      transform: translate(-15px, -4px);
    }
  }

  .pearl:nth-child(1) { left: 1%; bottom: 40px; animation-duration: 5.3s; animation-delay: 0s; }
  .pearl:nth-child(2) { left: 4%; bottom: 75px; animation-duration: 6.2s; animation-delay: -0.7s; }
  .pearl:nth-child(3) { left: 9%; bottom: 30px; animation-duration: 5.6s; animation-delay: -1.6s; }
  .pearl:nth-child(4) { left: 13%; bottom: 95px; animation-duration: 6.7s; animation-delay: -0.2s; }
  .pearl:nth-child(5) { left: 17%; bottom: 55px; animation-duration: 5.1s; animation-delay: -1.2s; }
  .pearl:nth-child(6) { left: 21%; bottom: 80px; animation-duration: 6.5s; animation-delay: -2.1s; }
  .pearl:nth-child(7) { left: 25%; bottom: 35px; animation-duration: 5.8s; animation-delay: -0.5s; }
  .pearl:nth-child(8) { left: 29%; bottom: 110px; animation-duration: 6.9s; animation-delay: -1.4s; }
  .pearl:nth-child(9) { left: 33%; bottom: 45px; animation-duration: 5.4s; animation-delay: -2.4s; }
  .pearl:nth-child(10) { left: 37%; bottom: 85px; animation-duration: 6.4s; animation-delay: -0.1s; }
  .pearl:nth-child(11) { left: 41%; bottom: 60px; animation-duration: 5.7s; animation-delay: -1s; }
  .pearl:nth-child(12) { left: 45%; bottom: 100px; animation-duration: 6.6s; animation-delay: -1.9s; }
  .pearl:nth-child(13) { left: 49%; bottom: 50px; animation-duration: 5.2s; animation-delay: -0.4s; }
  .pearl:nth-child(14) { left: 53%; bottom: 120px; animation-duration: 6.8s; animation-delay: -1.3s; }
  .pearl:nth-child(15) { left: 57%; bottom: 40px; animation-duration: 5.5s; animation-delay: -2.3s; }
  .pearl:nth-child(16) { left: 61%; bottom: 90px; animation-duration: 6.5s; animation-delay: -0.8s; }
  .pearl:nth-child(17) { left: 65%; bottom: 35px; animation-duration: 5.9s; animation-delay: -1.7s; }
  .pearl:nth-child(18) { left: 69%; bottom: 105px; animation-duration: 6.3s; animation-delay: -0.3s; }
  .pearl:nth-child(19) { left: 73%; bottom: 60px; animation-duration: 5.6s; animation-delay: -1.2s; }
  .pearl:nth-child(20) { left: 77%; bottom: 115px; animation-duration: 6.7s; animation-delay: -2.2s; }
  .pearl:nth-child(21) { left: 81%; bottom: 50px; animation-duration: 5.4s; animation-delay: -0.6s; }
  .pearl:nth-child(22) { left: 85%; bottom: 100px; animation-duration: 6.4s; animation-delay: -1.5s; }
  .pearl:nth-child(23) { left: 89%; bottom: 45px; animation-duration: 5.7s; animation-delay: -2.5s; }
  .pearl:nth-child(24) { left: 93%; bottom: 85px; animation-duration: 6.2s; animation-delay: -0.4s; }
  .pearl:nth-child(25) { left: 7%; bottom: 65px; animation-duration: 5.8s; animation-delay: -1.4s; }
  .pearl:nth-child(26) { left: 15%; bottom: 125px; animation-duration: 6.9s; animation-delay: -2.4s; }
  .pearl:nth-child(27) { left: 23%; bottom: 70px; animation-duration: 5.3s; animation-delay: -0.9s; }
  .pearl:nth-child(28) { left: 35%; bottom: 130px; animation-duration: 6.3s; animation-delay: -1.8s; }
  .pearl:nth-child(29) { left: 55%; bottom: 75px; animation-duration: 5.6s; animation-delay: -0.2s; }
  .pearl:nth-child(30) { left: 95%; bottom: 125px; animation-duration: 6.5s; animation-delay: -1.1s; }