/* ===========================
   FONT
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');


/* ===========================
   VARIABLES
=========================== */

:root {

    --navy: #222559;
    --navy-dark: #11143d;

    --orange: #f39c03;
    --orange-light: #ffbd45;

    --white: #ffffff;
    --ivory: #faf9f6;

    --text: #161929;
}


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

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


html {
    scroll-behavior: smooth;
}


body {

    font-family: "Inter", sans-serif;

    background: var(--ivory);

    color: var(--text);

    overflow-x: hidden;
}


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

.brand-hero {

    min-height: 100vh;

    position: relative;

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

    overflow: hidden;

    background:

        radial-gradient(
            circle at 75% 35%,
            rgba(243, 156, 3, 0.10),
            transparent 30%
        ),

        radial-gradient(
            circle at 20% 70%,
            rgba(34, 37, 89, 0.08),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf9f6 48%,
            #ffffff 100%
        );

}


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

.background-pattern {

    position: absolute;

    inset: 0;

    pointer-events: none;

}


/* DOT GRID */

.dot-grid {

    position: absolute;

    width: 350px;
    height: 350px;

    right: 5%;
    top: 15%;

    opacity: 0.35;

    background-image:

        radial-gradient(
            rgba(34,37,89,0.25) 1px,
            transparent 1px
        );

    background-size: 22px 22px;

    mask-image:

        radial-gradient(
            circle,
            black,
            transparent 72%
        );

}


/* ===========================
   ORBS
=========================== */

.orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(1px);

    animation:
        orbFloat 14s ease-in-out infinite;

}


.orb-one {

    width: 420px;
    height: 420px;

    right: -120px;
    top: -140px;

    background:

        radial-gradient(
            circle at 35% 35%,
            rgba(243,156,3,.13),
            rgba(243,156,3,.02) 45%,
            transparent 70%
        );

}


.orb-two {

    width: 500px;
    height: 500px;

    left: -200px;
    bottom: -180px;

    background:

        radial-gradient(
            circle,
            rgba(34,37,89,.09),
            transparent 70%
        );

    animation-delay: -5s;

}


/* ===========================
   RINGS
=========================== */

.luxury-ring {

    position: absolute;

    border:

        1px solid
        rgba(34,37,89,0.10);

    border-radius: 50%;

}


.ring-one {

    width: 260px;
    height: 260px;

    right: 12%;
    bottom: 10%;

    animation:

        rotateRing
        35s
        linear
        infinite;

}


.ring-two {

    width: 110px;
    height: 110px;

    right: 25%;
    bottom: 24%;

    border-color:
        rgba(243,156,3,.18);

    animation:

        rotateRingReverse
        25s
        linear
        infinite;

}


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

.brand-content {

    position: relative;

    z-index: 5;

    text-align: center;

    padding: 40px 20px;

}


/* LABEL */

.brand-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    font-family: "Manrope", sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .24em;

    color: var(--orange);

    opacity: 0;

    transform:
        translateY(14px);

    animation:

        revealUp
        .8s
        forwards
        .25s;

}


.brand-label::before {

    content: "";

    width: 28px;
    height: 1px;

    background: var(--orange);

}


/* ===========================
   BUSINESS NAME
=========================== */

.brand-name-wrap {

    position: relative;

    display: inline-block;

}


.brand-name {

    position: relative;

    z-index: 2;

    font-family: "Manrope", sans-serif;

    font-size:

        clamp(
            64px,
            12vw,
            170px
        );

    font-weight: 800;

    line-height: .88;

    letter-spacing: -.075em;

    color: var(--navy);

    opacity: 0;

    transform:

        translateY(45px)
        scale(.96);

    animation:

        titleReveal
        1.2s
        cubic-bezier(.22,1,.36,1)
        forwards
        .45s;

}


/* PREMIUM GLOW UNDER TEXT */

.brand-glow {

    position: absolute;

    left: 50%;
    bottom: -5%;

    width: 62%;
    height: 35%;

    transform:
        translateX(-50%);

    background:

        radial-gradient(
            ellipse,
            rgba(243,156,3,.22),
            transparent 70%
        );

    filter: blur(25px);

    opacity: 0;

    animation:

        glowReveal
        1.5s
        ease
        forwards
        1s;

}


/* ===========================
   ACCENT LINE
=========================== */

.brand-line {

    display: flex;

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

    gap: 7px;

    margin:

        30px auto
        22px;

}


.line-start {

    width: 7px;
    height: 7px;

    border:

        2px solid
        var(--orange);

    transform:
        rotate(45deg);

    opacity: 0;

    animation:

        fadeIn
        .5s
        forwards
        1.35s;

}


.line-main {

    width: 0;
    height: 2px;

    background:

        linear-gradient(
            90deg,
            var(--orange),
            var(--orange-light)
        );

    animation:

        lineGrow
        1.1s
        cubic-bezier(.22,1,.36,1)
        forwards
        1.3s;

}


.line-dot {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--orange);

    box-shadow:

        0 0 14px
        rgba(243,156,3,.8);

    opacity: 0;

    animation:

        fadeIn
        .5s
        forwards
        1.9s;

}


/* ===========================
   TAGLINE
=========================== */

.brand-tagline {

    font-size:

        clamp(
            15px,
            1.6vw,
            20px
        );

    line-height: 1.7;

    letter-spacing: .02em;

    color: #707487;

    opacity: 0;

    transform:
        translateY(20px);

    animation:

        revealUp
        .9s
        forwards
        1.55s;

}


.brand-tagline strong {

    color: var(--navy);

    font-weight: 600;

}


/* ===========================
   ANIMATIONS
=========================== */

@keyframes titleReveal {

    0% {

        opacity: 0;

        transform:
            translateY(45px)
            scale(.96);

        filter:
            blur(8px);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);

    }

}


@keyframes revealUp {

    from {

        opacity: 0;

        transform:
            translateY(18px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes lineGrow {

    from {

        width: 0;

    }

    to {

        width: 130px;

    }

}


@keyframes fadeIn {

    to {

        opacity: 1;

    }

}


@keyframes glowReveal {

    from {

        opacity: 0;

    }

    to {

        opacity: .8;

    }

}


@keyframes orbFloat {

    0%,
    100% {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    50% {

        transform:
            translate3d(15px,-20px,0)
            scale(1.04);

    }

}


@keyframes rotateRing {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes rotateRingReverse {

    from {

        transform:
            rotate(360deg);

    }

    to {

        transform:
            rotate(0deg);

    }

}


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

@media (max-width: 768px) {

    .brand-hero {

        min-height: 85vh;

    }


    .brand-name {

        font-size:
            clamp(
                52px,
                18vw,
                95px
            );

        letter-spacing:
            -.065em;

    }


    .brand-label {

        font-size: 9px;

        letter-spacing: .18em;

    }


    .brand-tagline {

        max-width: 300px;

        margin-inline: auto;

    }


    .dot-grid {

        width: 220px;
        height: 220px;

        right: -70px;

    }


    .ring-one {

        width: 180px;
        height: 180px;

        right: -70px;

    }

}


/* ===========================
   ACCESSIBILITY
=========================== */

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

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

    }

}