/************************************************
 HOME — TAEKOOK UNIVERSE
************************************************/

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

#logo-intro-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    background:#000;
}

#logo-intro-canvas{
    width:100vw;
    height:100vh;
    display:block;
}

#final-logo{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(1);
    z-index:10000;
    max-width:40vw;
    max-height:40vh;
    opacity:0;
}

/* =================================================
   HERO
================================================= */

.home-hero{
    position:relative;
    width:min(1200px,92%);
    min-height:78vh;
    margin:0 auto;
    padding:70px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
    overflow:hidden;
}

.home-hero::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    left:-200px;
    top:50%;
    transform:translateY(-50%);
    background:radial-gradient(
        circle,
        rgba(106,13,173,.20),
        transparent 68%
    );
    pointer-events:none;
}

.home-hero::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    right:-180px;
    top:20px;
    background:radial-gradient(
        circle,
        rgba(15,255,80,.10),
        transparent 70%
    );
    pointer-events:none;
}

/* =================================================
   HERO COPY
================================================= */

.hero-copy{
    position:relative;
    z-index:3;
    width:56%;
    max-width:670px;
    text-align:left;
}

.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    padding:7px 16px;
    border-radius:30px;
    border:1px solid rgba(168,85,247,.35);
    background:rgba(106,13,173,.10);
    color:rgba(255,255,255,.78);
    font-size:.8rem;
    letter-spacing:3px;
    margin-bottom:25px;
}

.home-title{
    margin:0;
    font-family:'Orbitron',sans-serif;
    font-size:clamp(2.7rem,5.5vw,5.6rem);
    line-height:1.03;
    letter-spacing:-1.5px;
    color:#fff;
}

.home-title > span{
    display:block;
}

.title-gradient{
    margin-top:8px;
    background:linear-gradient(
        100deg,
        #b98cff 0%,
        #6A0DAD 20%,
        #8c35d8 32%,
        #0FFF50 50%,
        #0FFF50 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.home-description{
    max-width:590px;
    margin:28px 0 0;
    color:rgba(255,255,255,.62);
    font-size:clamp(1rem,1.4vw,1.25rem);
    line-height:1.7;
    letter-spacing:.4px;
}

/* =================================================
   HERO BUTTONS
================================================= */

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:35px;
}

.universe-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:11px 25px;
    border-radius:30px;
    text-decoration:none;
    font-family:'Fira Sans Condensed',sans-serif;
    font-size:1rem;
    letter-spacing:1.5px;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.primary-btn{
    color:#fff;
    background:linear-gradient(
        100deg,
        rgba(106,13,173,.45),
        rgba(15,255,80,.12)
    );
    border:1px solid rgba(168,85,247,.8);
    box-shadow:0 0 20px rgba(106,13,173,.18);
}

.primary-btn:hover{
    transform:translateY(-4px);
    border-color:#0FFF50;
    box-shadow:
        0 0 25px rgba(168,85,247,.45),
        0 0 35px rgba(15,255,80,.12);
}

.secondary-btn{
    color:rgba(255,255,255,.75);
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.13);
}

.secondary-btn:hover{
    transform:translateY(-4px);
    color:#fff;
    border-color:rgba(168,85,247,.55);
}

/* =================================================
   ARTIST ORBIT
================================================= */

.artist-orbit{
    position:relative;
    width:410px;
    height:410px;
    flex:0 0 410px;
    z-index:2;
}

.orbit-ring{
    position:absolute;
    top:50%;
    left:50%;
    border-radius:50%;
    transform:translate(-50%,-50%) rotate(-18deg);
    pointer-events:none;
}

.ring-purple{
    width:330px;
    height:330px;
    border:1px solid rgba(168,85,247,.45);
    box-shadow:0 0 35px rgba(106,13,173,.18);
}

.ring-green{
    width:245px;
    height:245px;
    border:1px dashed rgba(15,255,80,.35);
    transform:translate(-50%,-50%) rotate(35deg);
}

.artist-node{
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:rgba(7,7,7,.90);
    backdrop-filter:blur(8px);
    z-index:4;
}

.artist-node strong{
    font-family:'Orbitron',sans-serif;
    font-size:1.1rem;
    letter-spacing:2px;
}

.artist-node small{
    margin-top:2px;
    font-size:.8rem;
    opacity:.55;
    letter-spacing:2px;
}

.node-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    margin-bottom:10px;
}

.tae-node{
    top:46px;
    left:10px;
    border:1px solid rgba(15,255,80,.55);
    box-shadow:0 0 30px rgba(15,255,80,.12);
}

.tae-node .node-dot{
    background:#0FFF50;
    box-shadow:0 0 12px #0FFF50;
}

.tae-node strong{
    color:#0FFF50;
}

.koo-node{
    right:8px;
    bottom:42px;
    border:1px solid rgba(168,85,247,.55);
    box-shadow:0 0 30px rgba(106,13,173,.20);
}

.koo-node .node-dot{
    background:#a855f7;
    box-shadow:0 0 12px #a855f7;
}

.koo-node strong{
    color:#b98cff;
}

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

.orbit-star{
    position:absolute;
    font-size:1.1rem;
    color:#FFD700;
    text-shadow:0 0 12px rgba(255,215,0,.7);
    z-index:5;
}

.star-a{
    top:30px;
    right:95px;
    color:#d62828;
}

.star-b{
    left:115px;
    bottom:25px;
    color:#d62828;
    font-size:.8rem;
}

.star-c{
    right:20px;
    top:135px;
    font-size:.8rem;
}

.star-d{
    left:55px;
    bottom:125px;
}

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

.section-kicker{
    display:inline-block;
    color:#a855f7;
    font-size:.8rem;
    letter-spacing:4px;
    font-weight:600;
}

.home-section-title{
    margin:12px 0 15px;
    font-family:'Orbitron',sans-serif;
    font-size:clamp(2rem,4vw,3.4rem);
    line-height:1.1;
    background:linear-gradient(
        100deg,
        #b98cff 0%,
        #6A0DAD 20%,
        #8c35d8 42%,
        #0FFF50 70%,
        #0FFF50 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* =================================================
   PICTURE OF THE DAY
================================================= */

#picture-of-the-day{
    scroll-margin-top:130px;
}

.featured-moment-section{
    width:min(1050px,92%);
    margin:0 auto 120px;
    position:relative;
}

.featured-heading{
    display:flex;
    justify-content:center;
    margin-bottom:35px;
    text-align:center;
}

.featured-heading-copy{
    text-align:center;
}

.featured-heading .section-kicker{
    display:block;
    margin-bottom:8px;
}

.featured-heading .home-section-title{
    margin:0 0 10px;
}

.featured-heading p{
    margin:0;
    color:rgba(255,255,255,.48);
    font-size:1rem;
    letter-spacing:1px;
}

/* =================================================
   FEATURED IMAGE STAGE
================================================= */

.potd-stage{
    width:100%;
    margin:0 auto;
    display:flex;
    justify-content:center;
    background:transparent;
}


/* =================================================
   IMAGE FRAME
================================================= */

.potd-image-frame{
    position:relative;
    width:fit-content;
    max-width:920px;
    max-height:72vh;
    background:transparent;
}


/* =================================================
   FEATURED IMAGE
================================================= */

.potd-image-frame img{
    display:block;
    width:auto;
    max-width:920px;
    max-height:72vh;
    object-fit:contain;
    border-radius:18px;
    background:transparent;
    box-shadow:0 6px 22px rgba(0,0,0,.45);
    transition:
        transform .5s ease,
        filter .5s ease;
}

.potd-image-frame:hover img{
    transform:scale(1.015);
    filter:brightness(1.04);
}


/* =================================================
   IMAGE CORNERS
================================================= */

.potd-corner{
    position:absolute;
    width:50px;
    height:50px;
    z-index:3;
    pointer-events:none;
}

.potd-corner.tl{
    top:-3px;
    left:-3px;
    border-top:5px solid #a855f7;
    border-left:5px solid #a855f7;
    border-top-left-radius:18px;
}

.potd-corner.br{
    right:-3px;
    bottom:-3px;
    border-right:5px solid #0FFF50;
    border-bottom:5px solid #0FFF50;
    border-bottom-right-radius:18px;
}

/* =================================================
   NAVIGATOR
================================================= */

.navigator-section{
    width:min(1200px,92%);
    margin:0 auto 120px;
}

.navigator-heading{
    text-align:center;
    margin-bottom:40px;
}

.navigator-heading .home-section-title{
    margin-bottom:12px;
}

.navigator-heading p{
    margin:0;
    color:rgba(255,255,255,.48);
    font-size:1rem;
    letter-spacing:1px;
}

.universe-nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.nav-feature{
    position:relative;
    min-height:190px;
    padding:30px;
    border-radius:22px;
    background:#090909;
    border:1px solid rgba(255,255,255,.07);
    text-decoration:none;
    color:#fff;
    overflow:hidden;
    display:block;
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.nav-feature::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(168,85,247,.09),
            transparent 45%
        );
    opacity:.7;
    pointer-events:none;
}

.nav-feature:hover{
    transform:translateY(-6px);
    background:#0c0c0c;
}

.nav-number{
    position:absolute;
    top:20px;
    right:25px;
    font-family:'Orbitron',sans-serif;
    font-size:.7rem;
    letter-spacing:2px;
    color:rgba(255,255,255,.2);
}

.nav-content{
    position:relative;
    z-index:2;
    max-width:430px;
}

.nav-icon{
    display:block;
    margin-bottom:15px;
    font-size:1.3rem;
    color:#a855f7;
}

.nav-feature h3{
    margin:0 0 10px;
    font-family:'Orbitron',sans-serif;
    font-size:1.35rem;
    letter-spacing:1px;
}

.nav-feature p{
    margin:0;
    color:rgba(255,255,255,.5);
    line-height:1.6;
    font-size:.95rem;
}

.nav-arrow{
    position:absolute;
    right:28px;
    bottom:25px;
    font-size:1.2rem;
    color:rgba(255,255,255,.45);
    transition:transform .3s ease;
}

.nav-feature:hover .nav-arrow{
    transform:translate(4px,-4px);
    color:#fff;
}

.nav-purple:hover{
    border-color:rgba(168,85,247,.55);
    box-shadow:0 10px 35px rgba(106,13,173,.15);
}

.nav-purple .nav-icon{
    color:#a855f7;
}

.nav-green:hover{
    border-color:rgba(15,255,80,.45);
    box-shadow:0 10px 35px rgba(15,255,80,.08);
}

.nav-green .nav-icon{
    color:#0FFF50;
}

.nav-gold:hover{
    border-color:rgba(255,215,0,.40);
    box-shadow:0 10px 35px rgba(255,215,0,.08);
}

.nav-gold .nav-icon{
    color:#FFD700;
}

.nav-red:hover{
    border-color:rgba(214,40,40,.45);
    box-shadow:0 10px 35px rgba(214,40,40,.08);
}

.nav-red .nav-icon{
    color:#d62828;
}

/* =================================================
   CLOSING
================================================= */

.home-closing{
    position:relative;
    width:min(900px,92%);
    margin:0 auto 110px;
    padding:90px 30px;
    text-align:center;
    overflow:hidden;
}

.closing-glow{
    position:absolute;
    width:500px;
    height:300px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:radial-gradient(
        ellipse,
        rgba(106,13,173,.18),
        rgba(15,255,80,.06) 45%,
        transparent 75%
    );
    pointer-events:none;
}

.home-closing h2{
    position:relative;
    margin:15px 0;
    font-family:'Orbitron',sans-serif;
    font-size:clamp(2rem,5vw,4rem);
    line-height:1.05;
}

.home-closing h2 span{
    display:block;
    background:linear-gradient(
        100deg,
        #b98cff 0%,
        #6A0DAD 20%,
        #8c35d8 42%,
        #0FFF50 70%,
        #0FFF50 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.home-closing p{
    position:relative;
    color:rgba(255,255,255,.5);
    margin-bottom:30px;
}

/* =================================================
   CELEBRATION
================================================= */

.celebration-section {
    position: relative;
    width: 100%;
    padding: 90px 6vw;
    overflow: hidden;
    text-align: center;
}

.celebration-section::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(106, 13, 173, 0.18) 0%,
        rgba(15, 255, 80, 0.06) 35%,
        transparent 70%
    );
    pointer-events: none;
}

.celebration-content {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
}

.celebration-section .section-kicker {
    display: block;
    margin-bottom: 18px;
}

.celebration-title span {
    display: block;
}

.celebration-title {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    font-family: "Orbitron", cursive;
    font-size: clamp(3rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.05;
    background: linear-gradient(
        90deg,
        #6A0DAD,
        #9B4DCA,
        #0FFF50,
        #39FF78,
        #9B4DCA,
        #6A0DAD
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.celebration-title.celebration-jk {
    background: linear-gradient(
        90deg,
        #6A0DAD,
        #9B4DCA,
        #F5C542,
        #FFD966,
        #9B4DCA,
        #6A0DAD
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.celebration-title.celebration-v {
    background: linear-gradient(
        90deg,
        #0FFF50 0%,
        #0FFF50 15%,
        #FF3B3B 50%,
        #0FFF50 85%,
        #0FFF50 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.celebration-title.celebration-tk {
    background: linear-gradient(
        90deg,
        #6A0DAD 0%,
        #9B4DCA 16%,
        #0FFF50 34%,
        #5FFF8A 43%,
        #F5C542 57%,
        #FFD966 70%,
        #FF6B6B 86%,
        #FF3B3B 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.celebration-message {
    max-width: 700px;
    margin: 25px auto 35px;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}

.celebration-countdown-label {
    margin: 25px 0 15px;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.celebration-countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0 auto;
    font-family: "Fira Sans Condensed", sans-serif;
}

.celebration-countdown > span {
    min-width: 70px;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    text-shadow:
        0 0 12px rgba(106, 13, 173, 0.8),
        0 0 25px rgba(15, 255, 80, 0.2);
}

.celebration-countdown > small {
    align-self: flex-end;
    margin: 0 5px 3px 0;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.45);
}

.celebration-image-frame {
    position: relative;
    width: min(520px, 90vw);
    aspect-ratio: 1 / 1;
    margin: 35px auto;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.35);
    box-shadow:
        0 0 30px rgba(106, 13, 173, 0.2),
        0 0 60px rgba(15, 255, 80, 0.05);
}

.celebration-image-frame::before,
.celebration-image-frame::after {
    content: "";
    position: absolute;
    width: 45px;
    height: 45px;
    pointer-events: none;
}

.celebration-image-frame::before {
    top: -6px;
    left: -6px;
    border-top: 2px solid #6A0DAD;
    border-left: 2px solid #6A0DAD;
}

.celebration-image-frame::after {
    right: -6px;
    bottom: -6px;
    border-right: 2px solid #0FFF50;
    border-bottom: 2px solid #0FFF50;
}

.celebration-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =================================================
   TABLET
================================================= */

@media (min-width:769px) and (max-width:1023px) and (orientation:portrait){

    /* =========================
       HERO
    ========================= */

    .home-hero{
        width:min(720px,92%);
        min-height:auto;

        padding:70px 25px 80px;

        flex-direction:column;
        justify-content:center;

        gap:55px;

        text-align:center;
    }

    .hero-copy{
        width:100%;
        max-width:680px;
        text-align:center;
    }

    .hero-eyebrow{
        margin-bottom:22px;
    }

    .home-title{
        font-size:clamp(3rem,8vw,4.8rem);
    }

    .home-description{
        max-width:620px;
        margin-left:auto;
        margin-right:auto;
    }

    .hero-actions{
        justify-content:center;
    }


    /* =========================
       ARTIST ORBIT
    ========================= */

    .artist-orbit{
        width:360px;
        height:360px;
        flex:0 0 360px;
    }

    .ring-purple{
        width:290px;
        height:290px;
    }

    .ring-green{
        width:215px;
        height:215px;
    }

    .artist-node{
        width:105px;
        height:105px;
    }

    .tae-node{
        top:40px;
        left:8px;
    }

    .koo-node{
        right:8px;
        bottom:35px;
    }


    /* =========================
       PICTURE OF THE DAY
    ========================= */

    .featured-moment-section{
        width:90%;
        margin-bottom:100px;
    }

    .potd-image-frame{
        max-width:100%;
    }

    .potd-image-frame img{
        max-width:100%;
        max-height:65vh;
    }


    /* =========================
       NAVIGATOR
    ========================= */

    .navigator-section{
        width:90%;
        margin-bottom:100px;
    }

    .universe-nav{
        gap:14px;
    }

    .nav-feature{
        min-height:180px;
        padding:27px;
    }

    /* =========================
       CLOSING
    ========================= */

    .home-closing{
        width:90%;
        margin-bottom:90px;
        padding:75px 25px;
    }

    .celebration-section {
        padding: 75px 5vw;
    }

    .celebration-title {
        max-width: 850px;
        font-size: clamp(3.2rem, 7vw, 4.8rem);
    }

    .celebration-message {
        max-width: 650px;
        font-size: 1.1rem;
    }

    .celebration-image-frame {
        width: min(500px, 80vw);
    }

    .celebration-countdown > span {
        min-width: 65px;
        font-size: 2rem;
    }
}


/* =================================================
   TABLET — LANDSCAPE
   1024px–1200px
================================================= */

@media (min-width:1024px) and (max-width:1200px) and (orientation:landscape){

    /* =========================
       HERO
    ========================= */

    .home-hero{
        width:92%;
        min-height:76vh;

        padding:60px 20px;

        gap:35px;
    }

    .hero-copy{
        width:54%;
        max-width:590px;
    }

    .home-title{
        font-size:clamp(2.8rem,5vw,4.8rem);
    }

    .home-description{
        max-width:540px;
    }


    /* =========================
       ARTIST ORBIT
    ========================= */

    .artist-orbit{
        width:340px;
        height:340px;
        flex:0 0 340px;
    }

    .ring-purple{
        width:280px;
        height:280px;
    }

    .ring-green{
        width:205px;
        height:205px;
    }

    .artist-node{
        width:105px;
        height:105px;
    }

    .tae-node{
        top:38px;
        left:4px;
    }

    .koo-node{
        right:4px;
        bottom:32px;
    }


    /* =========================
       PICTURE OF THE DAY
    ========================= */

    .featured-moment-section{
        width:90%;
    }

    .potd-image-frame{
        max-width:90vw;
    }

    .potd-image-frame img{
        max-width:90vw;
        max-height:68vh;
    }


    /* =========================
       NAVIGATOR
    ========================= */

    .navigator-section{
        width:92%;
    }

    .nav-feature{
        min-height:180px;
        padding:28px;
    }

    .celebration-section {
        padding: 80px 5vw;
    }

    .celebration-title {
        width: 75%;
        max-width: 650px;
        margin: 0 auto;
        font-size: clamp(3.2rem, 4.2vw, 4.5rem);
    }

    .celebration-message {
        max-width: 700px;
        font-size: 1.1rem;
    }

    .celebration-image-frame {
        width: min(480px, 55vw);
    }

    .celebration-countdown > span {
        min-width: 65px;
        font-size: 2rem;
    }
}



/* =================================================
   MOBILE
   768px AND BELOW
================================================= */

@media screen and (max-width:768px){

    #final-logo{
        max-width:65vw;
        max-height:35vh;
    }

    .home-hero{
        width:92%;
        min-height:auto;
        padding:50px 10px 65px;
        flex-direction:column;
        justify-content:center;
        gap:42px;
        text-align:center;
    }

    .hero-copy{
        width:100%;
        max-width:100%;
        text-align:center;
    }

    .hero-eyebrow{
        max-width:100%;
        padding:5px 12px;
        font-size:.62rem;
        letter-spacing:1.8px;
        margin-bottom:18px;
    }

    .home-title{
        font-size:clamp(2.2rem,8.5vw,3.4rem);
        line-height:1.05;
        letter-spacing:-1px;
    }

    .title-gradient{
        margin-top:5px;
    }

    .home-description{
        width:100%;
        max-width:520px;
        margin:20px auto 0;
        font-size:.92rem;
        line-height:1.6;
    }

    .hero-actions{
        width:100%;
        flex-direction:row;
        justify-content:center;
        align-items:center;
        gap:10px;
        margin-top:25px;
    }

    .universe-btn{
        width:auto;
        min-height:42px;
        padding:8px 17px;
        border-radius:24px;
        font-size:.82rem;
        letter-spacing:1px;
    }

    .artist-orbit{
        width:300px;
        height:300px;
        flex:0 0 300px;
        margin:0 auto;
    }

    .ring-purple{
        width:245px;
        height:245px;
    }

    .ring-green{
        width:180px;
        height:180px;
    }

    .artist-node{
        width:88px;
        height:88px;
    }

    .artist-node strong{
        font-size:.9rem;
        letter-spacing:1.5px;
    }

    .artist-node small{
        font-size:.65rem;
        letter-spacing:1.5px;
    }

    .node-dot{
        width:7px;
        height:7px;
        margin-bottom:7px;
    }

    .tae-node{
        top:32px;
        left:0;
    }

    .koo-node{
        right:0;
        bottom:28px;
    }

    .orbit-star{
        font-size:.9rem;
    }

    .star-a{
        top:20px;
        right:70px;
    }

    .star-b{
        left:80px;
        bottom:18px;
        font-size:.65rem;
    }

    .star-c{
        right:10px;
        top:105px;
        font-size:.65rem;
    }

    .star-d{
        left:40px;
        bottom:95px;
        font-size:.9rem;
    }

    .section-kicker{
        font-size:.65rem;
        letter-spacing:2.5px;
    }

    .home-section-title{
        font-size:clamp(1.7rem,7vw,2.5rem);
        line-height:1.08;
        margin-top:8px;
    }

    .featured-moment-section{
        width:90%;
        margin-bottom:70px;
    }

    .featured-heading{
        margin-bottom:22px;
    }

    .potd-image-frame{
        max-width:88%;
        margin:0 auto;
    }

    .potd-image-frame img{
        max-width:100%;
        max-height:52vh;
        border-radius:12px;
    }

    .potd-corner{
        width:30px;
        height:30px;
    }

    .potd-corner.tl{
        top:-3px;
        left:-3px;
        border-width:3px;
        border-top-left-radius:12px;
    }

    .potd-corner.br{
        right:-3px;
        bottom:-3px;
        border-width:3px;
        border-bottom-right-radius:12px;
    }

    .navigator-section{
        width:90%;
        margin-bottom:70px;
    }

    .navigator-heading{
        margin-bottom:24px;
    }

    .navigator-heading .home-section-title{
        margin-bottom:8px;
    }

    .navigator-heading p{
        font-size:.85rem;
    }

    .universe-nav{
        grid-template-columns:1fr;
        gap:9px;
    }

    .nav-feature{
        min-height:125px;
        padding:20px 20px;
        border-radius:15px;
    }

    .nav-number{
        top:14px;
        right:17px;
        font-size:.62rem;
    }

    .nav-icon{
        margin-bottom:8px;
        font-size:1rem;
    }

    .nav-feature h3{
        font-size:1rem;
        margin-bottom:5px;
    }

    .nav-feature p{
        font-size:.8rem;
        line-height:1.4;
        max-width:85%;
    }

    .nav-arrow{
        right:17px;
        bottom:16px;
        font-size:.9rem;
    }

    .home-closing{
        width:92%;
        margin:0 auto 70px;
        padding:65px 18px;
    }

    .closing-glow{
        width:380px;
        height:250px;
    }

    .home-closing h2{
        font-size:clamp(2rem,9vw,3.2rem);
        line-height:1.08;
        margin:13px 0;
    }

    .home-closing p{
        max-width:500px;
        margin:0 auto 25px;
        font-size:.9rem;
        line-height:1.6;
    }

    .celebration-section {
        padding: 20px 18px;
    }

    .celebration-content {
        width: 100%;
    }

    .celebration-section .section-kicker {
        margin-bottom: 14px;
        font-size: 0.72rem;
    }

    .celebration-title {
        max-width: 90%;
        font-size: clamp(1.6rem, 8.5vw, 2.5rem) !important;
        line-height: 1.1;
        letter-spacing: -1px;
    }

    .celebration-message {
        max-width: 100%;
        margin: 20px auto 28px;
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .celebration-countdown-label {
        margin: 22px 0 12px;
        font-size: 0.68rem;
        letter-spacing: 0.14em;
    }

    .celebration-countdown {
        gap: 3px;
        width: 100%;
    }

    .celebration-countdown > span {
        min-width: 42px;
        font-size: 1.35rem;
    }

    .celebration-countdown > small {
        margin: 0 2px 2px 0;
        font-size: 0.45rem;
        letter-spacing: 0.08em;
    }

    .celebration-image-frame {
        width: min(350px, 88vw);
        margin: 28px auto;
        padding: 6px;
    }

    .celebration-image-frame::before,
    .celebration-image-frame::after {
        width: 30px;
        height: 30px;
    }
}

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

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}