*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 17px;
    line-height: 1.85;
    overflow-x: hidden;
    background: #0e1a2e;
}

/* Progress Bar */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    z-index: 1000;
    background: linear-gradient(
        to right,
        #0e1a2e,
        #2a3a5e,
        #4a6a8e,
        #8ab0d0,
        #c8dce8,
        #f0e8d8,
        #e8c8a0,
        #c08060,
        #6a3040,
        #1a1028,
        #0a0818
    );
    background-size: 100vw 3px;
    background-position: left;
    transition: width 0.05s linear;
}

/* Celestial Body (Sun/Moon) */
#celestial-body {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f5d0a0;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 0 15px rgba(245, 208, 160, 0.5);
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

#celestial-body.moon {
    background: #b8b0c8;
    box-shadow: 0 0 15px rgba(184, 176, 200, 0.4);
}

/* Opening Overlay */
#opening-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #0e1a2e;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1s ease;
}

#opening-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

#opening-title {
    text-align: center;
    opacity: 0;
    animation: titleFadeIn 2s 0.5s ease forwards;
}

.site-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 40px;
    letter-spacing: 0.06em;
    color: #c8d0e0;
    margin-bottom: 8px;
}

.site-subtitle {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 28px;
    color: rgba(200, 208, 224, 0.7);
}

.scroll-hint {
    margin-top: 40px;
    opacity: 0;
    animation: hintFadeIn 1s 3s ease forwards;
}

.chevron {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-right: 2px solid rgba(200, 208, 224, 0.5);
    border-bottom: 2px solid rgba(200, 208, 224, 0.5);
    transform: rotate(45deg);
    animation: chevronPulse 2s ease-in-out infinite;
}

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

@keyframes hintFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes chevronPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* Dawn warm line animation */
#opening-overlay::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(to top, rgba(224, 168, 112, 0.1), transparent);
    animation: dawnLine 2s 0.5s ease forwards;
}

@keyframes dawnLine {
    from { height: 0; }
    to { height: 40%; }
}

/* Particles Container */
#particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    transition: opacity 1s ease;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: #ffffff;
}

@keyframes floatUp {
    0% { transform: translateY(0); opacity: var(--particle-opacity); }
    100% { transform: translateY(-100vh); opacity: 0; }
}

/* Time Sections */
main#day-journey {
    position: relative;
}

.time-section {
    position: relative;
    min-height: 150vh;
    padding: 120px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Section Backgrounds */
#dawn {
    background: linear-gradient(to bottom, #0e1a2e, #1a2840, #2a3a5e);
    color: #c8d0e0;
}

#morning {
    background: linear-gradient(to bottom, #2a3a5e, #4a6a8e, #6a90b8, #8ab0d0);
    color: #1a2a3e;
}

#midday {
    background: linear-gradient(to bottom, #8ab0d0, #c8dce8, #e8e8e0, #f0f0e8);
    color: #2a2a30;
}

#afternoon {
    background: linear-gradient(to bottom, #f0e8d8, #eed8c0, #e8c8a0);
    color: #3a2a20;
}

#evening {
    background: linear-gradient(to bottom, #c08060, #a06050, #804050, #6a3040);
    color: #f0e0d0;
}

#night {
    background: linear-gradient(to bottom, #2a1838, #1a1028, #100a20, #0a0818);
    color: #b8b0c8;
}

/* Time Labels */
.time-label {
    position: absolute;
    left: 40px;
    top: 200px;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 72px;
    letter-spacing: 0.06em;
    opacity: 0.15;
    will-change: transform;
    pointer-events: none;
}

#dawn .time-label { color: #c8d0e0; }
#morning .time-label { color: #1a2a3e; }
#midday .time-label { color: #2a2a30; }
#afternoon .time-label { color: #3a2a20; }
#evening .time-label { color: #f0e0d0; }
#night .time-label { color: #b8b0c8; }

/* Section Content */
.section-content {
    max-width: 560px;
    width: 100%;
    padding-top: 80px;
}

.content-block {
    margin-bottom: 140px;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.content-block.visible {
    opacity: 1;
    transform: translateY(0);
}

.content-block h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 32px;
    letter-spacing: 0.04em;
    margin-bottom: 24px;
}

.content-block p {
    margin-bottom: 20px;
}

.content-block em {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-weight: 700;
}

/* Korean Labels */
.kr-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 24px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.7;
}

.kr-meaning {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-size: 14px;
    font-style: italic;
    opacity: 0.6;
}

/* Accent Colors per Section */
#dawn .content-block h2 { color: #e0a870; }
#morning .content-block h2 { color: #4a6a8e; }
#midday .content-block h2 { color: #3a7a9a; }
#afternoon .content-block h2 { color: #c07040; }
#evening .content-block h2 { color: #f5c890; }
#night .content-block h2 { color: #8a7ab0; }

/* Daily Object Silhouettes */
.silhouette {
    position: absolute;
    right: 60px;
    bottom: 200px;
    width: 70px;
    height: 70px;
    opacity: 0.2;
}

/* Lantern silhouette for dawn */
.silhouette-lantern {
    border: 3px solid #e0a870;
    border-radius: 8px 8px 4px 4px;
    position: absolute;
}
.silhouette-lantern::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 8px;
    border: 3px solid #e0a870;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}
.silhouette-lantern::after {
    content: '';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 10px;
    background: #e0a870;
}

/* Coffee cup silhouette for morning */
.silhouette-cup {
    width: 50px;
    height: 45px;
    border: 3px solid #f5d0a0;
    border-radius: 4px 4px 20px 20px;
    position: absolute;
}
.silhouette-cup::before {
    content: '';
    position: absolute;
    right: -18px;
    top: 6px;
    width: 14px;
    height: 22px;
    border: 3px solid #f5d0a0;
    border-left: none;
    border-radius: 0 10px 10px 0;
}
.silhouette-cup::after {
    content: '';
    position: absolute;
    top: -14px;
    left: 10px;
    width: 2px;
    height: 12px;
    background: #f5d0a0;
    border-radius: 1px;
    box-shadow: 10px -2px 0 #f5d0a0, 20px 1px 0 #f5d0a0;
    opacity: 0.6;
}

/* Rice bowl silhouette for midday */
.silhouette-bowl {
    width: 60px;
    height: 35px;
    border: 3px solid #3a7a9a;
    border-radius: 0 0 50% 50%;
    border-top: none;
    position: absolute;
}
.silhouette-bowl::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -6px;
    width: 72px;
    height: 3px;
    background: #3a7a9a;
    border-radius: 2px;
}
.silhouette-bowl::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: #3a7a9a;
    border-radius: 2px;
}

/* Book silhouette for afternoon */
.silhouette-book {
    width: 55px;
    height: 40px;
    position: absolute;
}
.silhouette-book::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 40px;
    border: 3px solid #c07040;
    border-right: none;
    border-radius: 3px 0 0 3px;
    transform: skewY(-3deg);
}
.silhouette-book::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    height: 40px;
    border: 3px solid #c07040;
    border-left: none;
    border-radius: 0 3px 3px 0;
    transform: skewY(3deg);
}

/* Lamp silhouette for evening */
.silhouette-lamp {
    width: 40px;
    height: 70px;
    position: absolute;
}
.silhouette-lamp::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-bottom: 30px solid rgba(245, 200, 144, 0.3);
}
.silhouette-lamp::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 40px;
    background: #f5c890;
}

/* Responsive */
@media (max-width: 768px) {
    .time-label {
        font-size: 48px;
        left: 20px;
        top: 100px;
    }

    .section-content {
        padding-top: 40px;
    }

    .silhouette {
        right: 20px;
        bottom: 100px;
        opacity: 0.1;
    }

    .content-block {
        margin-bottom: 100px;
    }

    .site-title {
        font-size: 32px;
    }

    .site-subtitle {
        font-size: 22px;
    }
}