/* =========================================================
   PROJECT MIMI — SURPRISE 3
   ONE LITTLE CONSTELLATION
========================================================= */

#surprise3{
    position:fixed;
    inset:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:
        radial-gradient(circle at 50% 48%,rgba(118,143,184,.11),transparent 27%),
        radial-gradient(circle at 18% 20%,rgba(225,190,115,.07),transparent 24%),
        linear-gradient(180deg,#02040b 0%,#06101f 54%,#071525 100%);
    font-family:Georgia,"Times New Roman",serif;
}

.s3-sky{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}

.s3-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(65px);
}

.s3-glow-a{
    width:260px;
    height:260px;
    left:-110px;
    top:8%;
    background:rgba(93,124,173,.10);
    animation:s3GlowA 12s ease-in-out infinite;
}

.s3-glow-b{
    width:230px;
    height:230px;
    right:-90px;
    bottom:5%;
    background:rgba(220,179,105,.075);
    animation:s3GlowB 14s ease-in-out infinite;
}

.s3-star{
    position:absolute;
    color:rgba(255,255,255,.25);
    font-size:9px;
}

.star-1{left:13%;top:16%;animation:s3Twinkle 4s infinite}
.star-2{left:28%;top:28%;animation:s3Twinkle 5s 1s infinite}
.star-3{right:17%;top:13%;animation:s3Twinkle 4.5s .5s infinite}
.star-4{right:29%;top:35%;animation:s3Twinkle 6s 1.3s infinite}
.star-5{left:8%;bottom:29%;animation:s3Twinkle 5s .8s infinite}
.star-6{left:35%;bottom:14%;animation:s3Twinkle 4.2s 1.7s infinite}
.star-7{right:12%;bottom:26%;animation:s3Twinkle 5.5s .4s infinite}
.star-8{right:35%;bottom:13%;animation:s3Twinkle 4.8s 1.1s infinite}
.star-9{left:52%;top:11%;animation:s3Twinkle 6s 2s infinite}

.s3-stage{
    position:relative;
    z-index:2;
    width:min(91vw,440px);
    height:min(89vh,700px);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.s3-header{
    position:absolute;
    top:9px;
    left:0;
    right:0;
    display:flex;
    justify-content:space-between;
    color:rgba(255,255,255,.31);
    font-size:8px;
    letter-spacing:2.7px;
}

.s3-number{
    color:#dfbf79;
}

.s3-intro{
    width:100%;
    padding:50px 10px 55px;
    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.22,.61,.36,1),
        filter .9s ease;
}

.s3-intro.hide{
    opacity:0;
    transform:scale(.97) translateY(-15px);
    filter:blur(7px);
    pointer-events:none;
}

.s3-orbit{
    position:relative;
    width:70px;
    height:70px;
    margin:0 auto 25px;
    border:1px solid rgba(223,191,121,.24);
    border-radius:50%;
}

.s3-orbit:before{
    content:"";
    position:absolute;
    inset:8px;
    border:1px dashed rgba(223,191,121,.17);
    border-radius:50%;
}

.s3-orbit span{
    position:absolute;
    width:5px;
    height:5px;
    top:-3px;
    left:50%;
    border-radius:50%;
    background:#e2c27d;
    box-shadow:0 0 14px rgba(226,194,125,.55);
}

.s3-orbit i{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#dfbf79;
    font-style:normal;
    font-size:17px;
}

.s3-kicker{
    margin:0 0 16px;
    color:#dfbf79;
    font-size:9px;
    letter-spacing:5px;
}

.s3-intro h1{
    margin:0;
    font-size:clamp(34px,9vw,47px);
    line-height:1.13;
    font-weight:500;
}

.s3-intro-copy{
    max-width:315px;
    margin:27px auto 0;
    color:rgba(255,255,255,.54);
    font-size:14px;
    line-height:1.75;
}

.s3-button{
    min-width:175px;
    height:51px;
    margin-top:29px;
    padding:0 21px;
    border:1px solid rgba(232,199,125,.36);
    border-radius:999px;
    background:rgba(255,255,255,.035);
    color:#efd59a;
    font:600 13px Georgia,"Times New Roman",serif;
    backdrop-filter:blur(13px);
    -webkit-backdrop-filter:blur(13px);
    cursor:pointer;
    transition:.25s ease;
}

.s3-button:hover{
    transform:translateY(-2px);
    background:rgba(232,199,125,.07);
    border-color:rgba(232,199,125,.55);
}

.s3-button b{
    margin-left:10px;
    font-size:15px;
    font-weight:400;
}


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

.s3-constellation{
    position:absolute;
    width:min(86vw,365px);
    height:390px;
    left:50%;
    top:49%;
    transform:translate(-50%,-50%) scale(.94);
    opacity:0;
    visibility:hidden;
    transition:
        opacity 1s ease,
        transform 1.2s cubic-bezier(.22,.61,.36,1);
}

.s3-constellation.show{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,-50%) scale(1);
}

.s3-lines{
    position:absolute;
    inset:0;
    opacity:.25;
}

.s3-lines span{
    position:absolute;
    height:1px;
    transform-origin:left center;
    background:linear-gradient(
        90deg,
        rgba(223,191,121,.03),
        rgba(223,191,121,.45),
        rgba(223,191,121,.03)
    );
}

.line-a{
    width:150px;
    left:82px;
    top:115px;
    transform:rotate(22deg);
}

.line-b{
    width:120px;
    left:205px;
    top:162px;
    transform:rotate(128deg);
}

.line-c{
    width:125px;
    left:101px;
    top:218px;
    transform:rotate(-24deg);
}

.line-d{
    width:150px;
    left:82px;
    top:218px;
    transform:rotate(-68deg);
}

.s3-node{
    position:absolute;
    width:60px;
    height:60px;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    color:#fff;
}

.s3-node span{
    position:absolute;
    left:50%;
    top:50%;
    width:9px;
    height:9px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:#dfbf79;
    box-shadow:
        0 0 0 5px rgba(223,191,121,.055),
        0 0 22px rgba(223,191,121,.42);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.s3-node:after{
    content:"";
    position:absolute;
    inset:14px;
    border:1px solid rgba(223,191,121,.16);
    border-radius:50%;
    animation:s3Pulse 3s ease-in-out infinite;
}

.s3-node small{
    position:absolute;
    left:50%;
    top:calc(50% + 17px);
    transform:translateX(-50%);
    color:rgba(255,255,255,.32);
    font-size:7px;
    letter-spacing:1px;
}

.s3-node:hover span,
.s3-node.active span{
    transform:translate(-50%,-50%) scale(1.5);
    box-shadow:
        0 0 0 7px rgba(223,191,121,.07),
        0 0 32px rgba(223,191,121,.7);
}

.s3-node.active{
    pointer-events:none;
}

.node-1{left:28px;top:72px}
.node-2{right:25px;top:97px}
.node-3{left:153px;top:12px}
.node-4{left:58px;bottom:50px}
.node-5{right:45px;bottom:29px}

.s3-center{
    position:absolute;
    left:50%;
    top:50%;
    width:92px;
    height:92px;
    transform:translate(-50%,-50%);
    border:1px solid rgba(223,191,121,.18);
    border-radius:50%;
    background:rgba(5,12,23,.45);
    box-shadow:
        0 0 50px rgba(223,191,121,.05),
        inset 0 0 30px rgba(255,255,255,.02);
}

.s3-center span{
    display:block;
    margin-top:18px;
    color:#dfbf79;
    font-size:13px;
}

.s3-center small{
    display:block;
    margin-top:5px;
    color:rgba(255,255,255,.28);
    font-size:5.5px;
    letter-spacing:1.5px;
    line-height:1.35;
}


/* =========================================================
   REVEAL CARD
========================================================= */

.s3-reveal{
    position:absolute;
    left:50%;
    top:51%;
    width:min(82vw,335px);
    transform:translate(-50%,-50%) scale(.95);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .7s ease,
        transform .8s cubic-bezier(.22,.61,.36,1);
}

.s3-reveal.show{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,-50%) scale(1);
}

.s3-reveal-card{
    position:relative;
    min-height:225px;
    padding:48px 27px 37px;
    box-sizing:border-box;
    border:1px solid rgba(223,191,121,.18);
    background:
        linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),
        rgba(5,13,25,.76);
    box-shadow:
        0 35px 90px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.s3-reveal-card:before{
    content:"";
    position:absolute;
    inset:9px;
    border:1px solid rgba(223,191,121,.055);
}

.s3-reveal-top{
    position:absolute;
    top:22px;
    left:27px;
    right:27px;
    display:flex;
    justify-content:space-between;
    color:rgba(255,255,255,.3);
    font-size:8px;
    letter-spacing:2px;
}

.s3-reveal-top span{
    color:#dfbf79;
}

.s3-reveal-top i{
    color:#dfbf79;
    font-style:normal;
}

.s3-reveal-text{
    position:relative;
    z-index:1;
    margin:0;
    color:#f4eee3;
    font-size:18px;
    line-height:1.65;
}

.s3-reveal-bottom{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:25px;
}

.s3-reveal-bottom span{
    flex:1;
    height:1px;
    background:rgba(223,191,121,.18);
}

.s3-reveal-bottom i{
    color:#dfbf79;
    font-size:8px;
    font-style:normal;
}


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

.s3-final{
    position:absolute;
    width:100%;
    padding:20px;
    box-sizing:border-box;
    opacity:0;
    visibility:hidden;
    transform:translateY(18px);
    filter:blur(5px);
    transition:
        opacity 1s ease,
        transform 1.1s cubic-bezier(.22,.61,.36,1),
        filter 1s ease;
}

.s3-final.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    filter:blur(0);
}

.s3-final-kicker{
    margin:0 0 18px;
    color:#dfbf79;
    font-size:8px;
    letter-spacing:4px;
}

.s3-final h2{
    margin:0;
    font-size:clamp(29px,8vw,41px);
    line-height:1.2;
    font-weight:500;
}

.s3-final-mark{
    margin:22px 0;
    color:#dfbf79;
    font-size:15px;
}

.s3-final p:not(.s3-final-kicker){
    max-width:315px;
    margin:0 auto;
    color:rgba(255,255,255,.52);
    font-size:14px;
    line-height:1.75;
}

.s3-final-button{
    margin-top:28px;
}

.s3-footer{
    position:absolute;
    bottom:9px;
    left:0;
    right:0;
    color:rgba(255,255,255,.22);
    font-size:8px;
    letter-spacing:1.5px;
}

@keyframes s3Twinkle{
    50%{opacity:.75;transform:scale(1.35)}
}

@keyframes s3Pulse{
    50%{transform:scale(1.2);opacity:.45}
}

@keyframes s3GlowA{
    50%{transform:translate(35px,20px) scale(1.1)}
}

@keyframes s3GlowB{
    50%{transform:translate(-25px,-25px) scale(.92)}
}

@media(max-width:420px){
    .s3-stage{height:88vh}
    .s3-intro{padding-top:42px}
    .s3-intro h1{font-size:35px}
    .s3-intro-copy{font-size:13px}
    .s3-constellation{
        width:88vw;
        height:365px;
    }
    .s3-reveal-text{
        font-size:17px;
    }
}