@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Rajdhani:wght@300;400;500;600&display=swap');


/* =========================================
   VARIABLES
========================================= */

:root {

    --background: #03020b;
    --background2: #08051a;

    --purple: #a56cff;
    --purple-light: #d3a8ff;

    --white: #f6f2ff;
    --gray: #a7a1b8;

    --border: rgba(184, 130, 255, 0.25);

    --font-title: "Orbitron", sans-serif;
    --font-text: "Rajdhani", sans-serif;
}


/* =========================================
   BASE
========================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

html {

    scroll-behavior: smooth;
}

body {

    background: var(--background);

    color: var(--white);

    font-family: var(--font-text);

    overflow-x: hidden;
}

a {

    color: inherit;

    text-decoration: none;
}

button {

    font-family: inherit;
}


/* =========================================
   INTRO
========================================= */

#intro {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        radial-gradient(
            circle at center,
            rgba(106, 52, 180, 0.18),
            transparent 45%
        ),
        #020108;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}

#intro.hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}

.intro-content {

    text-align: center;

    max-width: 700px;

    padding: 30px;
}

.system {

    font-family: var(--font-title);

    font-size: 11px;

    letter-spacing: 4px;

    color: var(--purple-light);

    margin-bottom: 25px;
}

.intro-content h1 {

    font-family: var(--font-title);

    font-size: clamp(45px, 10vw, 100px);

    letter-spacing: 12px;

    text-shadow:
        0 0 15px rgba(165,108,255,.7),
        0 0 45px rgba(165,108,255,.4);
}

.line {

    height: 1px;

    width: 200px;

    margin: 30px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--purple),
            transparent
        );
}

.loading {

    color: var(--white);

    font-size: 20px;

    margin-bottom: 8px;
}

.loading.small {

    font-size: 15px;

    color: var(--gray);
}

#enterBtn {

    margin-top: 45px;

    padding: 15px 30px;

    color: var(--white);

    background: transparent;

    border: 1px solid var(--purple);

    cursor: pointer;

    font-family: var(--font-title);

    font-size: 11px;

    letter-spacing: 3px;

    transition: .3s;
}

#enterBtn:hover {

    background: var(--purple);

    color: #08030e;

    box-shadow:
        0 0 20px rgba(165,108,255,.7),
        0 0 50px rgba(165,108,255,.3);

    transform: translateY(-3px);
}


/* =========================================
   ESPACE
========================================= */

#space {

    min-height: 100vh;

    position: relative;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(83, 37, 140, .25),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 60%,
            rgba(53, 20, 100, .18),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #03020b,
            #060318,
            #020108
        );
}

.stars,
.stars2,
.stars3 {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 0;

    background-image:
        radial-gradient(
            circle,
            white 1px,
            transparent 1px
        );

    background-size: 130px 130px;

    opacity: .25;

    animation:
        starsMove 100s linear infinite;
}

.stars2 {

    background-size: 190px 190px;

    opacity: .18;

    animation-duration: 160s;
}

.stars3 {

    background-size: 260px 260px;

    opacity: .12;

    animation-duration: 220s;
}

@keyframes starsMove {

    from {

        transform:
            translateY(0);

    }

    to {

        transform:
            translateY(-300px);

    }
}


/* =========================================
   NAVIGATION
========================================= */

nav {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 100;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 25px 5%;

    background:
        rgba(3,2,11,.55);

    backdrop-filter: blur(15px);

    border-bottom:
        1px solid rgba(165,108,255,.08);
}

.logo {

    font-family: var(--font-title);

    font-size: 13px;

    letter-spacing: 3px;
}

.logo span {

    color: var(--purple);
}

.nav-links {

    display: flex;

    gap: 25px;
}

.nav-links a {

    font-family: var(--font-title);

    font-size: 9px;

    letter-spacing: 2px;

    color: var(--gray);

    transition: .3s;
}

.nav-links a:hover {

    color: var(--white);

    text-shadow:
        0 0 10px var(--purple);
}


/* =========================================
   SECTIONS
========================================= */

main,
section {

    position: relative;

    z-index: 2;
}

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding: 140px 10% 80px;
}

.hero-content {

    max-width: 800px;
}

.classification {

    font-family: var(--font-title);

    color: var(--purple-light);

    font-size: 11px;

    letter-spacing: 4px;

    margin-bottom: 30px;
}

.hero h2 {

    font-family: var(--font-title);

    font-size: clamp(38px, 6vw, 80px);

    line-height: 1.15;

    letter-spacing: -2px;
}

.hero h2 span {

    color: var(--purple-light);

    text-shadow:
        0 0 20px rgba(165,108,255,.4);
}

.hero-description {

    margin-top: 35px;

    max-width: 600px;

    color: var(--gray);

    font-size: 20px;

    line-height: 1.6;
}

.discover {

    display: inline-block;

    margin-top: 45px;

    font-family: var(--font-title);

    font-size: 10px;

    letter-spacing: 3px;

    padding-bottom: 10px;

    border-bottom:
        1px solid var(--purple);

    transition: .3s;
}

.discover:hover {

    letter-spacing: 5px;

    color: var(--purple-light);
}

.section {

    padding: 130px 10%;

    max-width: 1400px;

    margin: auto;
}

.section-title {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 70px;
}

.section-title span {

    font-family: var(--font-title);

    color: var(--purple);

    font-size: 13px;
}

.section-title h2 {

    font-family: var(--font-title);

    font-size: clamp(20px, 3vw, 35px);

    letter-spacing: 2px;
}


/* =========================================
   DOSSIER
========================================= */

.dossier-grid {

    display: grid;

    grid-template-columns:
        1fr 1.5fr;

    gap: 80px;
}

.profile-card {

    padding: 45px;

    border:
        1px solid var(--border);

    background:
        linear-gradient(
            145deg,
            rgba(122,72,190,.12),
            rgba(255,255,255,.01)
        );

    position: relative;

    overflow: hidden;
}

.profile-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.04),
            transparent
        );

    transform:
        translateX(-100%);

    animation:
        scan 5s infinite;
}

@keyframes scan {

    0%, 70% {

        transform:
            translateX(-100%);
    }

    100% {

        transform:
            translateX(100%);
    }
}

.profile-symbol {

    width: 70px;
    height: 70px;

    display: flex;

    justify-content: center;

    align-items: center;

    border:
        1px solid var(--purple);

    border-radius: 50%;

    font-size: 30px;

    color: var(--purple-light);

    box-shadow:
        0 0 25px rgba(165,108,255,.25);

    margin-bottom: 30px;
}

.profile-card h3 {

    font-family: var(--font-title);

    font-size: 27px;

    letter-spacing: 5px;
}

.designation {

    color: var(--purple-light);

    font-family: var(--font-title);

    font-size: 9px;

    letter-spacing: 2px;

    margin-top: 8px;
}

.profile-line {

    width: 100%;

    height: 1px;

    background:
        var(--border);

    margin: 30px 0;
}

.profile-card p:not(.designation) {

    color: var(--gray);

    margin: 15px 0;

    font-size: 17px;
}

.profile-card strong {

    color: var(--white);
}

.qualities h3 {

    font-family: var(--font-title);

    font-size: 12px;

    letter-spacing: 3px;

    margin-bottom: 30px;

    color: var(--purple-light);
}

.quality {

    display: flex;

    gap: 25px;

    padding: 25px 0;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.quality > span {

    color: var(--purple);

    font-family: var(--font-title);

    font-size: 11px;
}

.quality h4 {

    font-family: var(--font-title);

    font-size: 15px;

    letter-spacing: 2px;

    margin-bottom: 8px;
}

.quality p {

    color: var(--gray);

    font-size: 17px;
}


/* =========================================
   TIMELINE
========================================= */

.timeline {

    position: relative;

    max-width: 900px;

    margin: auto;
}

.timeline::before {

    content: "";

    position: absolute;

    left: 110px;

    top: 0;
    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            var(--purple),
            transparent
        );
}

.timeline-item {

    display: grid;

    grid-template-columns:
        180px 1fr;

    gap: 50px;

    margin-bottom: 80px;

    position: relative;
}

.timeline-item::before {

    content: "";

    position: absolute;

    left: 105px;

    top: 7px;

    width: 11px;
    height: 11px;

    background:
        var(--purple);

    border-radius: 50%;

    box-shadow:
        0 0 15px var(--purple);
}

.date {

    font-family: var(--font-title);

    color: var(--purple-light);

    font-size: 10px;

    letter-spacing: 2px;

    text-align: right;
}

.timeline-content {

    padding-bottom: 30px;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.timeline-content h3 {

    font-family: var(--font-title);

    font-size: 17px;

    letter-spacing: 2px;

    margin-bottom: 20px;
}

.timeline-content p {

    color: var(--gray);

    font-size: 18px;

    line-height: 1.6;

    margin-bottom: 12px;
}

.timeline-content strong {

    color: var(--purple-light);
}

.small-note {

    font-size: 13px !important;

    color: var(--purple-light) !important;
}


/* =========================================
   PLANÈTE
========================================= */

.planet-section {

    text-align: center;

    min-height: 900px;
}

.instruction {

    color: var(--gray);

    font-size: 17px;

    line-height: 1.5;

    margin-bottom: 70px;
}

.planet-container {

    display: flex;

    flex-direction: column;

    align-items: center;
}

.planet {

    width: 260px;
    height: 260px;

    border-radius: 50%;

    position: relative;

    cursor: pointer;

    transition:
        transform .5s ease;
}

.planet:hover {

    transform:
        scale(1.08)
        rotate(4deg);
}

.planet-surface {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            #d6b7ff,
            #8a43c9 35%,
            #391261 70%,
            #0b0316 100%
        );

    box-shadow:

        inset -35px -20px 50px
        rgba(0,0,0,.7),

        inset 20px 10px 30px
        rgba(255,255,255,.15),

        0 0 50px
        rgba(165,108,255,.4),

        0 0 100px
        rgba(165,108,255,.2);

    overflow: hidden;
}

.planet-surface::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            ellipse at 20% 50%,
            rgba(255,255,255,.2),
            transparent 15%
        ),

        radial-gradient(
            ellipse at 70% 30%,
            rgba(255,255,255,.15),
            transparent 20%
        ),

        radial-gradient(
            ellipse at 60% 80%,
            rgba(0,0,0,.35),
            transparent 20%
        );
}

.planet-ring {

    position: absolute;

    width: 390px;
    height: 100px;

    border:
        1px solid rgba(203,160,255,.7);

    border-radius: 50%;

    top: 80px;
    left: -65px;

    transform:
        rotate(-18deg);

    z-index: 3;

    box-shadow:
        0 0 15px rgba(165,108,255,.3);
}

.planet-glow {

    position: absolute;

    inset: -30px;

    border-radius: 50%;

    box-shadow:
        0 0 50px rgba(165,108,255,.2);

    pointer-events: none;
}

.planet-name {

    margin-top: 30px;

    font-family: var(--font-title);

    font-size: 11px;

    letter-spacing: 4px;

    color: var(--purple-light);
}

.hidden-message {

    max-width: 600px;

    margin: 60px auto 0;

    padding: 30px;

    border:
        1px solid var(--border);

    background:
        rgba(30,10,55,.35);

    opacity: 0;

    transform:
        translateY(20px);

    pointer-events: none;

    transition: .6s;
}

.hidden-message.show {

    opacity: 1;

    transform:
        translateY(0);

    pointer-events: auto;
}

.hidden-message span {

    font-family: var(--font-title);

    font-size: 9px;

    letter-spacing: 3px;

    color: var(--purple);
}

.hidden-message p {

    color: var(--gray);

    font-size: 17px;

    line-height: 1.6;

    margin-top: 15px;
}


/* =========================================
   CONSTELLATION
========================================= */

.constellation-section {

    text-align: center;
}

.constellation {

    height: 500px;

    max-width: 850px;

    margin: auto;

    position: relative;

    background:
        radial-gradient(
            circle at center,
            rgba(105,53,170,.08),
            transparent 60%
        );

    border:
        1px solid rgba(165,108,255,.08);
}

.constellation-star {

    position: absolute;

    background: transparent;

    border: none;

    color: white;

    font-size: 25px;

    cursor: pointer;

    text-shadow:
        0 0 8px white,
        0 0 20px var(--purple);

    transition: .3s;

    z-index: 3;
}

.constellation-star:hover {

    transform:
        scale(1.5);

    color:
        var(--purple-light);
}

.star-one {

    left: 20%;
    top: 25%;
}

.star-two {

    left: 45%;
    top: 15%;
}

.star-three {

    left: 65%;
    top: 45%;
}

.star-four {

    left: 38%;
    top: 70%;
}

.line-star {

    position: absolute;

    height: 1px;

    background:
        rgba(165,108,255,.35);

    transform-origin:
        left;
}

.line1 {

    width: 210px;

    left: 21%;
    top: 27%;

    transform:
        rotate(-12deg);
}

.line2 {

    width: 220px;

    left: 46%;
    top: 18%;

    transform:
        rotate(35deg);
}

.line3 {

    width: 180px;

    left: 40%;
    top: 71%;

    transform:
        rotate(-25deg);
}

#starMessage {

    min-height: 70px;

    max-width: 650px;

    margin: 40px auto 0;

    padding: 20px;

    border-left:
        1px solid var(--purple);

    color: var(--gray);

    font-size: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        opacity .3s;
}


/* =========================================
   APPRÉCIATION
========================================= */

.appreciation-box {

    max-width: 800px;

    margin: auto;

    text-align: center;

    font-size: 20px;

    line-height: 1.7;

    color: var(--gray);
}

.appreciation-box p {

    margin-bottom: 25px;
}

.highlight {

    padding: 40px;

    margin: 50px 0;

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

    color: var(--white);

    font-family: var(--font-title);

    font-size: 19px;

    line-height: 2.2;

    text-shadow:
        0 0 15px rgba(165,108,255,.3);
}

.beautiful {

    color: var(--purple-light);

    font-family: var(--font-title);

    font-size: 28px;
}


/* =========================================
   LETTRE
========================================= */

.message-section {

    max-width: 1000px;
}

.letter {

    border:
        1px solid var(--border);

    background:
        linear-gradient(
            145deg,
            rgba(100,50,150,.12),
            rgba(255,255,255,.015)
        );

    padding: 50px;
}

.letter-header {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 25px;

    border-bottom:
        1px solid var(--border);

    font-family: var(--font-title);

    font-size: 9px;

    letter-spacing: 2px;

    color: var(--purple-light);
}

.letter-content {

    max-width: 750px;

    margin: 50px auto 0;

    font-size: 20px;

    line-height: 1.8;

    color: var(--gray);
}

.letter-content p {

    margin-bottom: 25px;
}

.signature-text {

    color: var(--white);

    font-style: italic;

    padding: 30px 0;

    border-top:
        1px solid var(--border);
}

.signature {

    color: var(--purple-light);

    font-family: var(--font-title);
}


/* =========================================
   FUTURE
========================================= */

.future {

    text-align: center;
}

.future-box {

    max-width: 800px;

    margin: auto;

    padding: 60px 40px;

    border:
        1px solid var(--border);

    background:
        radial-gradient(
            circle at center,
            rgba(130,70,200,.1),
            transparent 60%
        );
}

.future-box h3 {

    font-family: var(--font-title);

    font-size: 25px;

    letter-spacing: 3px;

    margin-bottom: 35px;
}

.future-box > p:not(.system) {

    color: var(--gray);

    font-size: 19px;

    line-height: 1.6;

    margin-bottom: 18px;
}

.future-message {

    margin-top: 40px;

    padding: 30px;

    border:
        1px solid rgba(165,108,255,.3);

    color: var(--white);

    font-size: 20px;

    line-height: 1.5;

    box-shadow:
        inset 0 0 30px
        rgba(165,108,255,.04);
}


/* =========================================
   ÉCLIPSE
========================================= */

.eclipse {

    position: fixed;

    right: 5%;

    top: 18%;

    width: 130px;
    height: 130px;

    z-index: 1;

    pointer-events: none;
}

.eclipse-moon {

    position: absolute;

    inset: 10px;

    border-radius: 50%;

    background: #020108;

    box-shadow:
        0 0 15px rgba(255,255,255,.15);
}

.eclipse-glow {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    box-shadow:

        0 0 15px
        rgba(255,255,255,.2),

        0 0 50px
        rgba(165,108,255,.25),

        0 0 100px
        rgba(165,108,255,.15);
}


/* =========================================
   MÉTÉORES
========================================= */

.meteor {

    position: fixed;

    width: 2px;
    height: 90px;

    background:
        linear-gradient(
            transparent,
            var(--purple-light),
            white
        );

    transform:
        rotate(45deg);

    z-index: 3;

    pointer-events: none;

    animation:
        meteorFall linear forwards;

    filter:
        drop-shadow(
            0 0 8px var(--purple)
        );
}

@keyframes meteorFall {

    from {

        transform:
            translate(0,0)
            rotate(45deg);

        opacity: 1;
    }

    to {

        transform:
            translate(-500px,500px)
            rotate(45deg);

        opacity: 0;
    }
}


/* =========================================
   FIN
========================================= */

.ending {

    min-height: 80vh;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 100px 20px;
}

.ending-content {

    max-width: 750px;
}

.ending h2 {

    font-family: var(--font-title);

    font-size:
        clamp(30px, 5vw, 60px);

    letter-spacing: 6px;

    margin-bottom: 30px;
}

.ending-line {

    width: 150px;

    height: 1px;

    margin:
        0 auto 40px;

    background:
        var(--purple);

    box-shadow:
        0 0 15px var(--purple);
}

.ending p:not(.system):not(.final-signature) {

    color: var(--gray);

    font-size: 20px;

    line-height: 1.6;

    margin-bottom: 15px;
}

.ending h3 {

    margin-top: 40px;

    font-family: var(--font-title);

    font-size: 18px;

    color: var(--purple-light);

    line-height: 1.6;
}

.final-signature {

    margin-top: 60px;

    font-family: var(--font-title);

    color: var(--white);

    letter-spacing: 4px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    nav {

        padding: 18px 5%;
    }

    .nav-links {

        display: none;
    }

    .hero {

        padding:
            130px 7% 80px;
    }

    .section {

        padding:
            100px 7%;
    }

    .dossier-grid {

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .timeline::before {

        left: 5px;
    }

    .timeline-item {

        grid-template-columns: 1fr;

        gap: 15px;

        padding-left: 30px;
    }

    .timeline-item::before {

        left: 0;
    }

    .date {

        text-align: left;
    }

    .letter {

        padding:
            30px 20px;
    }

    .letter-header {

        flex-direction: column;

        gap: 10px;
    }

    .letter-content {

        font-size: 18px;
    }

    .eclipse {

        width: 80px;
        height: 80px;

        right: 4%;
        top: 15%;
    }
}


@media (max-width: 600px) {

    .intro-content h1 {

        letter-spacing: 5px;
    }

    .hero h2 {

        font-size: 38px;
    }

    .hero-description {

        font-size: 17px;
    }

    .section {

        padding:
            80px 6%;
    }

    .section-title {

        gap: 12px;

        margin-bottom: 50px;
    }

    .section-title h2 {

        font-size: 17px;
    }

    .profile-card {

        padding:
            30px 25px;
    }

    .planet {

        width: 210px;
        height: 210px;
    }

    .planet-ring {

        width: 320px;

        left: -55px;

        top: 65px;
    }

    .constellation {

        height: 380px;
    }

    .highlight {

        padding: 25px;

        font-size: 16px;
    }

    .beautiful {

        font-size: 22px;
    }

    .future-box {

        padding:
            40px 20px;
    }
}