/* naru.day styles */

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

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Lora', serif;
    font-size: 16px;
    line-height: 1.6;
    color: #3B2F20;
}

/* Sections */
.section {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    position: relative;
    z-index: 1;
}

/* Dawn Section */
.dawn-section {
    background: linear-gradient(to bottom, #F5EFE6 0%, #D4C4A8 100%);
}

.dawn-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #3B2F20;
    text-align: center;
    margin-bottom: 1rem;
}

.dawn-subtitle {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #A67C52;
    text-align: center;
    margin-bottom: 4rem;
}

/* Morning Section */
.morning-section {
    background: linear-gradient(to bottom, #E8DDCC 0%, #C9B896 50%, #6B7F56 100%);
}

.morning-section .section-title {
    color: #3B2F20;
}

/* Midday Section */
.midday-section {
    background: linear-gradient(to bottom, #F5EFE6 0%, #B85C3A 100%);
}

/* Golden Hour Section */
.golden-hour-section {
    background: linear-gradient(to bottom, #C9B896 0%, #B85C3A 50%, #A67C52 100%);
}

/* Dusk Section */
.dusk-section {
    background: linear-gradient(to bottom, #8B6F47 0%, #5C4033 100%);
}

/* Typography */
.section-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #3B2F20;
    text-align: center;
    margin-bottom: 3rem;
}

.dusk-section .section-title {
    color: #F5EFE6;
}

/* Isometric Platforms */
.isometric-platform {
    perspective: 800px;
    margin: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.platform-1,
.platform-2,
.platform-3,
.platform-4 {
    transform: perspective(800px) rotateX(55deg) rotateZ(45deg);
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(92, 64, 51, 0.3);
}

.platform-5 {
    transform: perspective(800px) rotateX(55deg) rotateZ(45deg);
    width: 300px;
    height: 300px;
    background: rgba(245, 239, 230, 0.1);
    border: 2px solid rgba(245, 239, 230, 0.3);
}

.platform-content {
    transform: rotateZ(-45deg) rotateX(-55deg);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.platform-text {
    font-family: 'Lora', serif;
    font-size: 1.1rem;
    color: #3B2F20;
    text-align: center;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.dusk-section .platform-text {
    color: #F5EFE6;
}

/* Botanical SVGs */
.botanical-svg {
    width: 150px;
    height: 150px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Parallax effect on scroll */
.section {
    opacity: 1;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: #3B2F20;
    animation: float 2s ease-in-out infinite;
    z-index: 10;
}

@keyframes float {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) translateY(10px);
        opacity: 0.7;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .platform-1,
    .platform-2,
    .platform-3,
    .platform-4,
    .platform-5 {
        width: 200px;
        height: 200px;
    }

    .botanical-svg {
        width: 100px;
        height: 100px;
    }

    .dawn-title {
        font-size: clamp(1.8rem, 5vw, 3rem);
    }

    .section-title {
        font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}