* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    background: #fffaf0;
    color: #4d4261;
    font-family: Georgia, "Times New Roman", serif;
    overflow: hidden;
}

button,
a {
    font-family: inherit;
}


/* =========================================================
   🌙 LUNA
   ========================================================= */

#luna-intro {
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 25%,
            #30356d 0%,
            #1d234d 38%,
            #101633 72%,
            #080d22 100%
        );
}

.night-sky {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 50% 100%,
            rgba(105,110,190,.25),
            transparent 55%
        );
}


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

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

.star {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 6px rgba(255,255,255,.9),
        0 0 14px rgba(190,205,255,.7);

    animation: twinkle 3s infinite ease-in-out;
}

.star-1 { left:8%; top:15%; animation-delay:.2s; }
.star-2 { left:16%; top:43%; animation-delay:1.4s; }
.star-3 { left:23%; top:11%; animation-delay:2.2s; }
.star-4 { left:31%; top:28%; animation-delay:.7s; }
.star-5 { left:39%; top:8%; animation-delay:1.8s; }
.star-6 { left:47%; top:36%; animation-delay:.4s; }
.star-7 { left:56%; top:15%; animation-delay:2.5s; }
.star-8 { left:63%; top:29%; animation-delay:1.1s; }
.star-9 { left:72%; top:9%; animation-delay:.9s; }
.star-10 { left:80%; top:39%; animation-delay:2s; }
.star-11 { left:88%; top:18%; animation-delay:.3s; }
.star-12 { left:94%; top:51%; animation-delay:1.7s; }
.star-13 { left:12%; top:70%; animation-delay:2.3s; }
.star-14 { left:28%; top:61%; animation-delay:1.2s; }
.star-15 { left:68%; top:66%; animation-delay:.6s; }
.star-16 { left:84%; top:73%; animation-delay:2.7s; }
.star-17 { left:51%; top:76%; animation-delay:1.5s; }
.star-18 { left:38%; top:49%; animation-delay:.1s; }

@keyframes twinkle {

    0%,100% {
        opacity:.3;
        transform:scale(.7);
    }

    50% {
        opacity:1;
        transform:scale(1.5);
    }
}


/* =========================================================
   MOON
   ========================================================= */

.moon {
    position:absolute;

    width:260px;
    height:260px;

    top:10%;
    left:50%;

    transform:translateX(-50%);

    animation:moonFloat 6s ease-in-out infinite;
}

.moon-glow {
    position:absolute;
    inset:-50px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(220,225,255,.3),
            rgba(150,160,230,.12) 40%,
            transparent 70%
        );
}

.crescent {
    position:absolute;
    inset:25px;

    border-radius:50%;

    background:#f3f1ff;

    box-shadow:
        0 0 25px rgba(230,235,255,.9),
        0 0 70px rgba(180,195,255,.45);
}

.crescent::after {
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    top:-15px;
    left:55px;

    border-radius:50%;

    background:#1b2149;
}

@keyframes moonFloat {

    0%,100% {
        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(-10px);
    }
}


/* =========================================================
   LUNA CONTENT
   ========================================================= */

.luna-content {
    position:absolute;

    width:min(620px,90%);

    top:54%;
    left:50%;

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

    text-align:center;

    color:#f6f4ff;

    z-index:5;
}

.luna-symbol {
    font-size:42px;

    color:#cbd2ff;

    text-shadow:
        0 0 12px #abb9ff,
        0 0 35px rgba(160,175,255,.8);
}

.luna-eyebrow {
    margin:0 0 10px;

    text-transform:uppercase;

    letter-spacing:5px;

    font-size:11px;

    color:#bfc8f5;
}

.luna-content h1 {
    margin:0;

    font-size:clamp(42px,7vw,78px);

    font-weight:normal;

    letter-spacing:2px;
}

.luna-text {
    margin:18px 0;

    font-size:18px;

    line-height:1.7;

    color:#d9ddf5;
}

.luna-divider {
    margin:22px 0;

    color:#aab5ed;

    letter-spacing:5px;
}

.disclaimer {
    margin:0 auto 28px;

    padding:18px 24px;

    max-width:520px;

    border:
        1px solid rgba(190,200,255,.28);

    background:
        rgba(7,12,35,.35);

    backdrop-filter:blur(5px);

    line-height:1.6;

    font-size:14px;

    color:#cdd2ec;
}

.disclaimer p {
    margin:5px;
}

.disclaimer strong {
    color:#eef0ff;
}


#enter-button {
    border:
        1px solid rgba(225,230,255,.55);

    background:
        linear-gradient(
            135deg,
            rgba(130,145,220,.3),
            rgba(65,75,145,.25)
        );

    color:white;

    padding:15px 32px;

    border-radius:50px;

    font-size:13px;

    letter-spacing:3px;

    cursor:pointer;

    transition:.3s ease;
}

#enter-button:hover {
    transform:translateY(-3px);

    box-shadow:
        0 0 25px rgba(175,190,255,.35);
}

.night-horizon {
    position:absolute;

    left:-10%;
    bottom:-12%;

    width:120%;
    height:30%;

    border-radius:50% 50% 0 0;

    background:
        radial-gradient(
            ellipse at center top,
            rgba(108,118,200,.2),
            rgba(10,15,40,.8) 65%
        );
}


/* =========================================================
   🌅 SUNRISE TRANSITION
   ========================================================= */

#sunrise-transition {
    position:fixed;

    inset:0;

    z-index:2000;

    pointer-events:none;

    visibility:hidden;

    opacity:1;

    overflow:hidden;
}


/* THE HUGE GOLDEN SCREEN */

.sunrise-sky {
    position:absolute;

    inset:0;

    transform:scale(0);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 50% 58%,
            #fffef3 0%,
            #fff6b8 18%,
            #ffd77d 36%,
            #f5a46b 57%,
            #d97682 75%,
            #7c6699 100%
        );
}


/* SUN GLOW */

.sun-glow {
    position:absolute;

    width:40vw;
    height:40vw;

    min-width:300px;
    min-height:300px;

    left:50%;
    top:65%;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,250,205,.95),
            rgba(255,215,125,.4) 40%,
            transparent 70%
        );
}


/* SUN */

.rising-sun {
    position:absolute;

    left:50%;
    bottom:-20px;

    transform:
        translateX(-50%)
        translateY(100%);

    width:190px;
    height:190px;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 40% 35%,
            #fffef0,
            #fff2a4 40%,
            #ffc86d 75%,
            #f6a35e
        );

    box-shadow:
        0 0 35px rgba(255,228,135,.9),
        0 0 100px rgba(255,190,100,.75),
        0 0 200px rgba(255,160,120,.5);
}

.sun-core {
    position:absolute;
    inset:20px;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff,
            #fff4b8 50%,
            #ffd47b
        );
}


/* =========================================================
   RAYS
   ========================================================= */

.sunrise-rays {
    position:absolute;

    left:50%;
    top:65%;

    width:700px;
    height:700px;

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

    opacity:0;
}

.sunrise-rays span {
    position:absolute;

    left:50%;
    top:50%;

    width:5px;
    height:330px;

    transform-origin:50% 100%;

    background:
        linear-gradient(
            to top,
            rgba(255,245,190,.7),
            transparent
        );
}

.sunrise-rays span:nth-child(1) { transform:translate(-50%,-100%) rotate(0deg); }
.sunrise-rays span:nth-child(2) { transform:translate(-50%,-100%) rotate(45deg); }
.sunrise-rays span:nth-child(3) { transform:translate(-50%,-100%) rotate(90deg); }
.sunrise-rays span:nth-child(4) { transform:translate(-50%,-100%) rotate(135deg); }
.sunrise-rays span:nth-child(5) { transform:translate(-50%,-100%) rotate(180deg); }
.sunrise-rays span:nth-child(6) { transform:translate(-50%,-100%) rotate(225deg); }
.sunrise-rays span:nth-child(7) { transform:translate(-50%,-100%) rotate(270deg); }
.sunrise-rays span:nth-child(8) { transform:translate(-50%,-100%) rotate(315deg); }


/* =========================================================
   CLOUDS
   ========================================================= */

.dawn-cloud {
    position:absolute;

    width:280px;
    height:65px;

    border-radius:50%;

    background:
        rgba(255,238,218,.35);

    filter:blur(8px);

    opacity:0;
}

.cloud-one {
    left:8%;
    bottom:20%;
}

.cloud-two {
    right:10%;
    bottom:30%;
}

.cloud-three {
    left:38%;
    bottom:12%;
}


/* =========================================================
   PARTICLES
   ========================================================= */

.dawn-particles {
    position:absolute;
    inset:0;

    opacity:0;
}

.dawn-particles i {
    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:#fffce5;

    box-shadow:
        0 0 10px rgba(255,255,220,.9);

    animation:
        floatParticle 4s ease-in-out infinite;
}

.dawn-particles i:nth-child(1) { left:12%; top:72%; }
.dawn-particles i:nth-child(2) { left:19%; top:55%; animation-delay:.4s; }
.dawn-particles i:nth-child(3) { left:28%; top:80%; animation-delay:1s; }
.dawn-particles i:nth-child(4) { left:37%; top:63%; animation-delay:.7s; }
.dawn-particles i:nth-child(5) { left:46%; top:76%; animation-delay:1.4s; }
.dawn-particles i:nth-child(6) { left:55%; top:52%; animation-delay:.3s; }
.dawn-particles i:nth-child(7) { left:64%; top:71%; animation-delay:1.2s; }
.dawn-particles i:nth-child(8) { left:73%; top:58%; animation-delay:.8s; }
.dawn-particles i:nth-child(9) { left:82%; top:78%; animation-delay:1.6s; }
.dawn-particles i:nth-child(10) { left:89%; top:64%; animation-delay:.2s; }
.dawn-particles i:nth-child(11) { left:25%; top:38%; animation-delay:1.1s; }
.dawn-particles i:nth-child(12) { left:70%; top:35%; animation-delay:.6s; }
.dawn-particles i:nth-child(13) { left:43%; top:42%; animation-delay:1.8s; }
.dawn-particles i:nth-child(14) { left:91%; top:42%; animation-delay:.9s; }
.dawn-particles i:nth-child(15) { left:8%; top:45%; animation-delay:1.3s; }

@keyframes floatParticle {

    0%,100% {
        transform:
            translateY(0)
            scale(.7);

        opacity:.2;
    }

    50% {
        transform:
            translateY(-35px)
            scale(1.3);

        opacity:1;
    }
}


/* =========================================================
   MESSAGE
   ========================================================= */

.sunrise-message {
    position:absolute;

    left:50%;
    top:48%;

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

    text-align:center;

    color:#fffdf1;

    text-shadow:
        0 2px 15px rgba(116,67,75,.35);

    opacity:0;
}

.sunrise-message p {
    margin:0 0 12px;

    font-size:15px;

    letter-spacing:4px;

    text-transform:uppercase;
}

.sunrise-message strong {
    display:block;

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

    font-weight:normal;
}


/* =========================================================
   FINAL FLASH
   ========================================================= */

.sun-flash {
    position:absolute;
    inset:0;

    background:#fffdf1;

    opacity:0;
}


/* =========================================================
   🌅 ANIMATION CONTROLS
   ========================================================= */

body.sunrise #sunrise-transition {
    visibility:visible;

    /*
       THIS IS THE FIX.

       The entire sunrise layer itself now disappears
       after the golden hold.
    */

    animation:
        sunriseLayerFade
        1.8s
        ease
        forwards;

    animation-delay:6.8s;
}


body.sunrise #luna-intro {
    animation:
        lunaFadeAway
        2.2s
        ease
        forwards;

    animation-delay:4.5s;
}


body.sunrise .stars {
    animation:
        starsDisappear
        1.5s
        ease
        forwards;
}


body.sunrise .moon {
    animation:
        moonDescend
        2.8s
        cubic-bezier(.65,0,.9,.4)
        forwards;
}


body.sunrise .luna-content {
    animation:
        lunaContentFade
        1.3s
        ease
        forwards;
}


body.sunrise .sunrise-sky {
    animation:
        skyExpand
        4.2s
        cubic-bezier(.65,0,.25,1)
        forwards;
}


body.sunrise .sun-glow {
    animation:
        glowExpand
        2.5s
        ease
        forwards;
}


body.sunrise .rising-sun {
    animation:
        sunRise
        3s
        cubic-bezier(.5,0,.25,1)
        forwards;
}


body.sunrise .sunrise-rays {
    animation:
        raysAppear
        2s
        ease
        forwards;
}


body.sunrise .dawn-particles {
    animation:
        particlesAppear
        2s
        ease
        forwards;

    animation-delay:1.5s;
}


body.sunrise .dawn-cloud {
    animation:
        cloudsAppear
        2s
        ease
        forwards;

    animation-delay:2s;
}


body.sunrise .sunrise-message {
    animation:
        messageAppear
        2s
        ease
        forwards;

    animation-delay:2.4s;
}


body.sunrise .sun-flash {
    animation:
        flashHold
        2.2s
        ease
        forwards;

    animation-delay:5.2s;
}


body.sunrise #celestia-site {
    animation:
        celestiaReveal
        2.2s
        ease
        forwards;

    animation-delay:6.2s;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes starsDisappear {

    to {
        opacity:0;
        transform:scale(1.4);
    }
}


@keyframes moonDescend {

    0% {
        transform:
            translateX(-50%)
            translateY(0)
            rotate(0deg);
    }

    100% {
        transform:
            translateX(-50%)
            translateY(130vh)
            rotate(18deg);
    }
}


@keyframes lunaContentFade {

    0% {
        opacity:1;

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

    100% {
        opacity:0;

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


@keyframes skyExpand {

    0% {
        transform:scale(0);

        border-radius:50%;
    }

    100% {
        transform:scale(3);

        border-radius:0;
    }
}


@keyframes glowExpand {

    0% {
        transform:
            translate(-50%,-50%)
            scale(0);

        opacity:0;
    }

    60% {
        opacity:1;
    }

    100% {
        transform:
            translate(-50%,-50%)
            scale(3);

        opacity:0;
    }
}


@keyframes sunRise {

    0% {
        transform:
            translateX(-50%)
            translateY(100%);
    }

    100% {
        transform:
            translateX(-50%)
            translateY(-35vh);
    }
}


@keyframes raysAppear {

    from {
        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(.2);
    }

    to {
        opacity:.35;

        transform:
            translate(-50%,-50%)
            scale(1);
    }
}


@keyframes particlesAppear {

    from {
        opacity:0;
    }

    to {
        opacity:1;
    }
}


@keyframes cloudsAppear {

    from {
        opacity:0;

        transform:
            translateY(30px);
    }

    to {
        opacity:.7;

        transform:
            translateY(0);
    }
}


@keyframes messageAppear {

    from {
        opacity:0;

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

    to {
        opacity:1;

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


/*
   THE GOLDEN HOLD

   The screen becomes golden.
   It remains golden for a few seconds.
*/

@keyframes flashHold {

    0% {
        opacity:0;
    }

    25% {
        opacity:0;
    }

    42% {
        opacity:.92;
    }

    68% {
        opacity:.92;
    }

    100% {
        opacity:0;
    }
}


/*
   ⭐⭐⭐ THE ACTUAL FIX ⭐⭐⭐

   The entire sunrise layer fades away,
   revealing the Celestia website beneath it.
*/

@keyframes sunriseLayerFade {

    0% {
        opacity:1;
    }

    100% {
        opacity:0;

        visibility:hidden;
    }
}


@keyframes lunaFadeAway {

    to {
        opacity:0;

        visibility:hidden;
    }
}


@keyframes celestiaReveal {

    from {
        opacity:0;

        transform:
            scale(1.025);
    }

    to {
        opacity:1;

        transform:
            scale(1);
    }
}


/* =========================================================
   ☀️ CELESTIA WEBSITE
   ========================================================= */

#celestia-site {

    min-height:100vh;

    opacity:0;

    background:
        linear-gradient(
            180deg,
            #fffdf4 0%,
            #fff8e8 45%,
            #f8e9d7 100%
        );

    color:#574963;

    padding:45px 30px;

    position:relative;

    overflow-x:hidden;
}


#celestia-site::before,
#celestia-site::after {

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    pointer-events:none;

    opacity:.25;

    filter:blur(10px);
}


#celestia-site::before {

    top:-250px;
    left:-180px;

    background:
        radial-gradient(
            circle,
            #ffd77d,
            transparent 70%
        );
}


#celestia-site::after {

    right:-180px;
    bottom:-250px;

    background:
        radial-gradient(
            circle,
            #e6b7c6,
            transparent 70%
        );
}


/* HEADER */

.celestia-header {

    position:relative;

    z-index:2;

    max-width:1100px;

    margin:
        0 auto 35px;

    text-align:center;
}


.header-sun {

    font-size:55px;

    color:#d89a48;

    text-shadow:
        0 0 18px rgba(255,197,101,.6);

    margin-bottom:8px;
}


.header-small {

    margin:0 0 5px;

    font-size:10px;

    letter-spacing:5px;

    color:#b78667;
}


.celestia-header h1 {

    margin:0;

    font-size:
        clamp(40px,7vw,75px);

    font-weight:normal;

    color:#71516d;

    letter-spacing:2px;
}


.header-subtitle {

    margin:10px 0;

    font-style:italic;

    font-size:17px;

    color:#9a7890;
}


.header-divider {

    margin-top:22px;

    color:#c79574;

    letter-spacing:5px;
}


/* LAYOUT */

.site-layout {

    position:relative;

    z-index:2;

    max-width:1100px;

    margin:auto;

    display:grid;

    grid-template-columns:
        190px
        minmax(0,1fr)
        210px;

    gap:22px;
}


.side-panel,
.right-panel,
.main-panel {

    min-width:0;
}


.side-panel,
.mini-card,
.welcome-card,
.feature-card,
.quote-card {

    border:
        1px solid rgba(181,142,121,.25);

    background:
        rgba(255,253,247,.75);

    box-shadow:
        0 12px 35px rgba(117,84,90,.08);
}


/* LEFT */

.side-panel {

    padding:25px 18px;

    text-align:center;
}


.panel-decoration {

    font-size:22px;

    color:#d59b64;
}


.side-panel h2 {

    margin:
        7px 0 20px;

    font-size:17px;

    font-weight:normal;

    color:#73556d;
}


.side-panel nav {

    display:flex;

    flex-direction:column;

    gap:8px;
}


.side-panel nav a {

    text-decoration:none;

    color:#8b6d7f;

    padding:7px;

    transition:.2s ease;
}


.side-panel nav a:hover {

    color:#bd7d59;

    transform:
        translateX(3px);
}


.side-divider {

    margin:25px 0;

    color:#d0a17c;
}


.moon-note span {

    font-size:27px;

    color:#b29cb6;
}


.moon-note p {

    font-size:12px;

    line-height:1.7;

    color:#917d8d;
}


/* CENTER */

.main-panel {

    display:flex;

    flex-direction:column;

    gap:22px;
}


.welcome-card {

    text-align:center;

    padding:40px 35px;
}


.card-sun {

    font-size:40px;

    color:#dc9f58;

    margin-bottom:10px;

    text-shadow:
        0 0 15px rgba(255,197,95,.5);
}


.tiny-heading {

    margin:0;

    font-size:10px;

    letter-spacing:4px;

    color:#bb856e;
}


.welcome-card h2 {

    margin:10px 0;

    font-size:32px;

    font-weight:normal;

    color:#72556d;
}


.welcome-card p:not(.tiny-heading) {

    margin:10px auto;

    max-width:600px;

    line-height:1.8;

    color:#776579;
}


/* CARDS */

.feature-grid {

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:15px;
}


.feature-card {

    padding:25px 17px;

    text-align:center;

    transition:.25s ease;
}


.feature-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 17px 40px rgba(117,84,90,.13);
}


.feature-icon {

    font-size:27px;

    color:#d49a60;
}


.feature-card h3 {

    margin:10px 0;

    font-weight:normal;

    color:#73556d;
}


.feature-card p {

    margin:0;

    font-size:13px;

    line-height:1.6;

    color:#897483;
}


/* QUOTE */

.quote-card {

    padding:30px;

    text-align:center;
}


.quote-mark {

    display:block;

    font-size:45px;

    color:#d9a16e;
}


.quote-card p {

    margin:15px 0 8px;

    font-size:18px;

    font-style:italic;

    line-height:1.7;

    color:#765d71;
}


.quote-author {

    font-size:11px;

    letter-spacing:2px;

    color:#ad8790;
}


/* RIGHT */

.right-panel {

    display:flex;

    flex-direction:column;

    gap:18px;
}


.mini-card {

    padding:20px;

    text-align:center;
}


.mini-card h2 {

    margin:0 0 14px;

    font-size:15px;

    font-weight:normal;

    color:#76566d;
}


.mood-sun {

    font-size:42px;

    color:#d99a51;

    text-shadow:
        0 0 15px rgba(255,191,92,.5);
}


.mini-card p {

    font-size:12px;

    line-height:1.6;

    color:#8c7582;
}


.updates {

    list-style:none;

    padding:0;

    margin:0;

    text-align:left;
}


.updates li {

    padding:8px 0;

    border-bottom:
        1px solid rgba(180,140,120,.15);

    font-size:11px;

    color:#806a78;
}


.updates li:last-child {
    border-bottom:none;
}


.updates span {

    display:block;

    font-size:9px;

    letter-spacing:1px;

    color:#c28e6f;
}


.link-buttons {

    display:flex;

    flex-direction:column;

    gap:7px;
}


.link-buttons a {

    padding:7px;

    text-decoration:none;

    font-size:11px;

    color:#8c6a7c;

    background:
        rgba(234,207,191,.2);
}


.link-buttons a:hover {

    background:
        rgba(234,207,191,.4);
}


/* FOOTER */

footer {

    position:relative;

    z-index:2;

    max-width:1100px;

    margin:45px auto 0;

    padding-top:25px;

    border-top:
        1px solid rgba(181,142,121,.25);

    text-align:center;

    color:#987c88;
}


.footer-sun {

    font-size:25px;

    color:#d89b58;
}


footer p {

    margin:8px;
}


.footer-small {

    font-size:10px;

    letter-spacing:2px;
}


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

@media (max-width:850px) {

    body {
        overflow:auto;
    }

    #luna-intro {
        overflow-y:auto;
    }

    .site-layout {
        grid-template-columns:1fr;
    }

    .feature-grid {
        grid-template-columns:1fr;
    }

    .side-panel,
    .right-panel {
        display:block;
    }
}


@media (max-width:500px) {

    #celestia-site {
        padding:30px 15px;
    }

    .luna-content {
        width:92%;
    }

    .luna-content h1 {
        font-size:40px;
    }
}