/**
 * 首页「动感」增强层
 * Home Kinetic Layer — 仅在 index.html 引用，叠加于 geometric-theme.css 之上。
 *
 * 提供：封面画廊入场、漂浮几何装饰、底部滚动字幕、统计数字脉冲、
 *      以及首页导航中「中文站名 + 链接内嵌统计数字」的样式。
 *
 * 说明：
 *  - 本文件必须位于 index.html 内联样式之后引用，以便同优先级覆盖其部分规则；
 *  - 所有持续动画均在 prefers-reduced-motion 下自动停用。
 */

/* ============================================
   0. 布局微调：为底部滚动字幕让出空间
   ============================================ */
.geo-hero {
    /* body 边距(8px) + 导航下移(60px) + 字幕带(34px)，让字幕带贴合首屏底部 */
    min-height: calc(100vh - 102px);
}

/* ============================================
   1. 顶部导航：中文站名 + 链接内统计数字
   ============================================ */
.geo-nav__brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.geo-logo-zh {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 4px;
    color: var(--geo-text-light);
    line-height: 1;
    border-left: 2px solid var(--geo-accent);
    padding-left: 1rem;
}

.geo-nav__link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

.geo-nav__count {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: var(--geo-accent);
    line-height: 1;
}

.geo-nav__count.is-bumped {
    animation: geo-bump 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.35);
}

@keyframes geo-bump {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* 窄屏下隐藏中文站名与统计数字，避免导航拥挤 */
@media (max-width: 1100px) {
    .geo-nav__count,
    .geo-logo-zh {
        display: none;
    }
}

/* ============================================
   2. 封面画廊：首次填充时的层叠浮现
   ============================================ */
.geo-gallery-bg__item {
    opacity: 0;
}

.geo-gallery-bg__item.is-in {
    opacity: 1;
    transition: opacity 0.75s ease, transform 0.35s ease;
}

.geo-gallery-bg__cover {
    will-change: transform, opacity;
}

/* ============================================
   3. 漂浮几何装饰 (JS 注入 .geo-floaty)
   ============================================ */
.geo-hero__floaties {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.geo-floaty {
    position: absolute;
    bottom: -70px;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

/* 菱形 */
.geo-floaty--diamond {
    width: 24px;
    height: 24px;
    border: 2px solid var(--geo-accent);
    animation-name: geo-float-rise-a;
}

/* 圆环 */
.geo-floaty--ring {
    width: 34px;
    height: 34px;
    border: 2px solid rgba(233, 69, 96, 0.75);
    border-radius: 50%;
    animation-name: geo-float-rise-b;
}

/* 小方块 */
.geo-floaty--square {
    width: 14px;
    height: 14px;
    border: 2px solid var(--geo-accent-alt);
    animation-name: geo-float-rise-b;
}

/* 加号 */
.geo-floaty--plus {
    width: 18px;
    height: 18px;
    animation-name: geo-float-rise-b;
}

.geo-floaty--plus::before,
.geo-floaty--plus::after {
    content: '';
    position: absolute;
    background: var(--geo-accent);
}

.geo-floaty--plus::before {
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

.geo-floaty--plus::after {
    top: 50%;
    left: 0;
    height: 2px;
    width: 100%;
    transform: translateY(-50%);
}

@keyframes geo-float-rise-a {
    0%   { transform: translateY(0) rotate(45deg); opacity: 0; }
    8%   { opacity: 0.55; }
    50%  { opacity: 0.35; }
    92%  { opacity: 0.55; }
    100% { transform: translateY(-116vh) rotate(405deg); opacity: 0; }
}

@keyframes geo-float-rise-b {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    8%   { opacity: 0.5; }
    50%  { opacity: 0.3; }
    92%  { opacity: 0.5; }
    100% { transform: translateY(-116vh) rotate(360deg); opacity: 0; }
}

/* ============================================
   4. 底部滚动字幕 (marquee)
   ============================================ */
.geo-ticker {
    position: relative;
    z-index: 5;
    height: 34px;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-top: 3px solid var(--geo-accent);
    background-color: var(--geo-primary);
    background-image: linear-gradient(90deg,
        rgba(233, 69, 96, 0) 0%,
        rgba(233, 69, 96, 0.38) 50%,
        rgba(233, 69, 96, 0) 100%);
    background-repeat: no-repeat;
    background-size: 26% 100%;
    animation: geo-glint 5.5s ease-in-out infinite;
}

.geo-ticker__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: geo-ticker-scroll 32s linear infinite;
}

.geo-ticker:hover .geo-ticker__track {
    animation-play-state: paused;
}

.geo-ticker__group {
    display: flex;
    align-items: center;
    flex: none;
}

.geo-ticker__item {
    font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 0 2.1rem;
}

.geo-ticker__item::after {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--geo-accent);
    margin-left: 2.1rem;
    transform: rotate(45deg);
    flex: none;
}

@keyframes geo-glint {
    0%, 55% { background-position: -30% 0; }
    100%    { background-position: 130% 0; }
}

@keyframes geo-ticker-scroll {
    to { transform: translateX(-50%); }
}

/* ============================================
   5. 响应式：小屏收敛动效，避免拥挤
   ============================================ */
@media (max-width: 768px) {
    .geo-hero {
        min-height: 100vh;
    }

    .geo-ticker {
        display: none;
    }

    .geo-hero__floaties {
        display: none;
    }
}

/* ============================================
   6. 无障碍：尊重“减少动态效果”偏好
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .geo-gallery-bg__item,
    .geo-gallery-bg__item.is-in {
        opacity: 1;
        transition: none;
    }

    .geo-hero__floaties {
        display: none;
    }

    .geo-floaty,
    .geo-ticker,
    .geo-nav__count {
        animation: none !important;
    }

    .geo-ticker__track {
        animation-play-state: paused;
    }

    .geo-hero {
        min-height: 100vh;
    }
}