/* =====================================================
   Journey — LunarStar Part 5: The Journey
   - 复用 Hero Three.js Scene
   - 单星开场 → 漂浮关键词 → 逐句陈述 → 记忆圆环 → CTA
   - 电影级动画质感
   ===================================================== */

/* ===== Section Container ===== */
.journey-section {
    position: relative;
    height: 500svh; /* 足够长以容纳多阶段动画 */
    min-height: 100vh;
    overflow: hidden;
    background: transparent;
}

/* ===== Journey Cosmos Canvas ===== */
#journey-cosmos {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ===== Dark background overlay (adds depth gradient) ===== */
.journey-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(
        ellipse at 50% 35%,
        transparent 20%,
        rgba(4, 7, 19, 0.3) 50%,
        rgba(4, 7, 19, 0.6) 80%,
        rgba(4, 7, 19, 0.9) 100%
    );
}

/* ===== Part 1: Star + Opening ===== */
.journey-part-1 {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* ===== The Single Guiding Star ===== */
.journey-star {
    position: absolute;
    left: 50%;
    top: 22%;
    transform: translate(-50%, -50%);
    z-index: 6;
    pointer-events: none;
}

.journey-star-core {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFFFFF;
    margin: 0 auto;
    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.9),
        0 0 30px rgba(255, 240, 200, 0.5),
        0 0 60px rgba(255, 220, 140, 0.2);
    animation: starBreath 3s ease-in-out infinite;
}

.journey-star-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 230, 170, 0.35) 0%,
        rgba(255, 220, 140, 0.08) 35%,
        transparent 70%
    );
    animation: starAuraBreath 4s ease-in-out infinite;
}

.journey-star-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 220, 140, 0.04) 15deg,
        transparent 30deg,
        transparent 45deg,
        rgba(255, 220, 140, 0.03) 60deg,
        transparent 75deg,
        transparent 90deg,
        rgba(255, 220, 140, 0.05) 105deg,
        transparent 120deg,
        transparent 135deg,
        rgba(255, 220, 140, 0.03) 150deg,
        transparent 165deg,
        transparent 180deg,
        rgba(255, 220, 140, 0.04) 195deg,
        transparent 210deg,
        transparent 225deg,
        rgba(255, 220, 140, 0.03) 240deg,
        transparent 255deg,
        transparent 270deg,
        rgba(255, 220, 140, 0.06) 285deg,
        transparent 300deg,
        transparent 315deg,
        rgba(255, 220, 140, 0.03) 330deg,
        transparent 345deg,
        transparent 360deg
    );
    animation: starRayRotate 20s linear infinite;
}

@keyframes starBreath {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.4); }
}

@keyframes starAuraBreath {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.3); }
}

@keyframes starRayRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== Opening Text ===== */
.journey-opening {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 6;
    pointer-events: none;
}

.journey-line {
    font-family: 'Noto Serif SC', -apple-system, BlinkMacSystemFont, serif;
    color: #F7F1DD;
    margin: 0;
    line-height: 1.2;
    opacity: 0;
    text-shadow: 0 0 30px rgba(217, 181, 106, 0.15);
}

.journey-line-1 {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 300;
    letter-spacing: 0.08em;
}

.journey-line-2 {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 200;
    letter-spacing: 0.1em;
    color: #D4B052;
}

.journey-line-3 {
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 300;
    letter-spacing: 0.06em;
}

/* ===== Prompt "What are you searching for?" ===== */
.journey-prompt {
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
}

.journey-prompt-text {
    font-family: 'Noto Serif SC', -apple-system, BlinkMacSystemFont, serif;
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 300;
    color: rgba(201, 189, 162, 0.8);
    letter-spacing: 0.08em;
    margin: 0;
}

/* ===== Floating Keywords ===== */
.journey-keywords {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    opacity: 0;
}

.journey-keyword {
    position: absolute;
    font-family: 'Noto Serif SC', -apple-system, BlinkMacSystemFont, serif;
    font-weight: 400;
    color: rgba(247, 241, 221, 0.5);
    letter-spacing: 0.06em;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    white-space: nowrap;
    transition: color 0.4s ease, text-shadow 0.4s ease;
    will-change: transform, opacity;
}

.journey-keyword:hover {
    color: #D4B052;
    text-shadow: 0 0 20px rgba(212, 176, 82, 0.6),
                 0 0 40px rgba(212, 176, 82, 0.25),
                 0 0 80px rgba(212, 176, 82, 0.1);
}

.journey-keyword.clicked {
    pointer-events: none;
}

/* ===== Hover Particle Canvas ===== */
.journey-particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    pointer-events: none;
}

/* ===== Part 2: Statements Sequential Reveal ===== */
.journey-part-2 {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.journey-statements {
    text-align: center;
}

.journey-statement {
    font-family: 'Noto Serif SC', -apple-system, BlinkMacSystemFont, serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 300;
    color: #F7F1DD;
    letter-spacing: 0.06em;
    line-height: 1.5;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    white-space: nowrap;
    text-shadow: 0 0 30px rgba(217, 181, 106, 0.1);
}

/* ===== Part 3: Memory Fragments → Circle ===== */
.journey-part-3 {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.journey-memory-circle {
    position: relative;
    width: 420px;
    height: 420px;
    z-index: 6;
}

.memory-fragment {
    position: absolute;
    font-family: 'Noto Serif SC', -apple-system, BlinkMacSystemFont, serif;
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 400;
    color: rgba(247, 241, 221, 0.35);
    letter-spacing: 0.06em;
    white-space: nowrap;
    opacity: 0;
    transform-origin: center center;
    text-shadow: 0 0 10px rgba(217, 181, 106, 0.1);
    transition: color 0.6s ease, text-shadow 0.6s ease;
}

.memory-fragment.active {
    color: #D4B052;
    text-shadow: 0 0 16px rgba(212, 176, 82, 0.5);
}

/* ===== Memory Trail SVG ===== */
.journey-memory-trail {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.journey-trail-svg {
    width: 420px;
    height: 420px;
}

.journey-trail-circle {
    fill: none;
    stroke: rgba(212, 176, 82, 0.15);
    stroke-width: 1;
    stroke-dasharray: 0 1005;
    stroke-linecap: round;
}

/* ===== CTA ===== */
.journey-cta-wrap {
    position: sticky;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    opacity: 0;
    pointer-events: none;
}

.journey-cta-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    border-radius: 30px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Noto Serif SC', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #040713;
    background: #D4B052;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease;
    will-change: transform, opacity;
}

.journey-cta-btn:hover {
    box-shadow: 0 0 30px rgba(212, 176, 82, 0.45),
                0 0 60px rgba(212, 176, 82, 0.2);
    transform: scale(1.03);
}

.journey-cta-star {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #040713;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: ctaStarPulse 2s ease-in-out infinite;
}

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

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 768px) {
    .journey-star {
        top: 18%;
    }

    .journey-opening {
        top: 38%;
    }

    .journey-prompt {
        top: 56%;
    }

    .journey-keyword {
        font-size: 14px;
    }

    .journey-memory-circle {
        width: 300px;
        height: 300px;
    }

    .journey-trail-svg {
        width: 300px;
        height: 300px;
    }

    .journey-cta-btn {
        padding: 14px 32px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .journey-line-1 { font-size: 22px; }
    .journey-line-2 { font-size: 18px; }
    .journey-line-3 { font-size: 26px; }

    .journey-prompt-text { font-size: 15px; }

    .journey-keyword {
        font-size: 12px;
    }

    .journey-statement {
        font-size: 22px;
    }

    .journey-memory-circle {
        width: 240px;
        height: 240px;
    }

    .journey-trail-svg {
        width: 240px;
        height: 240px;
    }

    .memory-fragment {
        font-size: 12px;
    }
}