/* =========================================
   SPLASH RESET
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    font-family: Arial, sans-serif;
    background: #050816;
    color: white;
}


/* =========================================
   MAIN SCREEN
========================================= */

.splash-screen {
    position: relative;

    width: 100%;
    height: 100vh;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(34, 211, 238, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 30% 70%,
            rgba(124, 58, 237, .10),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #030511,
            #07111f,
            #050816
        );
}


/* =========================================
   BACKGROUND ENERGY
========================================= */

.splash-background {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.energy-dot {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #67e8f9;

    box-shadow:
        0 0 10px rgba(103, 232, 249, .8),
        0 0 25px rgba(103, 232, 249, .35);

    opacity: 0;

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

.dot-1 {
    left: 12%;
    top: 24%;
    animation-delay: .1s;
}

.dot-2 {
    right: 14%;
    top: 20%;
    animation-delay: .5s;
}

.dot-3 {
    left: 20%;
    bottom: 23%;
    animation-delay: .9s;
}

.dot-4 {
    right: 20%;
    bottom: 20%;
    animation-delay: 1.3s;
}

.dot-5 {
    left: 8%;
    top: 55%;
    animation-delay: 1.7s;
}

.dot-6 {
    right: 8%;
    top: 58%;
    animation-delay: 2.1s;
}

@keyframes dotFloat {

    0%,
    100% {
        opacity: .15;
        transform:
            translateY(10px)
            scale(.8);
    }

    50% {
        opacity: .8;
        transform:
            translateY(-18px)
            scale(1.15);
    }
}


/* =========================================
   LOGO STAGE
========================================= */

.logo-stage {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    z-index: 2;
}


/* =========================================
   LOGO BUILD AREA
========================================= */

.logo-build {
    position: relative;

    width: 220px;
    height: 220px;

    margin-bottom: 28px;
}

/* =========================================
   FINAL HABITQUEST LOGO
   OPTION 4 — INTEGRATED HQ
========================================= */

.logo-build {
    position: relative;

    width: 220px;
    height: 220px;

    margin-bottom: 28px;
}


/* =========================================
   PERFECT SEGMENTED HEXAGON
========================================= */

.hex-piece {
    position: absolute;

    height: 9px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #22d3ee,
            #6366f1,
            #a855f7
        );

    box-shadow:
        0 0 12px rgba(34,211,238,.45),
        0 0 25px rgba(124,58,237,.25);

    opacity: 0;

    will-change:
        transform,
        opacity;
}


/* TOP */

.hex-top {
    width: 82px;

    left: 69px;
    top: 20px;

    transform:
        translateY(-150px)
        scaleX(.3);

    animation:
        hexTopIn
        .75s
        cubic-bezier(.2,.9,.2,1)
        .20s
        forwards;
}


@keyframes hexTopIn {

    to {
        opacity: 1;

        transform:
            translateY(0)
            scaleX(1);
    }
}


/* UPPER RIGHT */

.hex-upper-right {
    width: 88px;

    right: 8px;
    top: 53px;

    transform-origin:
        center;

    transform:
        translate(160px,-100px)
        rotate(60deg);

    animation:
        hexUpperRightIn
        .8s
        cubic-bezier(.2,.9,.2,1)
        .32s
        forwards;
}


@keyframes hexUpperRightIn {

    to {
        opacity: 1;

        transform:
            translate(0,0)
            rotate(60deg);
    }
}


/* LOWER RIGHT */

.hex-lower-right {
    width: 88px;

    right: 8px;
    bottom: 53px;

    transform:
        translate(160px,100px)
        rotate(-60deg);

    animation:
        hexLowerRightIn
        .8s
        cubic-bezier(.2,.9,.2,1)
        .44s
        forwards;
}


@keyframes hexLowerRightIn {

    to {
        opacity: 1;

        transform:
            translate(0,0)
            rotate(-60deg);
    }
}


/* BOTTOM */

.hex-bottom {
    width: 82px;

    left: 69px;
    bottom: 20px;

    transform:
        translateY(150px)
        scaleX(.3);

    animation:
        hexBottomIn
        .75s
        cubic-bezier(.2,.9,.2,1)
        .56s
        forwards;
}


@keyframes hexBottomIn {

    to {
        opacity: 1;

        transform:
            translateY(0)
            scaleX(1);
    }
}


/* LOWER LEFT */

.hex-lower-left {
    width: 88px;

    left: 8px;
    bottom: 53px;

    transform:
        translate(-160px,100px)
        rotate(60deg);

    animation:
        hexLowerLeftIn
        .8s
        cubic-bezier(.2,.9,.2,1)
        .68s
        forwards;
}


@keyframes hexLowerLeftIn {

    to {
        opacity: 1;

        transform:
            translate(0,0)
            rotate(60deg);
    }
}


/* UPPER LEFT */

.hex-upper-left {
    width: 88px;

    left: 8px;
    top: 53px;

    transform:
        translate(-160px,-100px)
        rotate(-60deg);

    animation:
        hexUpperLeftIn
        .8s
        cubic-bezier(.2,.9,.2,1)
        .80s
        forwards;
}


@keyframes hexUpperLeftIn {

    to {
        opacity: 1;

        transform:
            translate(0,0)
            rotate(-60deg);
    }
}
/* =========================================
   HABITQUEST HQ MONOGRAM
========================================= */

.hq-final {
    position: absolute;
    z-index: 5;
    opacity: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #67e8f9,
            #22d3ee,
            #6366f1
        );

    box-shadow:
        0 0 14px
        rgba(34,211,238,.38);
}


/* =========================================
   H LEFT STEM
========================================= */

.hq-h-left {
    width: 12px;
    height: 82px;

    left: 61px;
    top: 69px;

    transform:
        translateX(-120px);

    animation:
        hFinalLeftIn
        .6s ease-out
        1.05s forwards;
}

@keyframes hFinalLeftIn {

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================
   H MIDDLE BAR
========================================= */

.hq-h-cross {
    width: 58px;
    height: 12px;

    left: 62px;
    top: 104px;

    transform-origin:
        left center;

    transform:
        scaleX(0);

    animation:
        hFinalCrossIn
        .5s ease-out
        1.28s forwards;
}

@keyframes hFinalCrossIn {

    to {
        opacity: 1;
        transform: scaleX(1);
    }

}


/* =========================================
   Q CURVED BODY
========================================= */

.hq-q-body {
    position: absolute;

    width: 82px;
    height: 88px;

    left: 99px;
    top: 65px;

    z-index: 4;

    opacity: 0;

    border:
        12px solid #8b5cf6;

    border-radius:
        50%;

    background:
        transparent;

    box-shadow:
        0 0 16px
        rgba(139,92,246,.35);

    /*
       Left-middle portion visually opens
       so H bar can connect into Q curve.
    */

    -webkit-mask:
        linear-gradient(#000 0 0)
        top / 100% 44% no-repeat,

        linear-gradient(#000 0 0)
        bottom / 100% 44% no-repeat,

        linear-gradient(#000 0 0)
        right / 72% 100% no-repeat;

    mask:
        linear-gradient(#000 0 0)
        top / 100% 44% no-repeat,

        linear-gradient(#000 0 0)
        bottom / 100% 44% no-repeat,

        linear-gradient(#000 0 0)
        right / 72% 100% no-repeat;

    transform:
        translateX(110px)
        rotate(-18deg)
        scale(.35);

    transform-origin:
        center;

    animation:
        qFinalBodyIn
        .75s
        cubic-bezier(.2,.8,.2,1)
        1.48s forwards;
}

@keyframes qFinalBodyIn {

    to {
        opacity: 1;

        transform:
            translateX(0)
            rotate(0deg)
            scale(1);
    }

}


/* =========================================
   Q TAIL
========================================= */

.hq-q-tail {
    position: absolute;

    width: 34px;
    height: 11px;

    left: 151px;
    top: 139px;

    z-index: 6;

    opacity: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #8b5cf6,
            #c084fc
        );

    box-shadow:
        0 0 13px
        rgba(192,132,252,.42);

    transform:
        translate(80px,60px)
        rotate(46deg);

    animation:
        qFinalTailIn
        .5s ease-out
        1.85s forwards;
}

@keyframes qFinalTailIn {

    to {
        opacity: 1;

        transform:
            translate(0,0)
            rotate(46deg);
    }

}
/* =========================================
   CORE ENERGY PULSE
========================================= */

.logo-core-glow {
    position: absolute;

    width: 80px;
    height: 80px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.6),
            rgba(34,211,238,.25) 25%,
            rgba(124,58,237,.15) 50%,
            transparent 70%
        );

    filter:
        blur(10px);

    opacity: 0;

    animation:
        corePulse .8s
        ease-out
        2s forwards;
}

@keyframes corePulse {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.3);
    }

    45% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.4);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(2);
    }
}


/* =========================================
   BRAND TEXT
========================================= */

.brand-reveal {
    text-align: center;
}

.brand-name {
    display: flex;

    justify-content: center;
    gap: 3px;

    font-size: 34px;
    letter-spacing: 4px;

    margin: 0;
}

.brand-name span {
    display: inline-block;

    opacity: 0;

    transform:
        translateY(22px)
        scale(.7);

    color: white;

    text-shadow:
        0 0 14px rgba(103,232,249,.25);

    animation:
        brandLetterIn .4s
        ease-out forwards;
}

.brand-name span:nth-child(1) {
    animation-delay: 2.15s;
}

.brand-name span:nth-child(2) {
    animation-delay: 2.22s;
}

.brand-name span:nth-child(3) {
    animation-delay: 2.29s;
}

.brand-name span:nth-child(4) {
    animation-delay: 2.36s;
}

.brand-name span:nth-child(5) {
    animation-delay: 2.43s;
}

.brand-name span:nth-child(6) {
    animation-delay: 2.50s;
}

.brand-name span:nth-child(7) {
    animation-delay: 2.57s;
}

.brand-name span:nth-child(8) {
    animation-delay: 2.64s;
}

.brand-name span:nth-child(9) {
    animation-delay: 2.71s;
}

.brand-name span:nth-child(10) {
    animation-delay: 2.78s;
}

@keyframes brandLetterIn {

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================
   SLOGAN
========================================= */

.brand-slogan {
    margin-top: 14px;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.4px;

    color: #91a8ad;

    opacity: 0;

    transform:
        translateY(10px);

    animation:
        sloganIn .6s
        ease-out
        2.95s forwards;
}

.slogan-plus,
.slogan-arrow {
    color: #67e8f9;
}

@keyframes sloganIn {

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================
   LOADING FOOTER
========================================= */

.splash-footer {
    position: absolute;

    left: 50%;
    bottom: 34px;

    transform:
        translateX(-50%);

    width: 260px;

    text-align: center;
}

.loading-track {
    width: 100%;
    height: 4px;

    overflow: hidden;

    border-radius: 20px;

    background:
        rgba(255,255,255,.08);
}

.loading-fill {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #22d3ee,
            #7c3aed
        );

    box-shadow:
        0 0 10px rgba(34,211,238,.4);

    animation:
        loadingProgress
        3.3s linear forwards;
}

@keyframes loadingProgress {

    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.splash-footer small {
    display: block;

    margin-top: 10px;

    color: #6f858c;

    font-size: 10px;

    letter-spacing: .8px;
}


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

@media (max-width: 600px) {

    .logo-build {
        transform:
            scale(.82);

        margin-bottom:
            10px;
    }

    .brand-name {
        font-size:
            27px;

        letter-spacing:
            2px;
    }

    .brand-slogan {
        max-width:
            300px;

        margin-left:
            auto;

        margin-right:
            auto;

        font-size:
            9px;
    }

    .splash-footer {
        width:
            220px;
    }

}
/* =========================================
   SPLASH EXIT
========================================= */

.splash-screen {
    transition:
        opacity .45s ease,
        transform .45s ease,
        filter .45s ease;
}

.splash-screen.splash-exit {
    opacity: 0;

    transform:
        scale(1.04);

    filter:
        blur(8px);

    pointer-events: none;
}
html {
    scroll-behavior: smooth;
}

#features,
#how-it-works,
#explore,
#faq {
    scroll-margin-top: 100px;
}