/* 端午模式动画效果样式 — 赛龙舟 / 粽子（SVG版本） */

@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');

/* ========== 容器 ========== */
#duanwu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

/* ========== 水波纹底边（单层波浪） ========== */
.duanwu-water {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 22vh;                /* 桌面端水面占视口 22% */
    min-height: 130px;           /* 防止小屏过小 */
    max-height: 220px;           /* 防止大屏过高 */
    pointer-events: none;
    z-index: 998;
    /* 浅色背景：海水为浅蓝色调 */
    background: linear-gradient(180deg, rgba(100,181,246,.12) 0%, rgba(30,136,229,.22) 60%, rgba(30,136,229,.3) 100%);
    overflow: hidden;
}

/* 一层波浪 SVG 背景图 */
.duanwu-water::before {
    content: '';
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    bottom: 0;
    background-repeat: repeat-x;
    background-size: 1200px 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 160' preserveAspectRatio='none'><path d='M0,80 Q150,55 300,80 T600,80 T900,80 T1200,80 V160 H0 Z' fill='rgba(30,136,229,0.35)'/></svg>");
    animation: waterWave1 12s linear infinite;
}

/* 删除第二层深蓝浪，保留 .duanwu-water::after 占位但隐藏 */
.duanwu-water::after {
    content: '';
    display: none;
}

@keyframes waterWave1 {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes waterWave2 {
    0%   { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

/* ========== 龙舟 ========== */
.duanwu-boat {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    z-index: 1001;
    bottom: 14%;                  /* 坐在水面表面，靠近底部 */
    animation: boatRow 16s linear infinite;
}

.duanwu-boat svg {
    display: block;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

@keyframes boatRow {
    0%   { transform: translateX(-260px) scaleX(-1) translateY(0) rotate(-1.2deg); }
    15%  { transform: translateX(15vw) scaleX(-1) translateY(-6px) rotate(1.2deg); }
    30%  { transform: translateX(30vw) scaleX(-1) translateY(4px) rotate(-0.8deg); }
    45%  { transform: translateX(45vw) scaleX(-1) translateY(-5px) rotate(1deg); }
    60%  { transform: translateX(60vw) scaleX(-1) translateY(3px) rotate(-1.2deg); }
    75%  { transform: translateX(75vw) scaleX(-1) translateY(-4px) rotate(0.8deg); }
    90%  { transform: translateX(90vw) scaleX(-1) translateY(2px) rotate(-0.6deg); }
    100% { transform: translateX(calc(100vw + 260px)) scaleX(-1) translateY(0) rotate(-1.2deg); }
}

@keyframes boatRowReverse {
    0%   { transform: translateX(calc(100vw + 260px)) translateY(0) rotate(1.2deg); }
    15%  { transform: translateX(85vw) translateY(-6px) rotate(-1.2deg); }
    30%  { transform: translateX(70vw) translateY(4px) rotate(0.8deg); }
    45%  { transform: translateX(55vw) translateY(-5px) rotate(-1deg); }
    60%  { transform: translateX(40vw) translateY(3px) rotate(1.2deg); }
    75%  { transform: translateX(25vw) translateY(-4px) rotate(-0.8deg); }
    90%  { transform: translateX(10vw) translateY(2px) rotate(0.6deg); }
    100% { transform: translateX(-260px) translateY(0) rotate(1.2deg); }
}

/* 龙舟内部元素动画由SVG的<animateTransform>驱动 */

/* ========== 粽叶飘落 ========== */
.duanwu-zongye {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    animation: zongyeFloat 10s linear forwards;
    filter: drop-shadow(0 2px 6px rgba(46,125,50,.15));
}

.duanwu-zongye svg {
    display: block;
}

@keyframes zongyeFloat {
    0%   { transform: translateY(-60px) translateX(0) rotate(0deg) scale(.4); opacity: 0; }
    10%  { opacity: .75; }
    25%  { transform: translateY(14vh) translateX(var(--lx, 15px)) rotate(60deg) scale(.7); }
    50%  { transform: translateY(36vh) translateX(calc(var(--lx, 15px) * -0.6)) rotate(180deg) scale(.85); }
    75%  { transform: translateY(64vh) translateX(var(--lx, 15px)) rotate(300deg) scale(.7); opacity: .65; }
    100% { transform: translateY(108vh) translateX(calc(var(--lx, 15px) * 1.2)) rotate(var(--lr, 400deg)) scale(.3); opacity: 0; }
}

/* ========== 艾草叶飘落 ========== */
.duanwu-leaf {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    animation: leafFloat 7s linear forwards;
    z-index: 999;
}

.duanwu-leaf-inner {
    width: 24px;
    height: 8px;
    background: linear-gradient(90deg, #81c784, #66bb6a, #4caf50);
    border-radius: 0 60% 60% 0;
    transform: rotate(-25deg);
    box-shadow: 0 1px 3px rgba(67,160,71,.15);
    position: relative;
}

.duanwu-leaf-inner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 4px;
    width: 16px;
    height: 1px;
    background: rgba(255,255,255,.3);
    transform: translateY(-50%);
}

@keyframes leafFloat {
    0%   { transform: translateY(-40px) translateX(0) rotate(0deg); opacity: 0; }
    12%  { opacity: .75; }
    100% { transform: translateY(108vh) translateX(var(--lx, 50px)) rotate(var(--lr, 200deg)); opacity: 0; }
}

/* ========== 端午标题 ========== */
.duanwu-title {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    font-size: 7rem;
    font-weight: normal;
    font-family: 'Ma Shan Zheng', 'STXingkai', 'STKaiti', 'KaiTi', '华文行楷', '楷体', 'FangSong', '仿宋', cursive, serif;
    letter-spacing: .15em;
    background: linear-gradient(135deg, #2e7d32, #1b5e20, #4caf50, #1b5e20);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 20px rgba(46,125,50,.4), 0 0 40px rgba(76,175,80,.3);
    -webkit-text-stroke: 1px rgba(27,94,32,.1);
    z-index: 1003;
    opacity: 0;
    animation: duanwuTitleFade 5s ease-in-out forwards, duanwuTitleShift 5s ease-in-out forwards;
    pointer-events: none;
    will-change: opacity, filter;
}

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

@keyframes duanwuTitleFade {
    0% { opacity: 0; filter: blur(12px); }
    15% { opacity: 1; filter: blur(0px); }
    80% { opacity: 1; filter: blur(0px); }
    100% { opacity: 0; filter: blur(4px); }
}

/* ========== 端午主题颜色 ========== */
.duanwu-mode {
    background: linear-gradient(180deg, #f1f8e9 0%, #e8f5e9 30%, #e0f2f1 60%, #f1f8e9 100%);
    color: #1b5e20;
}
.duanwu-mode a { color: #2e7d32; }
.duanwu-mode a:hover { color: #1b5e20; }
.duanwu-mode .btn-primary {
    background: linear-gradient(135deg, #43a047, #2e7d32);
    border: none;
    box-shadow: 0 4px 15px rgba(46,125,50,.35);
    color: #fff;
}
.duanwu-mode .btn-primary:hover {
    background: linear-gradient(135deg, #66bb6a, #1b5e20);
    box-shadow: 0 6px 20px rgba(46,125,50,.5);
}
.duanwu-mode .card {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(46,125,50,.12);
    box-shadow: 0 4px 20px rgba(46,125,50,.06);
}
.duanwu-mode .card:hover { box-shadow: 0 8px 30px rgba(46,125,50,.12); }
.duanwu-mode::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at 50% 0%, rgba(129,199,132,.1) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.duanwu-mode .navbar {
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid rgba(46,125,50,.15);
}
.duanwu-mode .forum-category-btn {
    color: #2e7d32;
    background-color: rgba(46,125,50,.06);
    border-color: rgba(46,125,50,.15);
}
.duanwu-mode .forum-category-btn:hover { background-color: rgba(46,125,50,.12); }
.duanwu-mode .hint-text h3, .duanwu-mode .hint-text p { color: #1b5e20; }
.duanwu-mode .hint-box {
    background: rgba(255,255,255,.9) !important;
    border: 2px solid rgba(46,125,50,.12) !important;
    box-shadow: 0 10px 30px rgba(46,125,50,.05), 0 0 0 1px rgba(46,125,50,.05) inset !important;
}
.duanwu-mode .hint-box:hover {
    background: rgba(255,255,255,.95) !important;
    border-color: rgba(46,125,50,.25) !important;
    box-shadow: 0 20px 40px rgba(46,125,50,.08), 0 0 0 1px rgba(46,125,50,.1) inset !important;
}
.duanwu-mode .breadcrumb { color: #2e7d32; }
.duanwu-mode .breadcrumb a { color: #1b5e20; }
body.duanwu-mode .site-footer {
    background: linear-gradient(180deg, rgba(241,248,233,.95), rgba(232,245,233,.92));
    border-top: 1px solid rgba(46,125,50,.2);
    color: #1b5e20;
}
body.duanwu-mode .footer-heading { color: #2e7d32; text-shadow: 0 0 6px rgba(46,125,50,.2); }
body.duanwu-mode .social-link {
    background-color: rgba(46,125,50,.06);
    border: 1px solid rgba(46,125,50,.2);
    color: #2e7d32;
}
body.duanwu-mode .social-link:hover {
    background-color: rgba(46,125,50,.12);
    border-color: #1b5e20;
    color: #1b5e20;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 5px 15px rgba(46,125,50,.2);
}
body.duanwu-mode .footer-link { color: #2e7d32; }
body.duanwu-mode .footer-link:hover { color: #1b5e20; text-decoration: underline; text-decoration-color: #1b5e20; }
body.duanwu-mode .footer-copyright { color: rgba(27,94,32,.45); }

@media (max-width: 768px) {
    .duanwu-title { font-size: 5rem; letter-spacing: .12em; }
    /* 手机端水高度自适应 */
    .duanwu-water { height: 20vh; min-height: 100px; max-height: 170px; }
    .duanwu-water::before, .duanwu-water::after { background-size: 800px 100%; }
    .duanwu-boat svg { transform: scale(.55); }
    .duanwu-boat { bottom: 13%; }
}