/* ============================================
   luminous.quest - Styles
   Holographic Celestial Quest
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: #050510;
    color: #C8C8E0;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.8;
    overflow-x: hidden;
}

/* --- Holographic Keyframes --- */
@keyframes holographicShift {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

@keyframes slowRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

@keyframes drawPath {
    from { stroke-dashoffset: 1000; }
    to { stroke-dashoffset: 0; }
}

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

@keyframes textArcRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes lightBloom {
    0%, 100% {
        box-shadow:
            0 0 30px rgba(255, 255, 255, 0.4),
            0 0 80px rgba(255, 255, 255, 0.15),
            0 0 160px rgba(255, 255, 255, 0.08),
            0 0 300px rgba(255, 255, 255, 0.04);
    }
    50% {
        box-shadow:
            0 0 40px rgba(255, 255, 255, 0.6),
            0 0 100px rgba(255, 255, 255, 0.2),
            0 0 200px rgba(255, 255, 255, 0.1),
            0 0 400px rgba(255, 255, 255, 0.05);
    }
}

/* --- Parallax Star Layers --- */
.star-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform;
    animation: fadeInStars 2s ease-out forwards;
    opacity: 0;
}

#star-layer-far {
    z-index: 0;
    animation-delay: 0s;
}

#star-layer-mid {
    z-index: 1;
    animation-delay: 0.4s;
}

#star-layer-near {
    z-index: 2;
    animation-delay: 0.8s;
}

.star-field {
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
}

/* Far stars - tiny, dim */
#star-layer-far .star-field {
    box-shadow:
        120px 80px 0 0.5px rgba(255,255,255,0.25),
        340px 200px 0 0.5px rgba(255,255,255,0.2),
        580px 50px 0 0.5px rgba(255,255,255,0.3),
        780px 320px 0 0.5px rgba(255,255,255,0.15),
        950px 100px 0 0.5px rgba(255,255,255,0.25),
        1120px 250px 0 0.5px rgba(255,255,255,0.2),
        1350px 400px 0 0.5px rgba(255,255,255,0.3),
        200px 500px 0 0.5px rgba(255,255,255,0.2),
        480px 620px 0 0.5px rgba(255,255,255,0.25),
        700px 550px 0 0.5px rgba(255,255,255,0.15),
        900px 700px 0 0.5px rgba(255,255,255,0.3),
        1100px 600px 0 0.5px rgba(255,255,255,0.2),
        1300px 150px 0 0.5px rgba(255,255,255,0.25),
        50px 350px 0 0.5px rgba(255,255,255,0.2),
        270px 720px 0 0.5px rgba(255,255,255,0.15),
        500px 300px 0 0.5px rgba(255,255,255,0.25),
        750px 180px 0 0.5px rgba(255,255,255,0.2),
        1000px 450px 0 0.5px rgba(255,255,255,0.3),
        1200px 80px 0 0.5px rgba(255,255,255,0.2),
        1400px 300px 0 0.5px rgba(255,255,255,0.25),
        160px 150px 0 0.5px rgba(255,255,255,0.2),
        400px 420px 0 0.5px rgba(255,255,255,0.15),
        620px 260px 0 0.5px rgba(255,255,255,0.25),
        840px 480px 0 0.5px rgba(255,255,255,0.3),
        1060px 350px 0 0.5px rgba(255,255,255,0.2),
        80px 600px 0 0.5px rgba(255,255,255,0.25),
        310px 50px 0 0.5px rgba(255,255,255,0.15),
        530px 480px 0 0.5px rgba(255,255,255,0.2),
        770px 50px 0 0.5px rgba(255,255,255,0.25),
        1000px 200px 0 0.5px rgba(255,255,255,0.3),
        60px 780px 0 0.5px rgba(255,255,255,0.2),
        250px 850px 0 0.5px rgba(255,255,255,0.15),
        480px 900px 0 0.5px rgba(255,255,255,0.25),
        700px 820px 0 0.5px rgba(255,255,255,0.2),
        920px 870px 0 0.5px rgba(255,255,255,0.3),
        1150px 780px 0 0.5px rgba(255,255,255,0.2),
        1350px 850px 0 0.5px rgba(255,255,255,0.25),
        1500px 500px 0 0.5px rgba(255,255,255,0.15),
        1600px 200px 0 0.5px rgba(255,255,255,0.2),
        1700px 400px 0 0.5px rgba(255,255,255,0.25);
}

/* Mid stars - medium, moderate brightness */
#star-layer-mid .star-field {
    box-shadow:
        250px 120px 0 0.8px rgba(255,255,255,0.4),
        500px 280px 0 0.8px rgba(255,255,255,0.35),
        780px 60px 0 0.8px rgba(255,255,255,0.45),
        1050px 350px 0 0.8px rgba(255,255,255,0.3),
        150px 450px 0 0.8px rgba(255,255,255,0.4),
        430px 580px 0 0.8px rgba(255,255,255,0.35),
        680px 400px 0 0.8px rgba(255,255,255,0.45),
        930px 550px 0 0.8px rgba(255,255,255,0.3),
        1200px 200px 0 0.8px rgba(255,255,255,0.4),
        60px 200px 0 0.8px rgba(255,255,255,0.35),
        300px 350px 0 0.8px rgba(255,255,255,0.45),
        550px 150px 0 0.8px rgba(255,255,255,0.3),
        820px 250px 0 0.8px rgba(255,255,255,0.4),
        1080px 100px 0 0.8px rgba(255,255,255,0.35),
        1350px 500px 0 0.8px rgba(255,255,255,0.45),
        180px 680px 0 0.8px rgba(255,255,255,0.3),
        400px 750px 0 0.8px rgba(255,255,255,0.4),
        620px 680px 0 0.8px rgba(255,255,255,0.35),
        870px 750px 0 0.8px rgba(255,255,255,0.4),
        1100px 680px 0 0.8px rgba(255,255,255,0.3),
        1400px 150px 0 0.8px rgba(255,255,255,0.35),
        1550px 350px 0 0.8px rgba(255,255,255,0.4),
        1650px 100px 0 0.8px rgba(255,255,255,0.35),
        1700px 550px 0 0.8px rgba(255,255,255,0.3);
}

/* Near stars - larger, brighter */
#star-layer-near .star-field {
    box-shadow:
        180px 180px 0 1.2px rgba(255,255,255,0.6),
        450px 100px 0 1.2px rgba(255,255,255,0.55),
        720px 350px 0 1.5px rgba(255,255,255,0.65),
        1000px 200px 0 1.2px rgba(255,255,255,0.5),
        1280px 400px 0 1.5px rgba(255,255,255,0.6),
        100px 550px 0 1.2px rgba(255,255,255,0.55),
        350px 450px 0 1.5px rgba(255,255,255,0.65),
        600px 600px 0 1.2px rgba(255,255,255,0.5),
        850px 500px 0 1.2px rgba(255,255,255,0.6),
        1150px 550px 0 1.5px rgba(255,255,255,0.55),
        280px 250px 0 1.2px rgba(255,255,255,0.65),
        530px 350px 0 1.5px rgba(255,255,255,0.5),
        780px 150px 0 1.2px rgba(255,255,255,0.6),
        1050px 50px 0 1.5px rgba(255,255,255,0.55),
        50px 380px 0 1.2px rgba(255,255,255,0.5),
        680px 720px 0 1.5px rgba(255,255,255,0.6),
        950px 680px 0 1.2px rgba(255,255,255,0.55),
        1200px 720px 0 1.5px rgba(255,255,255,0.5),
        1450px 250px 0 1.2px rgba(255,255,255,0.6),
        1600px 450px 0 1.5px rgba(255,255,255,0.55);
}

/* --- Content Sections --- */
.content-section {
    min-height: 100vh;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.5s ease;
}

.section-inner {
    max-width: 720px;
    padding: 60px 30px;
    text-align: center;
    position: relative;
}

/* Section Background Colors - Cosmic Descent */
.section-opening {
    background-color: transparent;
}

.section-discovery {
    background-color: #0A0A2A; /* Midnight Indigo */
}

.section-mapping {
    background-color: #0F0F32; /* Between Midnight and Deep Indigo */
}

.section-insight {
    background-color: #15153A; /* Deep Indigo */
}

.section-navigation {
    background-color: rgba(30, 18, 60, 0.85);
}

.section-illumination {
    background-color: rgba(58, 26, 94, 0.5);
}

.section-destination {
    background-color: rgba(5, 5, 16, 0.95);
}

/* --- Logotype --- */
.logotype {
    font-family: 'Cormorant', serif;
    font-weight: 600;
    font-size: clamp(36px, 6vw, 80px);
    background: linear-gradient(135deg, #FF6B9D, #4DFFF3, #FFD700, #FF6B9D);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: holographicShift 4s ease infinite;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 1.5s ease 1.5s;
    position: relative;
    z-index: 5;
}

.logotype.visible {
    opacity: 1;
}

/* --- Central Star SVG --- */
.central-star {
    width: clamp(200px, 35vw, 400px);
    height: clamp(200px, 35vw, 400px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: slowRotate 60s linear infinite;
    opacity: 0;
    transition: opacity 2s ease;
    z-index: 4;
}

.central-star.visible {
    opacity: 1;
}

.star-shape {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 2.5s ease-in-out;
}

.star-shape.drawn {
    stroke-dashoffset: 0;
}

/* --- Tagline --- */
.tagline {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #C8C8E0;
    opacity: 0;
    transition: opacity 1.5s ease 2.5s;
    margin-top: 16px;
    position: relative;
    z-index: 5;
}

.tagline.visible {
    opacity: 0.6;
}

/* --- Section Labels --- */
.section-label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #4DFFF3;
    opacity: 0.6;
    margin-bottom: 24px;
    text-transform: uppercase;
}

/* --- Section Headings --- */
.section-heading {
    font-family: 'Cormorant', serif;
    font-weight: 500;
    font-size: clamp(28px, 5vw, 64px);
    color: #FFFFFF;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #FF6B9D, #4DFFF3, #FFD700, #FF6B9D);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: holographicShift 4s ease infinite;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.section-heading.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Section Body --- */
.section-body {
    color: #C8C8E0;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

.section-body.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Geometric Motifs --- */
.geometric-motif {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
}

.section-geometry {
    width: clamp(200px, 30vw, 350px);
    height: clamp(200px, 30vw, 350px);
    opacity: 0;
    transition: opacity 1.2s ease;
}

.section-geometry.visible {
    opacity: 1;
}

/* --- Constellation Dividers --- */
.constellation-divider {
    position: relative;
    z-index: 3;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.constellation-divider svg {
    width: 100%;
    max-width: 900px;
    height: 100%;
}

.constellation-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 2s ease-in-out;
}

.constellation-line.drawn {
    stroke-dashoffset: 0;
}

/* --- Light Point (Final Section) --- */
.light-point {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    margin: 0 auto 50px;
    position: relative;
    animation: lightBloom 4s ease-in-out infinite;
    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.3),
        0 0 60px rgba(255, 255, 255, 0.1),
        0 0 120px rgba(255, 255, 255, 0.05);
}

.light-point::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 40%, transparent 70%);
    pointer-events: none;
}

/* --- Destination Text Arc --- */
.destination-text-arc {
    width: clamp(280px, 40vw, 500px);
    height: clamp(280px, 40vw, 500px);
    margin: 0 auto 40px;
    animation: textArcRotate 30s linear infinite;
}

.destination-text-arc svg {
    width: 100%;
    height: 100%;
}

.arc-text {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    fill: #C8C8E0;
    opacity: 0.5;
}

/* --- Destination Tagline --- */
.destination-tagline {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #C8C8E0;
    opacity: 0.5;
    text-align: center;
}

/* --- Scrollbar Styling --- */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #050510;
}

::-webkit-scrollbar-thumb {
    background: #3A1A5E;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4DFFF3;
}

/* --- Selection Color --- */
::selection {
    background: rgba(77, 255, 243, 0.2);
    color: #FFFFFF;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .section-inner {
        padding: 40px 20px;
    }

    .constellation-divider {
        height: 120px;
    }

    .central-star {
        width: 200px;
        height: 200px;
    }

    .destination-text-arc {
        width: 260px;
        height: 260px;
    }
}

@media (max-width: 480px) {
    .section-inner {
        padding: 30px 16px;
    }

    .constellation-divider {
        height: 80px;
    }
}