/* ============================================================
   GLOBAL
   ============================================================ */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: Georgia, serif;
    background: #000;
}


/* ============================================================
   GALAXY
   ============================================================ */

#galaxy {
    position: relative;

    width: 100vw;
    height: 100vh;

    background-image: url("images/galaxy1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;

    transition: opacity 0.8s ease;
}


/* Stars container */

#stars {
    position: absolute;
    inset: 0;
}


/* ============================================================
   WRITING STARS
   ============================================================ */

.star {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    cursor: pointer;

    background: currentColor;

    box-shadow:
        0 0 4px currentColor,
        0 0 8px currentColor,
        0 0 14px currentColor;

    animation:
        twinkle 4s ease-in-out infinite;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


/* Horizontal ray */

.star::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 38px;
    height: 2px;

    transform:
        translate(-50%, -50%);

    background:
        linear-gradient(
            to right,
            transparent 0%,
            currentColor 42%,
            currentColor 50%,
            currentColor 58%,
            transparent 100%
        );

    opacity: 0.65;

    pointer-events: none;
}


/* Vertical ray */

.star::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 2px;
    height: 38px;

    transform:
        translate(-50%, -50%);

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            currentColor 42%,
            currentColor 50%,
            currentColor 58%,
            transparent 100%
        );

    opacity: 0.65;

    pointer-events: none;
}


/* ============================================================
   STAR TITLES
   ============================================================ */

.star-title {
    position: absolute;

    left: 50%;
    bottom: 22px;

    transform:
        translateX(-50%);

    white-space: nowrap;

    color: white;

    font-size: 14px;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.2s ease;

    text-shadow:
        0 1px 4px black,
        0 0 8px black;

    z-index: 10;
}


.star:hover .star-title {
    visibility: visible;
    opacity: 1;
}


/* ============================================================
   READ / UNREAD
   ============================================================ */

.star.read {
    opacity: 1;

    filter: none;

    animation: none;

    box-shadow:
        0 0 4px currentColor,
        0 0 9px currentColor,
        0 0 16px currentColor;
}


.star.read::before,
.star.read::after {
    opacity: 0.65;
}


.star.read:hover {
    opacity: 1;

    filter:
        brightness(1.8);

    transform:
        scale(1.7);
}


/* ============================================================
   TWINKLE
   ============================================================ */

@keyframes twinkle {

    0% {
        opacity: 0.7;
        filter: brightness(0.9);
    }

    35% {
        opacity: 1;
        filter: brightness(1.4);
    }

    55% {
        opacity: 0.8;
        filter: brightness(1);
    }

    75% {
        opacity: 1;
        filter: brightness(1.6);
    }

    100% {
        opacity: 0.7;
        filter: brightness(0.9);
    }

}


.star:hover {
    transform:
        scale(1.7);

    filter:
        brightness(1.8);

    animation-play-state:
        paused;
}


/* ============================================================
   MASTER STAR
   ============================================================ */

#master-star {
    position: absolute;

    left: 50%;
    top: 8%;

    width: 8px;
    height: 8px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 5px white,
        0 0 12px white,
        0 0 22px rgba(255, 255, 255, 0.8);

    cursor: pointer;

    z-index: 20;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


#master-star::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 52px;
    height: 2px;

    transform:
        translate(-50%, -50%);

    background:
        linear-gradient(
            to right,
            transparent,
            white,
            transparent
        );

    opacity: 0.8;
}


#master-star::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 2px;
    height: 52px;

    transform:
        translate(-50%, -50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            white,
            transparent
        );

    opacity: 0.8;
}


#master-star:hover {
    transform:
        translate(-50%, -50%)
        scale(1.4);

    filter:
        brightness(1.5);
}


/* Master star label */

#master-star-title {
    position: absolute;

    left: 50%;
    bottom: 25px;

    transform:
        translateX(-50%);

    color: white;

    font-family:
        Georgia,
        serif;

    font-size: 13px;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    text-shadow:
        0 1px 4px black,
        0 0 8px black;

    transition:
        opacity 0.25s ease;
}


#master-star:hover
#master-star-title {
    opacity: 1;
    visibility: visible;
}


/* Reveal all titles */

body.reveal-titles
.star-title {
    visibility: visible;
    opacity: 1;
}


/* Read titles quieter */

body.reveal-titles
.star.read
.star-title {
    opacity: 0.4;
}


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

.galaxy-nav {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 70px;
    height: 140px;

    border: none;
    background: transparent;

    color: rgba(255, 255, 255, 0.72);

    font-family: Georgia, serif;
    font-size: 58px;
    font-weight: 200;

    cursor: pointer;

    z-index: 30;

    opacity: 0.8;

    transition:
        opacity 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;

    text-shadow:
        0 0 6px rgba(0, 0, 0, 1),
        0 0 14px rgba(0, 0, 0, 0.9);
}

#previous-galaxy {
    left: 6px;
}


#next-galaxy {
    right: 6px;
}


.galaxy-nav:hover {
    opacity: 1;

    color: white;

    transform:
        translateY(-50%)
        scale(1.12);
}


/* ============================================================
   GALAXY TRANSITION
   ============================================================ */

#galaxy-transition {
    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #000;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 500;

    transition:
        opacity 0.8s ease,
        visibility 0s linear 0.8s;
}


/* Darkness covers the current galaxy */

#galaxy-transition.active {
    opacity: 1;

    visibility: visible;

    transition:
        opacity 0.8s ease;
}


#transition-message {
    color:
        rgba(255, 255, 255, 0.88);

    font-family:
        Georgia,
        serif;

    font-size: 20px;

    font-weight: normal;

    letter-spacing: 0.03em;

    text-align: center;

    padding: 30px;

    opacity: 0;

    transform:
        translateY(4px);

    transition:
        opacity 0.55s ease,
        transform 0.55s ease;
}


#transition-message.visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* ============================================================
   WRITING OVERLAY
   ============================================================ */

#writing-overlay {
    position: fixed;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding:
        5vh 5vw;

    background:
        rgba(0, 0, 0, 0.35);

    z-index: 1000;
}


#writing-overlay.open {
    display: flex;
}


/* Writing box */

#writing-box {
    position: relative;

    width:
        min(750px, 90vw);

    height: 85vh;

    background:
        rgba(8, 10, 18, 0.88);

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    box-shadow:
        0 20px 80px
        rgba(0, 0, 0, 0.7);

    color:
        rgba(255, 255, 255, 0.9);

    backdrop-filter:
        blur(8px);

    overflow: hidden;
}


/* Scrollable writing */

#writing-scroll {
    height: 100%;

    overflow-y: auto;

    padding:
        55px 65px;

    padding-right:
        55px;

    scrollbar-gutter:
        stable;
}


/* Close button */

#close-button {
    position: absolute;

    top: 15px;
    right: 25px;

    border: none;

    background: none;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 32px;

    font-family:
        sans-serif;

    cursor: pointer;

    z-index: 20;
}


#close-button:hover {
    color: white;
}


/* Writing typography */

#writing-title {
    margin-top: 0;

    margin-bottom:
        35px;

    font-size:
        32px;

    font-weight:
        normal;

    color: white;
}


#writing-content {
    font-size: 18px;

    line-height: 1.8;
}


#writing-content p {
    margin-bottom:
        1.5em;
}


/* ============================================================
   VISITOR COUNTER
   ============================================================ */

#visitor-counter {
    position: fixed;

    right: 18px;
    bottom: 14px;

    color:
        rgba(255, 255, 255, 0.75);

    font-family:
        "Courier New",
        monospace;

    font-size:
        11px;

    letter-spacing:
        1px;

    z-index: 50;

    user-select: none;
}


/* ============================================================
   WELCOME
   ============================================================ */

#welcome {
    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #000;

    z-index: 10000;

    pointer-events: none;

    animation:
        welcome-screen
        2.5s
        ease
        forwards;
}


#welcome-text {
    color:
        rgba(255, 255, 255, 0.9);

    font-family:
        Georgia,
        serif;

    font-size:
        24px;

    font-weight:
        normal;

    letter-spacing:
        0.04em;

    opacity: 0;

    animation:
        welcome-text
        1.8s
        ease
        forwards;
}


@keyframes welcome-text {

    0% {
        opacity: 0;

        transform:
            translateY(4px);
    }

    25% {
        opacity: 1;

        transform:
            translateY(0);
    }

    65% {
        opacity: 1;

        transform:
            translateY(0);
    }

    100% {
        opacity: 0;

        transform:
            translateY(-3px);
    }

}


@keyframes welcome-screen {

    0% {
        opacity: 1;
        visibility: visible;
    }

    68% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    #writing-overlay {
        padding:
            3vh 4vw;
    }


    #writing-box {
        width: 92vw;
        height: 90vh;
    }


    #writing-scroll {
        padding:
            50px
            28px
            45px
            28px;

        scrollbar-gutter:
            auto;
    }


    #writing-title {
        font-size: 27px;

        margin-bottom:
            28px;
    }


    #writing-content {
        font-size: 17px;

        line-height:
            1.7;
    }


    #writing-content p {
        margin-bottom:
            1.35em;
    }


    .star {
        cursor: pointer;
    }


    .star::before {
        width: 34px;
    }


    .star::after {
        height: 34px;
    }


    #close-button {
        top: 10px;
        right: 16px;

        font-size: 34px;

        padding:
            5px 8px;
    }


    /* Larger navigation touch targets */

    .galaxy-nav {
        width: 52px;
        height: 140px;

        font-size: 44px;

        opacity: 0.7;
    }


    #previous-galaxy {
        left: 0;
    }


    #next-galaxy {
        right: 0;
    }


    #transition-message {
        font-size: 18px;

        padding:
            35px;
    }


    #visitor-counter {
        right: 10px;
        bottom: 8px;

        font-size: 9px;
    }


    #welcome-text {
        font-size: 21px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media
(prefers-reduced-motion: reduce) {

    #welcome {
        animation-duration:
            0.5s;
    }


    #welcome-text {
        animation: none;

        opacity: 1;
    }


    .star {
        animation: none;
    }


    #galaxy-transition {
        transition-duration:
            0.15s;
    }


    #transition-message {
        transition-duration:
            0.15s;
    }

}
@media (pointer: coarse) {

    .star::after {
        content: "";
        position: absolute;
        width: 48px;
        height: 48px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: transparent;
    }

}