/* 苹果官网风格样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #1d1d1f;
    margin: 0;
    padding: 0;
    height: 100%;
    /* 移除全局safe area padding，由各section单独处理 */
}


/* 动画区域 */
.animation-section {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 100vh;
    height: 100dvh; /* 动态视口高度 */
    scroll-snap-align: start;
}

/* 翻页时钟动画容器 */
.flip-clock-container {
    width: 100%;
    padding: 80px 20px;
    background: linear-gradient(135deg, 
        #667eea 0%, 
        #764ba2 25%, 
        #f093fb 50%, 
        #f5576c 75%, 
        #4facfe 100%);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}


/* 翻页卡片容器 */
.flip-cards-container {
    display: flex;
    gap: 20px;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

/* 单个翻页卡片 */
.flip-card {
    width: 150px;
    height: 150px;
    position: relative;
    perspective: 1000px;
    cursor: pointer;
}

/* 卡片正面 */
.card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0.05) 50%, 
        rgba(255, 255, 255, 0.15) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.6s ease;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    overflow: hidden;
}

/* 卡片背面 */
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(255, 182, 193, 0.25) 0%, 
        rgba(255, 192, 203, 0.15) 50%, 
        rgba(255, 182, 193, 0.25) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.6s ease;
    transform: rotateY(180deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    overflow: hidden;
}

/* 液态流动效果 */
.card-front::before,
.card-back::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.2) 50%, 
        transparent 70%);
    animation: liquidFlow 4s ease-in-out infinite;
    transform: rotate(45deg);
}

.card-back::before {
    animation: liquidFlow 4s ease-in-out infinite reverse;
}

/* 翻转状态 */
.flip-card.flipped .card-front {
    transform: rotateY(-180deg);
}

.flip-card.flipped .card-back {
    transform: rotateY(0deg);
}

/* 主标题 */
.wedding-title {
    font-family: 'Calmsie', cursive, serif;
    font-size: 72px;
    font-weight: normal;
    color: #ffffff;
    text-align: center;
    margin: 0;
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 2px;
    position: relative;
    z-index: 3;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    visibility: hidden; /* 默认隐藏，直到字体加载完成 */
}

.wedding-title.font-loaded {
    visibility: visible; /* 字体加载完成后显示 */
}

.wedding-title.show {
    opacity: 1;
    transform: translateY(0);
}

/* 添加闪烁光效 */
.wedding-title.show::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    animation: titleShine 2s ease-in-out 1.5s;
}

@keyframes titleShine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* 向下箭头 */
.scroll-arrow {
    position: absolute;
    bottom: 40px;
    bottom: calc(40px + env(safe-area-inset-bottom)); /* 考虑安全区域 */
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    opacity: 0;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: showArrow 1s ease-out 5s forwards;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.scroll-arrow:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.arrow-icon {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    animation: bounce 2s infinite;
    pointer-events: auto; /* 允许点击事件 */
}

@keyframes showArrow {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}




/* 动画关键帧 */
@keyframes liquidFlow {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    50% {
        transform: translateX(0%) translateY(0%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 主页面 - 启用滚动对齐 */
main {
    margin: 0;
    padding: 0;
    scroll-snap-type: y mandatory;
    height: 100vh;
    height: 100dvh; /* 动态视口高度，考虑移动端UI */
    overflow-y: scroll;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* 移动端滚动优化 */
    scroll-padding-top: env(safe-area-inset-top);
    scroll-padding-bottom: env(safe-area-inset-bottom);
}

/* 首页横幅 */
.hero-section {
    height: 100vh;
    height: 100dvh; /* 动态视口高度 */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    /* 考虑安全区域 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23ffffff" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23ffffff" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-text {
    animation: fadeInUp 1s ease-out;
    text-align: left;
}

.hero-title {
    font-size: 64px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 20px;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 36px;
    font-weight: 500;
    color: #007aff;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* Avatar头像组 */
.avatar-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    transform: scale(0) translateY(20px);
    flex: 0 0 auto;
}

/* 滚动触发后的动画状态 */
.avatar-group.animate .avatar:nth-child(1) {
    animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation-delay: 0.1s;
}

.avatar-group.animate .avatar:nth-child(2) {
    animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation-delay: 0.3s;
}

.avatar-group.animate .avatar:nth-child(3) {
    animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation-delay: 0.5s;
}

.avatar-group.animate .avatar:nth-child(4) {
    animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation-delay: 0.7s;
}

/* 弹出动画关键帧 */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0) translateY(20px);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.hero-date {
    font-size: 24px;
    font-weight: 400;
    color: #86868b;
    margin-bottom: 40px;
}

.hero-cta {
    margin-top: 40px;
}

.cta-button {
    background: #007aff;
    color: white;
    border: none;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 500;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.cta-button:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3);
}

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeInRight 1s ease-out 0.3s both;
}

.image-placeholder {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.image-placeholder::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 3s infinite;
}

.heart-icon {
    font-size: 120px;
    animation: heartbeat 2s infinite;
}

/* 通用容器 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 通用标题 */
.section-title {
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    color: #1d1d1f;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #007aff;
    border-radius: 2px;
}



/* 幻灯片section */
.slideshow-section {
    height: 100vh;
    height: 100dvh; /* 动态视口高度 */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 滚动照片容器 */
.scrolling-photo {
    position: absolute;
    z-index: 2;
}

.scrolling-photo img {
    width: 80%;
    height: auto;
    max-width: none;
    max-height: none;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    object-fit: contain;
}

/* CSS变量：计算精确的动画参数 */
:root {
    --animation-duration: 60s;
    --diagonal-distance: calc(100vw + 100vh);
}

/* 照片1：从左上角向右下角滚动，向下倾斜15度 */
.photo-1 {
    top: 0;
    left: 0;
    transform: translate(-100%, -100%) rotate(15deg);
    animation: scrollDiagonal1 var(--animation-duration) linear infinite;
    animation-delay: 0s;
}

/* 照片2：从左下角向右上角滚动，向上倾斜15度 */
.photo-2 {
    bottom: 0;
    left: 0;
    transform: translate(-100%, 100%) rotate(-15deg);
    animation: scrollDiagonal2 var(--animation-duration) linear infinite;
    animation-delay: 2s;
}

/* 照片1滚动动画：精确计算确保无缝连接 */
@keyframes scrollDiagonal1 {
    0% {
        transform: translate(-100%, -100%) rotate(15deg);
    }
    100% {
        transform: translate(calc(100vw + 100%), calc(100vh + 100%)) rotate(15deg);
    }
}

/* 照片2滚动动画：精确计算确保无缝连接 */
@keyframes scrollDiagonal2 {
    0% {
        transform: translate(-100%, 100%) rotate(-15deg);
    }
    100% {
        transform: translate(calc(100vw + 100%), calc(-100vh - 100%)) rotate(-15deg);
    }
}

/* 照片1副本：无缝连接 */
.photo-1-copy {
    top: 0;
    left: 0;
    transform: translate(-100%, -100%) rotate(15deg);
    animation: scrollDiagonal1Copy var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-duration) / 2); /* 延迟一半时间 */
}

/* 照片2副本：无缝连接 */
.photo-2-copy {
    bottom: 0;
    left: 0;
    transform: translate(-100%, 100%) rotate(-15deg);
    animation: scrollDiagonal2Copy var(--animation-duration) linear infinite;
    animation-delay: calc(var(--animation-duration) / 2 + 2s); /* 延迟一半时间+2秒 */
}

/* 照片1副本滚动动画：无缝连接 */
@keyframes scrollDiagonal1Copy {
    0% {
        transform: translate(-100%, -100%) rotate(15deg);
    }
    100% {
        transform: translate(calc(100vw + 100%), calc(100vh + 100%)) rotate(15deg);
    }
}

/* 照片2副本滚动动画：无缝连接 */
@keyframes scrollDiagonal2Copy {
    0% {
        transform: translate(-100%, 100%) rotate(-15deg);
    }
    100% {
        transform: translate(calc(100vw + 100%), calc(-100vh - 100%)) rotate(-15deg);
    }
}

.slideshow-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 80vh;
    margin: 0 auto;
    padding: 0 40px;
}

.slideshow-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.slide.active {
    opacity: 1;
    transform: translateX(0);
}

.slide.prev {
    transform: translateX(-100%);
}

.slide-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 60px;
    gap: 60px;
}

.slide-image {
    flex: 0 0 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    border: 8px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.slide-text {
    flex: 1;
    text-align: left;
}

.slide-text h3 {
    font-size: 48px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.slide-text > p {
    font-size: 24px;
    font-weight: 500;
    color: #007aff;
    margin-bottom: 30px;
    letter-spacing: -0.01em;
}

.slide-description p {
    font-size: 18px;
    color: #424245;
    line-height: 1.6;
    margin-bottom: 12px;
}

.slide-description p:last-child {
    margin-bottom: 0;
}

/* 导航点 */
.slide-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.7);
}

/* 导航箭头 */
.slide-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-nav:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.slide-nav.prev {
    left: 20px;
}

.slide-nav.next {
    right: 20px;
}

/* 地图section */
.map-section {
    height: 100vh;
    height: 100dvh; /* 动态视口高度 */
    background: #f5f5f7;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
}

/* 地图布局 - 使用绝对定位 */
.map-layout {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* 动态视口高度 */
    display: flex;
    align-items: center;
}

/* 地图view容器 - 左侧固定 */
.map-view-container {
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 42%;
    max-width: 550px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
}

.map-view-container:hover {
    transform: translateY(-50%) translateY(-5px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
}

.map-view {
    display: none;
}

.location-info {
    padding: 30px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

/* 位置图片容器 - 右侧溢出 */
.location-image-container {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 58%;
    height: 78vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden; /* 改为hidden，防止滑动时露出被遮住的部分 */
}

.location-image {
    width: 105%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

/* 日历section */
.calendar-section {
    height: 100vh;
    height: 100dvh; /* 动态视口高度 */
    background: #f5f5f7;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
}

/* 日历布局 - 使用绝对定位 */
.calendar-layout {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* 动态视口高度 */
    display: flex;
    align-items: center;
}

/* 日历图片容器 - 左侧溢出 */
.calendar-image-container {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 55%;
    height: 78vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden; /* 改为hidden，防止滑动时露出被遮住的部分 */
}

.calendar-image {
    width: 85%;
    height: 90%;
    object-fit: cover;
    object-position: right center;
}

/* 手写圈圈动画 */
.hand-drawn-circle {
    position: absolute;
    top: 70%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    pointer-events: none;
    z-index: 5;
}

.circle-svg {
    width: 100%;
    height: 100%;
}

.brush-path {
    stroke-dasharray: 251.2; /* 2π × 40 */
    stroke-dashoffset: 251.2;
    animation: drawBrush 2.5s ease-in-out forwards;
    animation-delay: 1s;
    filter: drop-shadow(0 2px 4px rgba(255, 59, 48, 0.3));
}

@keyframes drawBrush {
    0% {
        stroke-dashoffset: 251.2;
        opacity: 0;
    }
    20% {
        opacity: 0.8;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* Emoji表情组 */
.emoji-group {
    position: absolute;
    bottom: -15px;
    right: -15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    animation: showEmojis 0.8s ease-out 3.5s forwards;
}

.emoji {
    font-size: 24px;
    display: block;
    animation: bounceEmoji 0.6s ease-out forwards;
    transform: scale(0);
    opacity: 0;
}

.emoji:nth-child(1) { animation-delay: 3.5s; }
.emoji:nth-child(2) { animation-delay: 3.7s; }
.emoji:nth-child(3) { animation-delay: 3.9s; }
.emoji:nth-child(4) { animation-delay: 4.1s; }

/* 循环动画 */
.emoji:nth-child(1) { animation: bounceEmoji 0.6s ease-out 3.5s forwards, fadeOut 0.3s ease-out 4.5s forwards; }
.emoji:nth-child(2) { animation: bounceEmoji 0.6s ease-out 3.7s forwards, fadeOut 0.3s ease-out 4.7s forwards; }
.emoji:nth-child(3) { animation: bounceEmoji 0.6s ease-out 3.9s forwards, fadeOut 0.3s ease-out 4.9s forwards; }
.emoji:nth-child(4) { animation: bounceEmoji 0.6s ease-out 4.1s forwards, fadeOut 0.3s ease-out 5.1s forwards; }

@keyframes showEmojis {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceEmoji {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* 无限循环出现动画 - 50次重复 */
.emoji:nth-child(1) { 
    animation: bounceEmoji 0.6s ease-out 3.5s forwards, 
               fadeOut 0.3s ease-out 4.5s forwards,
               bounceEmoji 0.6s ease-out 5.5s forwards,
               fadeOut 0.3s ease-out 6.5s forwards,
               bounceEmoji 0.6s ease-out 7.5s forwards,
               fadeOut 0.3s ease-out 8.5s forwards,
               bounceEmoji 0.6s ease-out 9.5s forwards,
               fadeOut 0.3s ease-out 10.5s forwards,
               bounceEmoji 0.6s ease-out 11.5s forwards,
               fadeOut 0.3s ease-out 12.5s forwards,
               bounceEmoji 0.6s ease-out 13.5s forwards,
               fadeOut 0.3s ease-out 14.5s forwards,
               bounceEmoji 0.6s ease-out 15.5s forwards,
               fadeOut 0.3s ease-out 16.5s forwards,
               bounceEmoji 0.6s ease-out 17.5s forwards,
               fadeOut 0.3s ease-out 18.5s forwards,
               bounceEmoji 0.6s ease-out 19.5s forwards,
               fadeOut 0.3s ease-out 20.5s forwards,
               bounceEmoji 0.6s ease-out 21.5s forwards,
               fadeOut 0.3s ease-out 22.5s forwards,
               bounceEmoji 0.6s ease-out 23.5s forwards,
               fadeOut 0.3s ease-out 24.5s forwards,
               bounceEmoji 0.6s ease-out 25.5s forwards,
               fadeOut 0.3s ease-out 26.5s forwards,
               bounceEmoji 0.6s ease-out 27.5s forwards,
               fadeOut 0.3s ease-out 28.5s forwards,
               bounceEmoji 0.6s ease-out 29.5s forwards,
               fadeOut 0.3s ease-out 30.5s forwards,
               bounceEmoji 0.6s ease-out 31.5s forwards,
               fadeOut 0.3s ease-out 32.5s forwards,
               bounceEmoji 0.6s ease-out 33.5s forwards,
               fadeOut 0.3s ease-out 34.5s forwards,
               bounceEmoji 0.6s ease-out 35.5s forwards,
               fadeOut 0.3s ease-out 36.5s forwards,
               bounceEmoji 0.6s ease-out 37.5s forwards,
               fadeOut 0.3s ease-out 38.5s forwards,
               bounceEmoji 0.6s ease-out 39.5s forwards,
               fadeOut 0.3s ease-out 40.5s forwards,
               bounceEmoji 0.6s ease-out 41.5s forwards,
               fadeOut 0.3s ease-out 42.5s forwards,
               bounceEmoji 0.6s ease-out 43.5s forwards,
               fadeOut 0.3s ease-out 44.5s forwards,
               bounceEmoji 0.6s ease-out 45.5s forwards,
               fadeOut 0.3s ease-out 46.5s forwards,
               bounceEmoji 0.6s ease-out 47.5s forwards,
               fadeOut 0.3s ease-out 48.5s forwards,
               bounceEmoji 0.6s ease-out 49.5s forwards,
               fadeOut 0.3s ease-out 50.5s forwards,
               bounceEmoji 0.6s ease-out 51.5s forwards,
               fadeOut 0.3s ease-out 52.5s forwards,
               bounceEmoji 0.6s ease-out 53.5s forwards,
               fadeOut 0.3s ease-out 54.5s forwards,
               bounceEmoji 0.6s ease-out 55.5s forwards,
               fadeOut 0.3s ease-out 56.5s forwards,
               bounceEmoji 0.6s ease-out 57.5s forwards,
               fadeOut 0.3s ease-out 58.5s forwards,
               bounceEmoji 0.6s ease-out 59.5s forwards,
               fadeOut 0.3s ease-out 60.5s forwards,
               bounceEmoji 0.6s ease-out 61.5s forwards,
               fadeOut 0.3s ease-out 62.5s forwards,
               bounceEmoji 0.6s ease-out 63.5s forwards,
               fadeOut 0.3s ease-out 64.5s forwards,
               bounceEmoji 0.6s ease-out 65.5s forwards,
               fadeOut 0.3s ease-out 66.5s forwards,
               bounceEmoji 0.6s ease-out 67.5s forwards,
               fadeOut 0.3s ease-out 68.5s forwards,
               bounceEmoji 0.6s ease-out 69.5s forwards,
               fadeOut 0.3s ease-out 70.5s forwards,
               bounceEmoji 0.6s ease-out 71.5s forwards,
               fadeOut 0.3s ease-out 72.5s forwards,
               bounceEmoji 0.6s ease-out 73.5s forwards,
               fadeOut 0.3s ease-out 74.5s forwards,
               bounceEmoji 0.6s ease-out 75.5s forwards,
               fadeOut 0.3s ease-out 76.5s forwards,
               bounceEmoji 0.6s ease-out 77.5s forwards,
               fadeOut 0.3s ease-out 78.5s forwards,
               bounceEmoji 0.6s ease-out 79.5s forwards,
               fadeOut 0.3s ease-out 80.5s forwards,
               bounceEmoji 0.6s ease-out 81.5s forwards,
               fadeOut 0.3s ease-out 82.5s forwards,
               bounceEmoji 0.6s ease-out 83.5s forwards,
               fadeOut 0.3s ease-out 84.5s forwards,
               bounceEmoji 0.6s ease-out 85.5s forwards,
               fadeOut 0.3s ease-out 86.5s forwards,
               bounceEmoji 0.6s ease-out 87.5s forwards,
               fadeOut 0.3s ease-out 88.5s forwards,
               bounceEmoji 0.6s ease-out 89.5s forwards,
               fadeOut 0.3s ease-out 90.5s forwards,
               bounceEmoji 0.6s ease-out 91.5s forwards,
               fadeOut 0.3s ease-out 92.5s forwards,
               bounceEmoji 0.6s ease-out 93.5s forwards,
               fadeOut 0.3s ease-out 94.5s forwards,
               bounceEmoji 0.6s ease-out 95.5s forwards,
               fadeOut 0.3s ease-out 96.5s forwards,
               bounceEmoji 0.6s ease-out 97.5s forwards,
               fadeOut 0.3s ease-out 98.5s forwards,
               bounceEmoji 0.6s ease-out 99.5s forwards,
               fadeOut 0.3s ease-out 100.5s forwards,
               bounceEmoji 0.6s ease-out 101.5s forwards,
               fadeOut 0.3s ease-out 102.5s forwards,
               bounceEmoji 0.6s ease-out 103.5s forwards,
               fadeOut 0.3s ease-out 104.5s forwards;
}

.emoji:nth-child(2) { 
    animation: bounceEmoji 0.6s ease-out 3.7s forwards, 
               fadeOut 0.3s ease-out 4.7s forwards,
               bounceEmoji 0.6s ease-out 5.7s forwards,
               fadeOut 0.3s ease-out 6.7s forwards,
               bounceEmoji 0.6s ease-out 7.7s forwards,
               fadeOut 0.3s ease-out 8.7s forwards,
               bounceEmoji 0.6s ease-out 9.7s forwards,
               fadeOut 0.3s ease-out 10.7s forwards,
               bounceEmoji 0.6s ease-out 11.7s forwards,
               fadeOut 0.3s ease-out 12.7s forwards,
               bounceEmoji 0.6s ease-out 13.7s forwards,
               fadeOut 0.3s ease-out 14.7s forwards,
               bounceEmoji 0.6s ease-out 15.7s forwards,
               fadeOut 0.3s ease-out 16.7s forwards,
               bounceEmoji 0.6s ease-out 17.7s forwards,
               fadeOut 0.3s ease-out 18.7s forwards,
               bounceEmoji 0.6s ease-out 19.7s forwards,
               fadeOut 0.3s ease-out 20.7s forwards,
               bounceEmoji 0.6s ease-out 21.7s forwards,
               fadeOut 0.3s ease-out 22.7s forwards,
               bounceEmoji 0.6s ease-out 23.7s forwards,
               fadeOut 0.3s ease-out 24.7s forwards,
               bounceEmoji 0.6s ease-out 25.7s forwards,
               fadeOut 0.3s ease-out 26.7s forwards,
               bounceEmoji 0.6s ease-out 27.7s forwards,
               fadeOut 0.3s ease-out 28.7s forwards,
               bounceEmoji 0.6s ease-out 29.7s forwards,
               fadeOut 0.3s ease-out 30.7s forwards,
               bounceEmoji 0.6s ease-out 31.7s forwards,
               fadeOut 0.3s ease-out 32.7s forwards,
               bounceEmoji 0.6s ease-out 33.7s forwards,
               fadeOut 0.3s ease-out 34.7s forwards,
               bounceEmoji 0.6s ease-out 35.7s forwards,
               fadeOut 0.3s ease-out 36.7s forwards,
               bounceEmoji 0.6s ease-out 37.7s forwards,
               fadeOut 0.3s ease-out 38.7s forwards,
               bounceEmoji 0.6s ease-out 39.7s forwards,
               fadeOut 0.3s ease-out 40.7s forwards,
               bounceEmoji 0.6s ease-out 41.7s forwards,
               fadeOut 0.3s ease-out 42.7s forwards,
               bounceEmoji 0.6s ease-out 43.7s forwards,
               fadeOut 0.3s ease-out 44.7s forwards,
               bounceEmoji 0.6s ease-out 45.7s forwards,
               fadeOut 0.3s ease-out 46.7s forwards,
               bounceEmoji 0.6s ease-out 47.7s forwards,
               fadeOut 0.3s ease-out 48.7s forwards,
               bounceEmoji 0.6s ease-out 49.7s forwards,
               fadeOut 0.3s ease-out 50.7s forwards,
               bounceEmoji 0.6s ease-out 51.7s forwards,
               fadeOut 0.3s ease-out 52.7s forwards,
               bounceEmoji 0.6s ease-out 53.7s forwards,
               fadeOut 0.3s ease-out 54.7s forwards,
               bounceEmoji 0.6s ease-out 55.7s forwards,
               fadeOut 0.3s ease-out 56.7s forwards,
               bounceEmoji 0.6s ease-out 57.7s forwards,
               fadeOut 0.3s ease-out 58.7s forwards,
               bounceEmoji 0.6s ease-out 59.7s forwards,
               fadeOut 0.3s ease-out 60.7s forwards,
               bounceEmoji 0.6s ease-out 61.7s forwards,
               fadeOut 0.3s ease-out 62.7s forwards,
               bounceEmoji 0.6s ease-out 63.7s forwards,
               fadeOut 0.3s ease-out 64.7s forwards,
               bounceEmoji 0.6s ease-out 65.7s forwards,
               fadeOut 0.3s ease-out 66.7s forwards,
               bounceEmoji 0.6s ease-out 67.7s forwards,
               fadeOut 0.3s ease-out 68.7s forwards,
               bounceEmoji 0.6s ease-out 69.7s forwards,
               fadeOut 0.3s ease-out 70.7s forwards,
               bounceEmoji 0.6s ease-out 71.7s forwards,
               fadeOut 0.3s ease-out 72.7s forwards,
               bounceEmoji 0.6s ease-out 73.7s forwards,
               fadeOut 0.3s ease-out 74.7s forwards,
               bounceEmoji 0.6s ease-out 75.7s forwards,
               fadeOut 0.3s ease-out 76.7s forwards,
               bounceEmoji 0.6s ease-out 77.7s forwards,
               fadeOut 0.3s ease-out 78.7s forwards,
               bounceEmoji 0.6s ease-out 79.7s forwards,
               fadeOut 0.3s ease-out 80.7s forwards,
               bounceEmoji 0.6s ease-out 81.7s forwards,
               fadeOut 0.3s ease-out 82.7s forwards,
               bounceEmoji 0.6s ease-out 83.7s forwards,
               fadeOut 0.3s ease-out 84.7s forwards,
               bounceEmoji 0.6s ease-out 85.7s forwards,
               fadeOut 0.3s ease-out 86.7s forwards,
               bounceEmoji 0.6s ease-out 87.7s forwards,
               fadeOut 0.3s ease-out 88.7s forwards,
               bounceEmoji 0.6s ease-out 89.7s forwards,
               fadeOut 0.3s ease-out 90.7s forwards,
               bounceEmoji 0.6s ease-out 91.7s forwards,
               fadeOut 0.3s ease-out 92.7s forwards,
               bounceEmoji 0.6s ease-out 93.7s forwards,
               fadeOut 0.3s ease-out 94.7s forwards,
               bounceEmoji 0.6s ease-out 95.7s forwards,
               fadeOut 0.3s ease-out 96.7s forwards,
               bounceEmoji 0.6s ease-out 97.7s forwards,
               fadeOut 0.3s ease-out 98.7s forwards,
               bounceEmoji 0.6s ease-out 99.7s forwards,
               fadeOut 0.3s ease-out 100.7s forwards,
               bounceEmoji 0.6s ease-out 101.7s forwards,
               fadeOut 0.3s ease-out 102.7s forwards,
               bounceEmoji 0.6s ease-out 103.7s forwards,
               fadeOut 0.3s ease-out 104.7s forwards;
}

.emoji:nth-child(3) { 
    animation: bounceEmoji 0.6s ease-out 3.9s forwards, 
               fadeOut 0.3s ease-out 4.9s forwards,
               bounceEmoji 0.6s ease-out 5.9s forwards,
               fadeOut 0.3s ease-out 6.9s forwards,
               bounceEmoji 0.6s ease-out 7.9s forwards,
               fadeOut 0.3s ease-out 8.9s forwards,
               bounceEmoji 0.6s ease-out 9.9s forwards,
               fadeOut 0.3s ease-out 10.9s forwards,
               bounceEmoji 0.6s ease-out 11.9s forwards,
               fadeOut 0.3s ease-out 12.9s forwards,
               bounceEmoji 0.6s ease-out 13.9s forwards,
               fadeOut 0.3s ease-out 14.9s forwards,
               bounceEmoji 0.6s ease-out 15.9s forwards,
               fadeOut 0.3s ease-out 16.9s forwards,
               bounceEmoji 0.6s ease-out 17.9s forwards,
               fadeOut 0.3s ease-out 18.9s forwards,
               bounceEmoji 0.6s ease-out 19.9s forwards,
               fadeOut 0.3s ease-out 20.9s forwards,
               bounceEmoji 0.6s ease-out 21.9s forwards,
               fadeOut 0.3s ease-out 22.9s forwards,
               bounceEmoji 0.6s ease-out 23.9s forwards,
               fadeOut 0.3s ease-out 24.9s forwards,
               bounceEmoji 0.6s ease-out 25.9s forwards,
               fadeOut 0.3s ease-out 26.9s forwards,
               bounceEmoji 0.6s ease-out 27.9s forwards,
               fadeOut 0.3s ease-out 28.9s forwards,
               bounceEmoji 0.6s ease-out 29.9s forwards,
               fadeOut 0.3s ease-out 30.9s forwards,
               bounceEmoji 0.6s ease-out 31.9s forwards,
               fadeOut 0.3s ease-out 32.9s forwards,
               bounceEmoji 0.6s ease-out 33.9s forwards,
               fadeOut 0.3s ease-out 34.9s forwards,
               bounceEmoji 0.6s ease-out 35.9s forwards,
               fadeOut 0.3s ease-out 36.9s forwards,
               bounceEmoji 0.6s ease-out 37.9s forwards,
               fadeOut 0.3s ease-out 38.9s forwards,
               bounceEmoji 0.6s ease-out 39.9s forwards,
               fadeOut 0.3s ease-out 40.9s forwards,
               bounceEmoji 0.6s ease-out 41.9s forwards,
               fadeOut 0.3s ease-out 42.9s forwards,
               bounceEmoji 0.6s ease-out 43.9s forwards,
               fadeOut 0.3s ease-out 44.9s forwards,
               bounceEmoji 0.6s ease-out 45.9s forwards,
               fadeOut 0.3s ease-out 46.9s forwards,
               bounceEmoji 0.6s ease-out 47.9s forwards,
               fadeOut 0.3s ease-out 48.9s forwards,
               bounceEmoji 0.6s ease-out 49.9s forwards,
               fadeOut 0.3s ease-out 50.9s forwards,
               bounceEmoji 0.6s ease-out 51.9s forwards,
               fadeOut 0.3s ease-out 52.9s forwards,
               bounceEmoji 0.6s ease-out 53.9s forwards,
               fadeOut 0.3s ease-out 54.9s forwards,
               bounceEmoji 0.6s ease-out 55.9s forwards,
               fadeOut 0.3s ease-out 56.9s forwards,
               bounceEmoji 0.6s ease-out 57.9s forwards,
               fadeOut 0.3s ease-out 58.9s forwards,
               bounceEmoji 0.6s ease-out 59.9s forwards,
               fadeOut 0.3s ease-out 60.9s forwards,
               bounceEmoji 0.6s ease-out 61.9s forwards,
               fadeOut 0.3s ease-out 62.9s forwards,
               bounceEmoji 0.6s ease-out 63.9s forwards,
               fadeOut 0.3s ease-out 64.9s forwards,
               bounceEmoji 0.6s ease-out 65.9s forwards,
               fadeOut 0.3s ease-out 66.9s forwards,
               bounceEmoji 0.6s ease-out 67.9s forwards,
               fadeOut 0.3s ease-out 68.9s forwards,
               bounceEmoji 0.6s ease-out 69.9s forwards,
               fadeOut 0.3s ease-out 70.9s forwards,
               bounceEmoji 0.6s ease-out 71.9s forwards,
               fadeOut 0.3s ease-out 72.9s forwards,
               bounceEmoji 0.6s ease-out 73.9s forwards,
               fadeOut 0.3s ease-out 74.9s forwards,
               bounceEmoji 0.6s ease-out 75.9s forwards,
               fadeOut 0.3s ease-out 76.9s forwards,
               bounceEmoji 0.6s ease-out 77.9s forwards,
               fadeOut 0.3s ease-out 78.9s forwards,
               bounceEmoji 0.6s ease-out 79.9s forwards,
               fadeOut 0.3s ease-out 80.9s forwards,
               bounceEmoji 0.6s ease-out 81.9s forwards,
               fadeOut 0.3s ease-out 82.9s forwards,
               bounceEmoji 0.6s ease-out 83.9s forwards,
               fadeOut 0.3s ease-out 84.9s forwards,
               bounceEmoji 0.6s ease-out 85.9s forwards,
               fadeOut 0.3s ease-out 86.9s forwards,
               bounceEmoji 0.6s ease-out 87.9s forwards,
               fadeOut 0.3s ease-out 88.9s forwards,
               bounceEmoji 0.6s ease-out 89.9s forwards,
               fadeOut 0.3s ease-out 90.9s forwards,
               bounceEmoji 0.6s ease-out 91.9s forwards,
               fadeOut 0.3s ease-out 92.9s forwards,
               bounceEmoji 0.6s ease-out 93.9s forwards,
               fadeOut 0.3s ease-out 94.9s forwards,
               bounceEmoji 0.6s ease-out 95.9s forwards,
               fadeOut 0.3s ease-out 96.9s forwards,
               bounceEmoji 0.6s ease-out 97.9s forwards,
               fadeOut 0.3s ease-out 98.9s forwards,
               bounceEmoji 0.6s ease-out 99.9s forwards,
               fadeOut 0.3s ease-out 100.9s forwards,
               bounceEmoji 0.6s ease-out 101.9s forwards,
               fadeOut 0.3s ease-out 102.9s forwards,
               bounceEmoji 0.6s ease-out 103.9s forwards,
               fadeOut 0.3s ease-out 104.9s forwards;
}

.emoji:nth-child(4) { 
    animation: bounceEmoji 0.6s ease-out 4.1s forwards, 
               fadeOut 0.3s ease-out 5.1s forwards,
               bounceEmoji 0.6s ease-out 6.1s forwards,
               fadeOut 0.3s ease-out 7.1s forwards,
               bounceEmoji 0.6s ease-out 8.1s forwards,
               fadeOut 0.3s ease-out 9.1s forwards,
               bounceEmoji 0.6s ease-out 10.1s forwards,
               fadeOut 0.3s ease-out 11.1s forwards,
               bounceEmoji 0.6s ease-out 12.1s forwards,
               fadeOut 0.3s ease-out 13.1s forwards,
               bounceEmoji 0.6s ease-out 14.1s forwards,
               fadeOut 0.3s ease-out 15.1s forwards,
               bounceEmoji 0.6s ease-out 16.1s forwards,
               fadeOut 0.3s ease-out 17.1s forwards,
               bounceEmoji 0.6s ease-out 18.1s forwards,
               fadeOut 0.3s ease-out 19.1s forwards,
               bounceEmoji 0.6s ease-out 20.1s forwards,
               fadeOut 0.3s ease-out 21.1s forwards,
               bounceEmoji 0.6s ease-out 22.1s forwards,
               fadeOut 0.3s ease-out 23.1s forwards,
               bounceEmoji 0.6s ease-out 24.1s forwards,
               fadeOut 0.3s ease-out 25.1s forwards,
               bounceEmoji 0.6s ease-out 26.1s forwards,
               fadeOut 0.3s ease-out 27.1s forwards,
               bounceEmoji 0.6s ease-out 28.1s forwards,
               fadeOut 0.3s ease-out 29.1s forwards,
               bounceEmoji 0.6s ease-out 30.1s forwards,
               fadeOut 0.3s ease-out 31.1s forwards,
               bounceEmoji 0.6s ease-out 32.1s forwards,
               fadeOut 0.3s ease-out 33.1s forwards,
               bounceEmoji 0.6s ease-out 34.1s forwards,
               fadeOut 0.3s ease-out 35.1s forwards,
               bounceEmoji 0.6s ease-out 36.1s forwards,
               fadeOut 0.3s ease-out 37.1s forwards,
               bounceEmoji 0.6s ease-out 38.1s forwards,
               fadeOut 0.3s ease-out 39.1s forwards,
               bounceEmoji 0.6s ease-out 40.1s forwards,
               fadeOut 0.3s ease-out 41.1s forwards,
               bounceEmoji 0.6s ease-out 42.1s forwards,
               fadeOut 0.3s ease-out 43.1s forwards,
               bounceEmoji 0.6s ease-out 44.1s forwards,
               fadeOut 0.3s ease-out 45.1s forwards,
               bounceEmoji 0.6s ease-out 46.1s forwards,
               fadeOut 0.3s ease-out 47.1s forwards,
               bounceEmoji 0.6s ease-out 48.1s forwards,
               fadeOut 0.3s ease-out 49.1s forwards,
               bounceEmoji 0.6s ease-out 50.1s forwards,
               fadeOut 0.3s ease-out 51.1s forwards,
               bounceEmoji 0.6s ease-out 52.1s forwards,
               fadeOut 0.3s ease-out 53.1s forwards,
               bounceEmoji 0.6s ease-out 54.1s forwards,
               fadeOut 0.3s ease-out 55.1s forwards,
               bounceEmoji 0.6s ease-out 56.1s forwards,
               fadeOut 0.3s ease-out 57.1s forwards,
               bounceEmoji 0.6s ease-out 58.1s forwards,
               fadeOut 0.3s ease-out 59.1s forwards,
               bounceEmoji 0.6s ease-out 60.1s forwards,
               fadeOut 0.3s ease-out 61.1s forwards,
               bounceEmoji 0.6s ease-out 62.1s forwards,
               fadeOut 0.3s ease-out 63.1s forwards,
               bounceEmoji 0.6s ease-out 64.1s forwards,
               fadeOut 0.3s ease-out 65.1s forwards,
               bounceEmoji 0.6s ease-out 66.1s forwards,
               fadeOut 0.3s ease-out 67.1s forwards,
               bounceEmoji 0.6s ease-out 68.1s forwards,
               fadeOut 0.3s ease-out 69.1s forwards,
               bounceEmoji 0.6s ease-out 70.1s forwards,
               fadeOut 0.3s ease-out 71.1s forwards,
               bounceEmoji 0.6s ease-out 72.1s forwards,
               fadeOut 0.3s ease-out 73.1s forwards,
               bounceEmoji 0.6s ease-out 74.1s forwards,
               fadeOut 0.3s ease-out 75.1s forwards,
               bounceEmoji 0.6s ease-out 76.1s forwards,
               fadeOut 0.3s ease-out 77.1s forwards,
               bounceEmoji 0.6s ease-out 78.1s forwards,
               fadeOut 0.3s ease-out 79.1s forwards,
               bounceEmoji 0.6s ease-out 80.1s forwards,
               fadeOut 0.3s ease-out 81.1s forwards,
               bounceEmoji 0.6s ease-out 82.1s forwards,
               fadeOut 0.3s ease-out 83.1s forwards,
               bounceEmoji 0.6s ease-out 84.1s forwards,
               fadeOut 0.3s ease-out 85.1s forwards,
               bounceEmoji 0.6s ease-out 86.1s forwards,
               fadeOut 0.3s ease-out 87.1s forwards,
               bounceEmoji 0.6s ease-out 88.1s forwards,
               fadeOut 0.3s ease-out 89.1s forwards,
               bounceEmoji 0.6s ease-out 90.1s forwards,
               fadeOut 0.3s ease-out 91.1s forwards,
               bounceEmoji 0.6s ease-out 92.1s forwards,
               fadeOut 0.3s ease-out 93.1s forwards,
               bounceEmoji 0.6s ease-out 94.1s forwards,
               fadeOut 0.3s ease-out 95.1s forwards,
               bounceEmoji 0.6s ease-out 96.1s forwards,
               fadeOut 0.3s ease-out 97.1s forwards,
               bounceEmoji 0.6s ease-out 98.1s forwards,
               fadeOut 0.3s ease-out 99.1s forwards,
               bounceEmoji 0.6s ease-out 100.1s forwards,
               fadeOut 0.3s ease-out 101.1s forwards,
               bounceEmoji 0.6s ease-out 102.1s forwards,
               fadeOut 0.3s ease-out 103.1s forwards,
               bounceEmoji 0.6s ease-out 104.1s forwards,
               fadeOut 0.3s ease-out 105.1s forwards;
}

/* 日历view容器 - 右侧固定 */
.calendar-view-container {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 42%;
    max-width: 550px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
}

.calendar-view-container:hover {
    transform: translateY(-50%) translateY(-5px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
}

.time-info {
    padding: 30px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.time-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px; /* 标签与内容的间距 */
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.time-item:last-of-type {
    border-bottom: none;
    margin-bottom: 20px;
}

.time-label {
    font-size: 16px;
    color: #666;
    font-weight: 500;
}

.time-value {
    font-size: 16px;
    color: #1d1d1f;
    font-weight: 600;
}

.time-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* 6px * 0.8 = 5px */
    background: #F8CDA9; /* 暖橙色 */
    color: white;
    padding: 6px 11px; /* 8px 14px * 0.8 */
    border-radius: 14px; /* 18px * 0.8 = 14px */
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 9px; /* 11px * 0.8 = 9px */
    white-space: nowrap;
    text-decoration: none;
    font-weight: 500;
}

.time-action:hover {
    background: #E6B895; /* 暖橙色悬停 */
}

.time-action:nth-child(2) {
    background: #CC7578; /* 暖红色 */
}

/* Tab内容切换 - 左右滑动动画 */
.tab-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* 激活状态 - 显示在中央 */
.tab-content.active,
#map-content.active,
#calendar-content.active {
    transform: translateX(0);
}

/* 非激活状态 - 隐藏在左侧 */
.tab-content.inactive-left,
#map-content.inactive-left,
#calendar-content.inactive-left {
    transform: translateX(-100%);
}

/* 非激活状态 - 隐藏在右侧 */
.tab-content.inactive-right,
#map-content.inactive-right,
#calendar-content.inactive-right {
    transform: translateX(100%);
}

/* Tab切换器 - 默认隐藏 */
.tab-switcher {
    display: none;
}

/* Tab切换器 - 只在地图section显示 */
.map-section .tab-switcher {
    position: absolute;
    bottom: 30px;
    bottom: calc(30px + env(safe-area-inset-bottom)); /* 考虑安全区域 */
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 8px;
    gap: 4px;
    z-index: 10;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

.tab-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #333;
}

.tab-item.active {
    background: rgba(255, 255, 255, 0.2);
    color: #333;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.tab-icon {
    font-size: 16px;
}

.tab-text {
    font-size: 14px;
    font-weight: 500;
}


.map-view {
    background: linear-gradient(135deg, 
        rgba(255, 167, 38, 0.2) 0%, 
        rgba(255, 152, 0, 0.3) 50%, 
        rgba(255, 167, 38, 0.2) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.map-view::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: liquidFlow 3s linear infinite;
    transform: rotate(45deg);
}

.location-info {
    padding: 30px;
}

.location-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}

.button-group {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-end; /* 右对齐按钮组 */
}

.location-item:last-of-type {
    border-bottom: none;
    margin-bottom: 20px;
}

.location-label {
    font-size: 16px;
    color: #666;
    font-weight: 500;
}

.location-value {
    font-size: 16px;
    color: #1d1d1f;
    font-weight: 600;
}

.metro-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.metro-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.location-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* 6px * 0.8 = 5px */
    background: #F8CDA9; /* 暖橙色 */
    color: white;
    padding: 6px 11px; /* 8px 14px * 0.8 */
    border-radius: 14px; /* 18px * 0.8 = 14px */
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 9px; /* 11px * 0.8 = 9px */
    white-space: nowrap;
    text-decoration: none;
    font-weight: 500;
}

.location-action:hover {
    background: #E6B895; /* 暖橙色悬停 */
}

.location-action:nth-child(2) {
    background: #CC7578; /* 暖红色 */
}

.location-action:nth-child(2):hover {
    background: #B86568; /* 暖红色悬停 */
}

/* 日历卡片 */
.calendar-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 800px;
    margin: 0 auto;
}

.calendar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
}

.calendar-view {
    background: linear-gradient(135deg, 
        rgba(255, 167, 38, 0.2) 0%, 
        rgba(255, 152, 0, 0.3) 50%, 
        rgba(255, 167, 38, 0.2) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.calendar-view::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: liquidFlow 3s linear infinite;
    transform: rotate(45deg);
    animation-delay: 1.5s;
}

.time-info {
    padding: 30px;
}

.time-section h4 {
    font-size: 20px;
    color: #1d1d1f;
    margin-bottom: 15px;
    font-weight: 600;
}

.ceremony-time {
    font-size: 18px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.5;
}

.calendar-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #34C759;
    color: white;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    margin-top: 25px;
    transition: background 0.3s ease;
}

.calendar-action:hover {
    background: #28a745;
}

.action-text {
    font-size: 16px;
    font-weight: 500;
}

.action-icon {
    font-size: 18px;
}


/* 页脚 */
.footer {
    background: #1d1d1f;
    color: #f5f5f7;
    padding: 60px 0;
    text-align: center;
}

.footer p {
    font-size: 16px;
    margin-bottom: 10px;
}

.footer p:last-child {
    margin-bottom: 0;
    font-size: 14px;
    color: #86868b;
}

/* 动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* 翻页时钟响应式设计 */
/* 大屏幕 - 4个一行 (默认样式已设置) */

/* 中等屏幕 - 保持4个一行，但缩小尺寸 */
@media (max-width: 1024px) {
    .flip-cards-container {
        gap: 18px;
    }

    .flip-card {
        width: 130px;
        height: 130px;
    }

    .card-front,
    .card-back {
        font-size: 50px;
    }
}

/* 平板端 - 2个一行 */
@media (max-width: 768px) {
    .flip-cards-container {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 320px;
        margin: 0 auto 60px;
    }
    
    .flip-card {
        width: 140px;
        height: 140px;
        flex: 0 0 calc(50% - 10px);
    }
    
    .card-front,
    .card-back {
        font-size: 55px;
    }
    
    .wedding-title {
        font-size: 48px;
        padding: 0 20px;
        letter-spacing: 1px;
    }
    
    .wedding-title.show {
        opacity: 1;
        transform: translateY(0);
    }
    
}

/* 小屏幕平板 - 2个一行，进一步缩小 */
@media (max-width: 640px) {
    .flip-cards-container {
        gap: 15px;
        max-width: 280px;
    }

    .flip-card {
        width: 120px;
        height: 120px;
        flex: 0 0 calc(50% - 7.5px);
    }

    .card-front,
    .card-back {
        font-size: 45px;
    }
    
    /* 小屏幕平板按钮组右对齐 */
    .button-group {
        justify-content: flex-end;
    }
}

/* 手机端 - 保持2个一行 */
@media (max-width: 480px) {
    .flip-cards-container {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 260px;
        margin: 0 auto 60px;
    }
    
    .flip-card {
        width: 110px;
        height: 110px;
        flex: 0 0 calc(50% - 6px);
    }
    
    .card-front,
    .card-back {
        font-size: 40px;
    }
    
    .wedding-title {
        font-size: 36px;
        letter-spacing: 0.5px;
    }
    
    .wedding-title.show {
        opacity: 1;
        transform: translateY(0);
    }
    
}

/* 移动端：让日历卡片宽度为上方日历图片的 75% 并居中 */
@media (max-width: 768px) {
    .map-section #calendar-content .calendar-view-container {
        width: 75% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* 平板端按钮组右对齐 */
    .button-group {
        justify-content: flex-end;
    }
}

/* 超小屏幕 - 仍保持2个一行，进一步缩小 */
@media (max-width: 360px) {
    .flip-cards-container {
        gap: 10px;
        max-width: 230px;
    }

    .flip-card {
        width: 100px;
        height: 100px;
        flex: 0 0 calc(50% - 5px);
    }

    .card-front,
    .card-back {
        font-size: 35px;
    }

    .wedding-title {
        font-size: 32px;
        letter-spacing: 0.3px;
    }
}

/* Hero section头像响应式设计 */
/* 大屏幕 - 4个一行 (默认样式) */

/* 中等屏幕 - 保持4个一行，但缩小尺寸 */
@media (max-width: 1024px) {
    .avatar-group {
        gap: 20px;
    }

    .avatar {
        width: 90px;
        height: 90px;
        border-width: 5px;
    }
}

/* 平板端 - 保持4个一行 */
@media (max-width: 768px) {
    /* 移动端启用滚动对齐 */
    main {
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-text {
        text-align: left; /* 保持左对齐 */
    }
    
    .hero-title {
        font-size: 48px;
    }
    
    .hero-subtitle {
        font-size: 28px;
    }
    
    .avatar-group {
        gap: 16px;
        margin-bottom: 25px;
        justify-content: flex-start;
    }
    
    .avatar {
        width: 80px;
        height: 80px;
        border-width: 4px;
    }
    
    .hero-date {
        font-size: 20px;
    }
    
    .section-title {
        font-size: 36px;
    }
    
    /* 768px以下设备向下箭头调整 */
    .scroll-arrow {
        bottom: 25px; /* 减少底部距离 */
        bottom: calc(25px + env(safe-area-inset-bottom)); /* 考虑安全区域 */
        width: 45px; /* 缩小尺寸 */
        height: 45px;
        margin-left: -22.5px; /* 调整居中 */
    }
    
    .arrow-icon {
        font-size: 18px; /* 缩小图标 */
    }
    
    /* 地图section移动端完全重写 */
    .map-section {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh; /* 动态视口高度 */
        padding: 20px;
        background: #f5f5f7;
    }
    
    /* 隐藏桌面端的所有绝对定位元素 */
    .map-view-container,
    .calendar-view-container,
    .location-image-container,
    .calendar-image-container {
        display: none !important;
    }
    
    .map-layout {
        position: relative;
        width: 100%;
        height: auto;
        display: block;
        padding: 0;
    }
    
    /* Tab内容使用简单布局 */
    .map-section .tab-content {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        flex-direction: column !important;
        gap: 15px !important; /* 减少gap，因为图片容器已有margin */
        padding: 25px 20px 30px 20px !important; /* 增加顶部和底部padding */
        /* 保持桌面端的动画效果 */
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        will-change: transform;
        box-sizing: border-box;
    }
    
    /* 移动端Tab切换：保持transform动画 */
    .map-section .tab-content.active {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }

    /* 移动端非激活状态使用transform */
    .map-section .tab-content.inactive-left {
        transform: translateX(-100%) !important;
    }
    
    .map-section .tab-content.inactive-right {
        transform: translateX(100%) !important;
    }

    /* 移动端重新显示容器并调整布局 */
    .map-section .map-view-container,
    .map-section .calendar-view-container {
        display: block !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        order: 2;
        margin: 0 auto !important; /* 居中容器 */
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }

    .map-section .location-image-container,
    .map-section .calendar-image-container {
        display: block !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        height: 280px !important; /* 提大移动端图片容器高度，提升可视尺寸 */
        order: 1;
        margin: 20px auto 35px auto !important; /* 居中图片容器 */
        border-radius: 15px;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        box-shadow: none; /* 去掉阴影 */
        border: none; /* 去掉边框 */
        background: transparent; /* 完全透明背景 */
    }

    /* 移动端地图图片样式 - 完整显示 */
    .map-section .location-image {
        width: 100%;
        height: 100%;
        object-fit: contain; /* 改为contain确保完整显示 */
        object-position: center center; /* 居中显示 */
        transform: none;
        background: rgba(248, 248, 250, 0.8); /* 添加背景色填充空白区域 */
    }
    
    /* 移动端日历图片保持原样式 */
    .map-section .calendar-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
        transform: none;
    }

    .map-section .location-info,
    .map-section .time-info {
        padding: 25px;
        background: transparent;
        text-align: center; /* 信息内容居中 */
        max-width: 100%; /* 增加最大宽度 */
        margin: 0 auto; /* 居中 */
    }

    /* 手写圈圈在移动端的调整 */
    .map-section .hand-drawn-circle {
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
    }

    /* 移动端Tab切换器调整 */
    .map-section .tab-switcher {
        position: absolute;
        bottom: 16px; /* 20px * 0.8 = 16px */
        bottom: calc(16px + env(safe-area-inset-bottom)); /* 考虑安全区域 */
        z-index: 100;
        padding: 6px; /* 8px * 0.8 = 6px */
        gap: 3px; /* 4px * 0.8 = 3px */
        border-radius: 20px; /* 25px * 0.8 = 20px */
    }
    
    .tab-item {
        padding: 10px 16px; /* 12px 20px * 0.8 */
        border-radius: 16px; /* 20px * 0.8 = 16px */
        gap: 6px; /* 8px * 0.8 = 6px */
        font-size: 7px; /* 11px * 0.8 = 9px，进一步缩小 */
        white-space: nowrap; /* 防止文字换行 */
        min-width: 60px; /* 设置最小宽度 */
    }
    
    
    .ceremony-details {
        grid-template-columns: 1fr;
    }
    
    .ceremony-card {
        padding: 30px;
    }
    
    
    .image-placeholder {
        width: 300px;
        height: 300px;
    }
    
    .heart-icon {
        font-size: 80px;
    }
}

/* 小屏幕平板 - 保持4个一行，进一步缩小 */
@media (max-width: 640px) {
    .avatar-group {
        gap: 14px;
    }

    .avatar {
        width: 70px;
        height: 70px;
    }
}

/* 手机端 - 保持4个一行 */
@media (max-width: 480px) {
    .avatar-group {
        gap: 12px;
    }

    .avatar {
        width: 65px;
        height: 65px;
        border-width: 3px;
    }
}

/* 超小屏幕 - 2个一行 */
@media (max-width: 360px) {
    .avatar-group {
        gap: 10px;
        max-width: 140px; /* 限制容器宽度确保2个一行 */
    }

    .avatar {
        width: 60px;
        height: 60px;
        flex: 0 0 calc(50% - 5px); /* 强制2个一行 */
    }
}

@media (max-width: 480px) {
    /* 移动端向下箭头调整 */
    .scroll-arrow {
        bottom: 20px; /* 减少底部距离 */
        bottom: calc(20px + env(safe-area-inset-bottom)); /* 考虑安全区域 */
        width: 40px; /* 缩小尺寸 */
        height: 40px;
        margin-left: -20px; /* 调整居中 */
    }
    
    .arrow-icon {
        font-size: 16px; /* 缩小图标 */
    }
    
    .hero-subtitle {
        font-size: 24px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .ceremony-card {
        padding: 20px;
    }
    
    .image-placeholder {
        width: 250px;
        height: 250px;
    }
    
    .heart-icon {
        font-size: 60px;
    }

    /* 地图section手机端进一步优化 */
    .map-section {
        padding: 12px; /* 15px * 0.8 = 12px */
    }
    
    /* 手机端Tab内容调整 */
    .map-section .tab-content {
        padding: 16px 12px 20px 12px !important; /* 20px 15px 25px 15px * 0.8 */
        gap: 8px !important; /* 10px * 0.8 = 8px */
    }

    .map-section .location-image-container,
    .map-section .calendar-image-container {
        height: 208px; /* 260px * 0.8 = 208px */
        margin: 12px auto 24px auto !important; /* 居中图片容器 */
        border: none !important; /* 去掉边框 */
        background: transparent !important; /* 完全透明背景 */
        box-shadow: none !important; /* 去掉阴影 */
    }
    
    /* 手机端地图图片专用样式 - 完整显示 */
    .map-section .location-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* 完整显示地图 */
        object-position: center center !important; /* 居中显示 */
        transform: none !important;
        background: rgba(248, 248, 250, 0.8) !important; /* 填充空白区域 */
    }
    
    /* 手机端日历图片保持cover模式 */
    .map-section .calendar-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center bottom !important;
        transform: none !important;
    }

    .map-section .location-info,
    .map-section .time-info {
        padding: 16px; /* 20px * 0.8 = 16px */
        text-align: center; /* 信息内容居中 */
        max-width: 100%; /* 增加最大宽度 */
        margin: 0 auto; /* 居中 */
    }

    .location-item,
    .time-item {
        display: flex;
        justify-content: center; /* 改为居中对齐 */
        align-items: center;
        gap: 10px; /* 12px * 0.8 = 10px */
        padding: 11px 0; /* 16px * 0.7 = 11px，缩短30% */
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        flex-direction: column; /* 改为垂直布局 */
    }

    .location-item:last-child {
        border-bottom: none;
    }

    .location-label,
    .time-label {
        font-size: 11px; /* 14px * 0.8 = 11px */
        color: #666;
        margin-bottom: 4px; /* 5px * 0.8 = 4px */
    }

    .location-value,
    .time-value {
        font-size: 13px; /* 16px * 0.8 = 13px */
        color: #333;
        font-weight: 600;
    }

    .metro-icons {
        flex-wrap: wrap;
        gap: 6px; /* 8px * 0.8 = 6px */
        align-items: center;
    }

    .button-group {
        display: flex;
        flex-direction: row;
        gap: 6px; /* 8px * 0.8 = 6px */
        align-items: center;
        justify-content: center; /* 居中对齐按钮组 */
    }

    .location-action,
    .time-action {
        width: auto; /* 移动端按钮自适应宽度 */
        justify-content: center;
        padding: 5px 8px; /* 6px 10px * 0.8 = 5px 8px */
        font-size: 8px; /* 10px * 0.8 = 8px */
        border-radius: 10px; /* 12px * 0.8 = 10px */
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        min-width: 51px; /* 64px * 0.8 = 51px */
        white-space: nowrap;
        gap: 4px; /* 5px * 0.8 = 4px */
    }
    
    /* 倒计时响应式设计 */
    .countdown-section {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 16px; /* 20px * 0.8 = 16px */
        gap: 24px; /* 30px * 0.8 = 24px */
    }

    .vinyl-record {
        width: 240px; /* 300px * 0.8 = 240px */
        height: 240px; /* 300px * 0.8 = 240px */
        left: 0;
        position: relative;
        transform: translateY(0) rotate(0deg);
        margin-bottom: 16px; /* 20px * 0.8 = 16px */
    }

    .vinyl-center {
        width: 48px; /* 60px * 0.8 = 48px */
        height: 48px; /* 60px * 0.8 = 48px */
    }

    .vinyl-label {
        width: 36px; /* 45px * 0.8 = 36px */
        height: 36px; /* 45px * 0.8 = 36px */
    }
    
    .vinyl-text {
        font-size: 8px; /* 10px * 0.8 = 8px */
    }
    
    .countdown-container {
        text-align: center;
        width: 100%;
        max-width: 320px; /* 400px * 0.8 = 320px */
    }
    
    .countdown-title {
        font-size: clamp(34px, 8vw, 45px); /* 42px 56px * 0.8 */
        margin-bottom: 24px; /* 30px * 0.8 = 24px */
        line-height: 1.2;
        white-space: nowrap;
    }
    
    .countdown-timer {
        display: flex;
        justify-content: center;
        gap: 32px; /* 40px * 0.8 = 32px */
        margin-bottom: 32px; /* 40px * 0.8 = 32px */
        flex-wrap: nowrap;
    }
    
    .time-unit {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 16px; /* 20px * 0.8 = 16px */
        padding: 24px 16px; /* 30px 20px * 0.8 */
        min-width: 96px; /* 120px * 0.8 = 96px */
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease;
    }

    .time-number {
        font-size: 22px; /* 28px * 0.8 = 22px */
    }

    .time-label {
        font-size: 10px; /* 12px * 0.8 = 10px */
    }

    .countdown-date {
        font-size: 13px; /* 16px * 0.8 = 13px */
    }
}

/* 倒计时响应式设计 - 参考第一个section的实现方式 */
/* 中等屏幕 - 保持4个一行，但缩小尺寸 */
@media (max-width: 1024px) {
    .countdown-timer {
        gap: 35px;
    }

    .time-unit {
        padding: 25px 15px;
        min-width: 100px;
    }
}

/* 平板端 - 尝试更紧凑的4个一行，但很快会切换到2x2 */
@media (max-width: 1000px) and (min-width: 801px) {
    .countdown-timer {
        gap: 25px;
    }

    .time-unit {
        padding: 18px 10px;
        min-width: 80px;
    }
}

/* 小屏幕 - 当4个一行太挤时，切换到2x2布局 */
@media (max-width: 800px) {
    .countdown-timer {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto 40px !important;
    }
    
    .time-unit {
        flex: 0 0 auto !important;
        width: calc(50% - 20px) !important;
        min-width: 120px !important;
        max-width: 180px !important;
        padding: 20px 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/* 手机端 - 保持2x2布局，进一步优化 */
@media (max-width: 480px) {
    .countdown-timer {
        gap: 15px !important;
        max-width: 350px !important;
    }
    
    .time-unit {
        width: calc(50% - 15px) !important;
        min-width: 100px !important;
        max-width: 160px !important;
        padding: 18px 12px !important;
    }
    
    .countdown-title {
        font-size: clamp(26px, 6.5vw, 34px) !important;
    }
}

/* 超小屏幕 - 最终优化 */
@media (max-width: 360px) {
    .countdown-timer {
        gap: 12px !important;
        max-width: 320px !important;
    }

    .time-unit {
        width: calc(50% - 12px) !important;
        min-width: 90px !important;
        max-width: 140px !important;
        padding: 15px 10px !important;
    }
    
    .countdown-title {
        font-size: clamp(22px, 6vw, 30px) !important;
    }
}

/* 幻灯片section响应式设计 */
@media (max-width: 768px) {
    :root {
        --animation-duration: 45s;
    }
    
    .scrolling-photo img {
        width: 200%;
    }
    
    /* 移动端隐藏副本照片，避免重复显示 */
    .photo-1-copy,
    .photo-2-copy {
        display: none;
    }
}

@media (max-width: 480px) {
    :root {
        --animation-duration: 36s;
    }
    
    .scrolling-photo img {
        width: 200%;
    }
    
    /* 移动端隐藏副本照片，避免重复显示 */
    .photo-1-copy,
    .photo-2-copy {
        display: none;
    }
}

/* 超小屏幕响应式设计 */
@media (max-width: 360px) {
    /* 超小屏幕地图图片样式优化 */
    .map-section .location-image {
        object-fit: contain !important; /* 确保在超小屏幕也完整显示 */
        object-position: center center !important;
        background: rgba(248, 248, 250, 0.9) !important; /* 稍微加深背景色 */
    }
    
    .countdown-section {
        padding: 15px;
        gap: 20px;
    }

    .vinyl-record {
        width: 250px;
        height: 250px;
        margin-bottom: -40px; /* 向上移动50px：10px - 50px = -40px */
    }
    
    .vinyl-center {
        width: 50px;
        height: 50px;
    }
    
    .vinyl-label {
        width: 35px;
        height: 35px;
    }
    
    .vinyl-text {
        font-size: 8px;
    }
    
    .countdown-title {
        font-size: clamp(20px, 6vw, 28px);
        margin-bottom: 20px;
        white-space: nowrap;
    }
    
    .countdown-timer {
        gap: 12px !important;
        margin-bottom: 15px;
        flex-wrap: wrap !important;
        justify-content: center !important;
        max-width: 320px !important;
        margin: 0 auto 15px auto !important;
    }

    .time-unit {
        padding: 15px 10px !important;
        min-width: 90px !important;
        flex: 0 0 auto !important;
        max-width: 140px !important;
        margin: 0 !important;
        width: calc(50% - 12px) !important;
    }
    
    .time-number {
        font-size: 24px;
    }
    
    .time-label {
        font-size: 10px;
    }
    
    .countdown-date {
        font-size: 14px;
    }
    
    /* 超小屏幕时间项居中 */
    .time-item {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 8px 0; /* 12px * 0.7 = 8px，缩短30% */
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        flex-direction: column;
    }
    
    .time-item:last-child {
        border-bottom: none;
    }
    
    .time-label {
        font-size: 9px;
        color: #666;
        margin-bottom: 3px;
    }
    
    .time-value {
        font-size: 11px;
        color: #333;
        font-weight: 600;
    }
    
    /* 超小屏幕按钮组居中对齐 */
    .button-group {
        flex-direction: row;
        gap: 6px;
        justify-content: center;
        align-items: center;
    }
    
    .location-action,
    .time-action {
        width: auto;
        min-width: 56px; /* 70px * 0.8 = 56px */
        padding: 5px 8px; /* 6px 10px * 0.8 = 5px 8px */
        font-size: 9px; /* 11px * 0.8 = 9px */
        border-radius: 10px; /* 12px * 0.8 = 10px */
        gap: 4px; /* 5px * 0.8 = 4px */
    }
    
    /* 超小屏幕Tab切换器调整 */
    .map-section .tab-switcher {
        bottom: 12px; /* 16px * 0.8 = 12px */
        bottom: calc(12px + env(safe-area-inset-bottom)); /* 考虑安全区域 */
        padding: 5px; /* 6px * 0.8 = 5px */
        gap: 2px; /* 3px * 0.8 = 2px */
        border-radius: 16px; /* 20px * 0.8 = 16px */
    }
    
    .tab-item {
        padding: 8px 12px; /* 10px 16px * 0.8 */
        border-radius: 12px; /* 16px * 0.8 = 12px */
        gap: 5px; /* 6px * 0.8 = 5px */
        font-size: 7px; /* 11px * 0.8 = 9px */
        white-space: nowrap; /* 防止文字换行 */
        min-width: 50px; /* 设置最小宽度 */
    }
}

/* 倒计时section */
.countdown-section {
    height: 100vh;
    height: 100dvh; /* 动态视口高度 */
    background: linear-gradient(135deg,
        #667eea 0%,
        #764ba2 25%,
        #f093fb 50%,
        #f5576c 75%,
        #4facfe 100%);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 80px;
}

/* 黑胶唱片样式 */
.vinyl-record {
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: 
        radial-gradient(circle at center, #2c2c2c 0%, #1a1a1a 30%, #000000 100%),
        repeating-conic-gradient(from 0deg, #000000 0deg 2deg, #333333 2deg 4deg);
    position: absolute;
    left: -280px;
    top: 40%;
    transform: translateY(-50%) rotate(0deg);
    animation: vinylSpin 3s linear infinite;
    box-shadow: 
        0 0 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.vinyl-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, #444444 0%, #222222 70%, #000000 100%);
    border-radius: 50%;
    border: 4px solid #666666;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vinyl-label {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.vinyl-text {
    font-family: 'SF Pro Display', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

/* 黑胶唱片旋转动画 */
@keyframes vinylSpin {
    from {
        transform: translateY(-50%) rotate(0deg);
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* 移动端旋转动画 */
@media (max-width: 480px) {
    @keyframes vinylSpin {
        from {
            transform: translateY(0) rotate(0deg);
        }
        to {
            transform: translateY(0) rotate(360deg);
        }
    }
}

.countdown-container {
    text-align: right;
    color: white;
    animation: fadeInUp 1s ease-out;
    z-index: 2;
    position: relative;
}

.countdown-title {
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 60px;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.countdown-timer {
    display: flex;
    justify-content: flex-end;
    gap: 40px;
    margin-bottom: 40px;
}

.time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 30px 20px;
    min-width: 120px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.time-unit:hover {
    transform: translateY(-5px);
}

.time-number {
    font-size: 48px;
    font-weight: 700;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.time-label {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

.countdown-date {
    font-size: 24px;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: -0.01em;
}

.countdown-date p {
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* 停车导览模态框 - 苹果风格 */
.parking-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.parking-modal.show {
    visibility: visible;
    opacity: 1;
}

.parking-modal.hiding {
    opacity: 0;
    transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
}

.modal-content {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: scale(0.95);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.parking-modal.show .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.modal-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
}

.modal-close {
    background: rgba(0, 0, 0, 0.06);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    color: #1d1d1f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-weight: 300;
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.12);
    transform: scale(1.1);
}

.modal-body {
    padding: 16px 28px 28px;
    overflow-y: auto;
    max-height: calc(80vh - 80px);
}

.parking-info {
    margin-bottom: 24px;
}

.parking-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.parking-item:last-child {
    border-bottom: none;
}

.parking-icon {
    font-size: 24px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #f5f5f7, #e8e8ed);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.parking-details {
    flex: 1;
}

.parking-details h4 {
    margin: 0 0 6px 0;
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}

.parking-details p {
    margin: 0 0 8px 0;
    font-size: 15px;
    color: #86868b;
    line-height: 1.4;
}

.parking-fee {
    display: inline-block;
    background: linear-gradient(135deg, #007aff, #0051d5);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}

.parking-tips {
    background: linear-gradient(135deg, 
        rgba(255, 204, 0, 0.1), 
        rgba(255, 149, 0, 0.1));
    border: 1px solid rgba(255, 204, 0, 0.2);
    border-radius: 16px;
    padding: 20px;
}

.parking-tips h4 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 8px;
}

.parking-tips ul {
    margin: 0;
    padding-left: 20px;
    list-style: none;
}

.parking-tips li {
    position: relative;
    margin-bottom: 8px;
    font-size: 14px;
    color: #424245;
    line-height: 1.5;
}

.parking-tips li:last-child {
    margin-bottom: 0;
}

.parking-tips li::before {
    content: '•';
    position: absolute;
    left: -16px;
    color: #ff9500;
    font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .modal-content {
        margin: 20px;
        width: calc(100% - 40px);
        max-height: calc(100vh - 40px);
        border-radius: 20px;
    }
    
    .modal-header {
        padding: 20px 24px 12px;
    }
    
    .modal-header h3 {
        font-size: 20px;
    }
    
    .modal-body {
        padding: 12px 24px 24px;
    }
    
    .parking-item {
        gap: 12px;
        padding: 12px 0;
    }
    
    .parking-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .parking-details h4 {
        font-size: 16px;
    }
    
    .parking-details p {
        font-size: 14px;
    }
}