/* =====================================================
   DRO-FREE HERO HEADER
   Orbit Design System v1.0
===================================================== */

#heroHeader{
    position:relative;

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

    min-height:150px;

    padding:18px 24px 16px;

    overflow:hidden;

     background:

        radial-gradient(
            ellipse 1200px 380px
            at 50% -30%,

            rgba(79,124,255,.16),

            rgba(30,40,70,.08) 40%,

            transparent 75%
        ),

        linear-gradient(
            180deg,

            #1a1e29 0%,

            #161a23 55%,

            #13161d 100%
        );
}


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

/* #heroHeader::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-1px;

    height:90px;

    pointer-events:none;

    background:

        linear-gradient(

            180deg,

            transparent,

            rgba(18,22,28,.65),

            rgba(14,16,20,1)
        );
} */

/* Hero atmosphere */
#heroHeader{
    position:relative;
    overflow:hidden;
}

#heroHeader::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-20px;

    transform:translateX(-50%);

    width:900px;
    height:120px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(79,124,255,.14) 0%,
            rgba(79,124,255,.08) 30%,
            rgba(79,124,255,.02) 60%,
            transparent 100%
        );

    filter:blur(35px);

    pointer-events:none;
}

/* #heroHeader::before{

    content:"";

    position:absolute;

    inset:-120px;

    background:

    radial-gradient(circle at 20% 20%,
        rgba(79,124,255,.05),
        transparent 35%),

    radial-gradient(circle at 80% 10%,
        rgba(79,124,255,.05),
        transparent 40%),

    radial-gradient(circle at 50% 100%,
        rgba(79,124,255,.08),
        transparent 40%);

    pointer-events:none;
} */


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

#heroLogo{

    position:relative;

    z-index:5;

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

    margin-top:6px;

}


#heroLogo img,

.drofree-hero-logo,

.drofree-master-logo{

    width:340px;

    max-width:92vw;

    height:auto;

    display:block;

    user-select:none;

    filter:

        brightness(1.45)

        contrast(1.18)

        saturate(1.05)

        drop-shadow(0 0 8px rgba(79,124,255,.25))

        drop-shadow(0 0 26px rgba(79,124,255,.18));

}


/* =====================================================
   HTML TAGLINE
   (SVG already contains tagline)
===================================================== */

/* Restore HTML tagline + divider */

#heroTagline {
    display: block;

    margin-top: 18px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;

    color: rgba(210,232,255,.92);

    text-shadow:
        0 0 8px rgba(79,124,255,.55),
        0 0 18px rgba(79,124,255,.28);
}

#orbitDivider {
    display: block;

    width: min(520px, 70vw);
    height: 1px;

    margin-top: 14px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(79,124,255,.12),
        rgba(79,124,255,.68),
        rgba(255,255,255,.38),
        rgba(79,124,255,.68),
        rgba(79,124,255,.12),
        transparent
    );

    box-shadow:
        0 0 14px rgba(79,124,255,.35);
}

/* Hide divider only after project loaded */
body.project-loaded #orbitDivider {
    display: none;
}

/* Keep tagline small in work mode */
body.project-loaded #heroTagline {
    display: none;
}


/* =====================================================
   ORBIT DIVIDER
===================================================== */

/* #orbitDivider{

    width:420px;

    max-width:70vw;

    height:1px;

    margin-top:12px;

    border-radius:999px;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(79,124,255,.12),

        rgba(79,124,255,.55),

        rgba(79,124,255,.12),

        transparent

    );

    box-shadow:

        0 0 16px rgba(79,124,255,.25);

} */


/* =====================================================
   PROJECT STATUS
===================================================== */

#currentProjectName{

    position:absolute;

    right:22px;

    top:18px;

    z-index:20;

    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 16px;

    border-radius:15px;

    background:

        rgba(255,255,255,.07);

    border:

        1px solid rgba(255,255,255,.10);

    color:

        rgba(255,255,255,.92);

    font-size:13px;

    font-weight:700;

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    box-shadow:

        0 12px 30px rgba(0,0,0,.35);

    transition:.25s;
}


#currentProjectName:hover{

    border-color:

        rgba(79,124,255,.45);

    box-shadow:

        0 0 18px rgba(79,124,255,.20);

}


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

@media(max-width:900px){

#heroHeader{

    min-height:145px;

    padding:14px;

}

#heroLogo img{

    width:240px;

}

#orbitDivider{

    width:260px;

}

#currentProjectName{

    position:relative;

    top:auto;
    right:auto;

    margin-top:10px;

}

}

/* =========================
   DRO-FREE CSS HERO LOGO
========================= */

.dro-css-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.dro-css-logo span {
    display: inline-block;
}

.dro-word-left,
.dro-word-right {
    font-size: 54px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -3px;

    color: #05080d;

    -webkit-text-stroke: 1.4px rgba(135,195,255,.9);

    text-shadow:
        0 0 8px rgba(79,124,255,.65),
        0 0 18px rgba(79,124,255,.38),
        0 0 32px rgba(79,124,255,.18);
        animation:heroWordGlow 8s ease-in-out infinite;

        @keyframes heroWordGlow{

    0%,100%{

        text-shadow:

            0 0 8px rgba(79,124,255,.55),

            0 0 18px rgba(79,124,255,.30);

    }

    50%{

        text-shadow:

            0 0 10px rgba(79,124,255,.75),

            0 0 26px rgba(79,124,255,.45);

    }

}
}

.dro-logo-orbit-css {
    position: relative;

    width: 72px;
    height: 58px;

    margin: 0 -2px;

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

.dro-logo-core-css {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 10px;
    height: 10px;

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

    border-radius: 50%;
    background: white;

    box-shadow:
        0 0 8px rgba(255,255,255,.9),
        0 0 18px rgba(79,124,255,.6);
}

.dro-logo-ring-main,
.dro-logo-ring-back {
    position: absolute;
    left: 50%;
    top: 50%;

    border-radius: 50%;

    transform-origin: center;
}

.dro-logo-ring-main {
    width: 58px;
    height: 38px;

    transform: translate(-50%, -50%) rotate(-62deg);

    border: 3px solid rgba(210,235,255,.95);

    box-shadow:
        0 0 8px rgba(255,255,255,.45),
        0 0 18px rgba(79,124,255,.75),
        inset 0 0 8px rgba(79,124,255,.28);
}

.dro-logo-ring-back {
    width: 80px;
    height: 30px;

    transform: translate(-50%, -50%) rotate(-24deg);

    border: 1.5px solid rgba(0,112,255,.55);

    box-shadow:
        0 0 12px rgba(0,112,255,.45);
}

.dro-logo-satellite {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        radial-gradient(circle at 35% 25%,
            #dfffff,
            #20cfff 38%,
            #005dff 100%);

    box-shadow:
        0 0 6px rgba(79,124,255,.95),
        0 0 14px rgba(79,124,255,.55),
        0 0 24px rgba(79,124,255,.25);

    transform-origin: 0 0;

    animation: heroSatelliteLockedOrbit 7.8s linear infinite;
}

/* ==========================
   HERO COMPACT MODE
========================== */

body.project-loaded #heroHeader{

    min-height:90px;

    padding:8px 20px;

    transition:.35s ease;
}

body.project-loaded .dro-css-logo{

    transform:scale(.62);

    transition:.35s ease;
}

body.project-loaded #orbitDivider{

    opacity:0;

    transform:scaleX(.6);
}

body.project-loaded #currentProjectName{

    top:12px;
}

/* HERO EMPTY MODE SIZE */
body:not(.project-loaded) #heroHeader {
    min-height: 180px;
}

body:not(.project-loaded) .dro-css-logo {
    transform: scale(1.35);
}

/* COMPACT WORK MODE */
body.project-loaded #heroHeader {
    min-height: 76px;
    padding: 6px 20px;
}

body.project-loaded .dro-css-logo {
    transform: scale(.58);
}

body.project-loaded #orbitDivider {
    display: none;
}

/* SOFT ORBITAL ATMOSPHERE - FIX */

body {
    background:
        linear-gradient(180deg,
            #151923 0%,
            #101319 32%,
            #0d0f12 100%
        ) !important;
}

#heroHeader {
    background:
        radial-gradient(ellipse at 50% 0%,
            rgba(45,95,190,.16),
            rgba(20,24,34,.92) 48%,
            #14161a 100%
        ) !important;
}

#heroHeader::after {
    display: none !important;
}



#navButtons {

    background:
        rgba(18,22,32,.72);

    backdrop-filter:blur(20px);

    border:1px solid rgba(79,124,255,.18);

    box-shadow:

    0 24px 55px rgba(0,0,0,.42),

    0 10px 22px rgba(35,70,180,.12),

    inset 0 1px 0 rgba(255,255,255,.05);

    
}



/* .workspace{

    background:

        radial-gradient(
            ellipse at top,
            rgba(22,38,72,.18),
            rgba(16,18,26,.92) 42%,
            #0c0e12 100%
        );

} */

/* .workspace::before {
    display: none !important;
} */

/*.workspace::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.22;

    background:

        radial-gradient(

            ellipse 900px 500px

            at 50% -80px,

            rgba(79,124,255,.08),

            transparent 72%
        );
} */



#heroFeatureStrip {
    display: flex;
    gap: 56px;
    margin-top: 18px;
    z-index: 5;
}

.heroFeature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(230,240,255,.9);
}

.heroFeature span {
    font-size: 22px;
    color: #4f9cff;
    text-shadow: 0 0 14px rgba(79,156,255,.65);
}

.heroFeature strong {
    display: block;
    font-size: 13px;
}

.heroFeature small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: rgba(210,225,245,.65);
}

/* Hide after file/project opened */
body.project-loaded #heroFeatureStrip {
    display: none;
}

body:not(.project-loaded) #heroHeader {
    min-height: 230px !important;
}

/* =========================
   HERO ORBIT ANIMATION V6
   Satellite locked to white core
========================= */

.dro-logo-ring-main {
    animation: heroMainRingCalm 36s linear infinite;
}

.dro-logo-ring-back {
    animation: heroBackRingCalm 52s linear infinite reverse;
}

.dro-logo-satellite {
    width: 9px;
    height: 9px;

    left: 50%;
    top: 50%;

    transform-origin: 0 0;

    animation: heroSatelliteLockedOrbit 7.8s linear infinite;
}

.dro-logo-core-css {
    animation: heroCoreSoftPulse 5.8s ease-in-out infinite;
}

@keyframes heroMainRingCalm {
    from {
        transform: translate(-50%, -50%) rotate(-62deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(298deg);
    }
}

@keyframes heroBackRingCalm {
    from {
        transform: translate(-50%, -50%) rotate(-24deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(336deg);
    }
}

@keyframes heroSatelliteLockedOrbit {
    from {
        transform:
            rotate(-62deg)
            rotate(0deg)
            translateX(27px)
            translateY(-4px)
            rotate(62deg);
    }

    to {
        transform:
            rotate(-62deg)
            rotate(360deg)
            translateX(27px)
            translateY(-4px)
            rotate(-298deg);
    }
}

@keyframes heroCoreSoftPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .92;
    }

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