header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 110px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    z-index: 999;
}

    header::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 1px;
        background: var(--text);
        animation: borderCenterOut 1.2s ease-in-out forwards;
        animation-delay: 0.3s;
    }

@keyframes borderCenterOut {
    from {
        width: 0;
        left: 50%;
    }

    to {
        width: 100%;
        left: 0;
    }
}


.brand {
    display: flex;
    align-items: center; 
    gap: 0px;
    margin-left: -3px;
    padding: 5px 0;
}

.diamond-logo {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 3px; 
    align-self: center; 
    transform: translateY(-3.2px);
}

    .diamond-logo svg {
        width: 100%;
        height: auto;
        display: block;
    }

        .diamond-logo svg g path {
            stroke-dasharray: 300;
            stroke-dashoffset: 300;
            animation: drawDiamond 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            pointer-events: none;
        }





@keyframes drawDiamond {
    to {
        stroke-dashoffset: 0;
    }
}


.brand-name {
    line-height: 0.65;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 15px;
    border-left: 3px solid var(--neon);
    font-family: var(--font-heading);
    opacity: 0;
    animation: fadeInLogo 1.4s ease forwards 0.8s; 
    white-space: nowrap;
}


.line-top {
    font-size: 1.5rem;
    letter-spacing: 0.315em;
    color: #e0e0e0;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 0.85;
    margin-bottom: 3px;
    text-indent: 0.135em;
}

.line-bottom {
    font-size: 2.8rem;
    letter-spacing: 0.03em;
    color: #ffffff;
    font-weight: 950;
    text-transform: uppercase;
    line-height: 0.85;
    display: block;
}

@keyframes fadeInLogo {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }

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

nav {
    display: flex;
    gap: 12px; 
    align-items: center;
    height: 100%; 
    padding-right: 30px;
}

.nav-item {
    position: relative;
    text-decoration: none;
    color: #ffffff; 
    font-family: var(--font-main);
    font-size: 1rem; 
    font-weight: 700; 
    letter-spacing: 0.12em;
    padding: 12px 24px; 
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    z-index: 1;
    border-left: 2px solid var(--neon);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02); 
    opacity: 0; 
    transform: translateY(20px); 
    animation: navAppear 0.8s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

    .nav-item:nth-child(1) {
        animation-delay: 0.8s;
    }

    .nav-item:nth-child(2) {
        animation-delay: 0.9s;
    }

    .nav-item:nth-child(3) {
        animation-delay: 1.0s;
    }

    .nav-item:nth-child(4) {
        animation-delay: 1.1s;
    }

    .nav-item:nth-child(5) {
        animation-delay: 1.2s;
    }

    .nav-item:nth-child(6) {
        animation-delay: 1.3s;
    }
    .nav-item:nth-child(7) {
        animation-delay: 1.4s;
    }

@keyframes navAppear {
    0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

    .nav-item span {
        position: relative;
        z-index: 5;
        pointer-events: none;
    }

    
    .nav-item .liquid {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--neon);
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        z-index: 1;
        filter: url('#goo');
    }

   
    .nav-item:hover {
        color: #000;
        border-color: var(--neon); 
    }

        .nav-item:hover .liquid {
            top: 0;
        }
    
.diamond-pulse-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 30;
}

.pulse-dot {
    
    offset-path: path('M15 40 L50 95 L85 40 L70 20 L30 20 L15 40 L50 95 L30 20 L70 20 L50 95 L85 40 L15 40 Z');
    filter: drop-shadow(0 0 3px var(--neon));
    animation: moveSmooth 18s linear infinite, glowPulse 2s ease-in-out infinite;
    animation-delay: 4s;
    opacity: 0;
}

@keyframes moveSmooth {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    97% {
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

@keyframes glowPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px var(--neon));
    }

    50% {
        transform: scale(1.25);
        filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px var(--neon));
    }
}

#pulse-path {
    stroke: transparent;
}



#h-rfc-diamond-svg.is-sending-diamond g path {
    stroke-dashoffset: 0 !important;
    transition: all 0.3s ease;
    animation: facetPower 0.8s ease-in-out infinite !important;
}

@keyframes facetPower {
    0%, 100% {
        stroke: var(--neon);
        stroke-width: 1.4;
        filter: drop-shadow(0 0 2px var(--neon));
        opacity: 0.3;
    }

    50% {
        stroke: #ffffff;
        stroke-width: 3.5; 
        filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px var(--neon)) drop-shadow(0 0 30px var(--neon));
        opacity: 1;
    }
}

#h-rfc-diamond-svg.is-sending-diamond path:nth-child(4n+1) {
    animation-delay: 0.0s !important;
}

#h-rfc-diamond-svg.is-sending-diamond path:nth-child(4n+2) {
    animation-delay: 0.2s !important;
}

#h-rfc-diamond-svg.is-sending-diamond path:nth-child(4n+3) {
    animation-delay: 0.4s !important;
}

#h-rfc-diamond-svg.is-sending-diamond path:nth-child(4n+4) {
    animation-delay: 0.6s !important;
}


#h-rfc-diamond-svg g path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    stroke-dashoffset: var(--dash-offset, 300);
    transition: stroke-dashoffset 0.3s ease;
}


#h-rfc-diamond-svg:not(.is-finished) g path {
    animation: drawDiamond 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.f-sparkle {
    fill: var(--facet);
    fill-opacity: 0;
    transition: fill-opacity 0.25s ease;
}


.brand-link:hover .diamond-logo {
    filter: drop-shadow(0 0 12px var(--neon));
    transition: filter 0.5s ease;
}



.brand:hover .diamond-logo {
    filter: drop-shadow(0 0 12px var(--neon));
    transition: filter 0.5s ease;
}


.f-sparkle {
    fill: var(--facet) !important;
    fill-opacity: 0;
    stroke: transparent !important; 
    stroke-width: 0 !important;
    transition: fill-opacity 0.1s ease;
}

#h-rfc-diamond-svg.is-finished g path {
    stroke-dashoffset: 0 !important;
}



.nav-item.active {
    color: #000 !important;
    border-color: var(--neon) !important;
    background: transparent !important;
}

    
    .nav-item.active .liquid {
        top: 0 !important;
        opacity: 1 !important;
    }

    
    .nav-item.active span {
        position: relative;
    }



.rfc-page-header {
    margin-bottom: 40px;
    padding-top: 20px;
    animation: headerSlideIn 0.8s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

.header-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-family: var(--font-main);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #666; 
    margin-bottom: 10px;
}

    .header-context .separator {
        
        color: var(--neon);
        opacity: 0.7;
    }

/* Sister site: quiet metadata-level link over to the paid tools */
.rfc-studio-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 0;
    color: #5c5c5c;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: color 0.35s ease, border-color 0.35s ease;
}

    .rfc-studio-link:hover {
        color: var(--neon);
        border-bottom-color: color-mix(in srgb, var(--neon), transparent 55%);
    }

    .rfc-studio-brand {
        color: #8a8a8a;
        font-weight: 600;
        transition: color 0.35s ease;
    }

    .rfc-studio-link:hover .rfc-studio-brand {
        color: var(--neon);
    }

    .rfc-studio-dot {
        color: var(--neon);
        opacity: 0.45;
    }

    .rfc-studio-arrow {
        font-size: 0.75rem;
        line-height: 1;
        transform: translateY(-1px);
    }

@media screen and (max-width: 720px) {
    /* Own line instead of squeezing in behind the breadcrumb */
    .rfc-studio-link {
        margin-left: 0;
        flex-basis: 100%;
        letter-spacing: 0.15em;
    }
}

.header-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 300;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

    .header-title .neon-text {
        
        color: var(--neon);
        font-weight: 900;
        text-shadow: 0 0 25px color-mix(in srgb, var(--neon), transparent 70%);
    }

.header-line {
    width: 80px;
    height: 4px;
    background: var(--neon);
    margin-top: 15px;
    border-radius: 0;
    box-shadow: 0 0 15px color-mix(in srgb, var(--neon), transparent 50%);
}


.rfc-page-header .subtitle {
    margin-top: 25px;
    max-width: 800px;
    color: #a0a0a0; 
    line-height: 1.6;
    font-size: 1.1rem;
}

@keyframes headerSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-30px);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}


#h-rfc-diamond-svg.hyper-mode {
    
    animation: hyperRotate 8.4s cubic-bezier(0.1, 1, 0.15, 1) forwards;
    filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 40px var(--neon)) brightness(1.5);
}


@keyframes hyperRotate {
    0% {
        transform: perspective(600px) rotateY(0deg);
    }
    100% {
        transform: perspective(600px) rotateY(5400deg); 
    }
}



#h-rfc-diamond-svg.nav-warp-active {
    
    animation: navShock 0.15s ease-in-out infinite, navNeonImpulse 0.4s cubic-bezier(0.15, 1, 0.2, 1) forwards;
}


#h-rfc-diamond-svg.nav-warp-active path {
    stroke-dasharray: 300 !important;
    animation: lineWarpNeon 0.4s cubic-bezier(0.15, 1, 0.2, 1) forwards;
}


@keyframes navShock {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(1px, -1px); }
    60% { transform: translate(-1px, -2px); }
    80% { transform: translate(2px, 2px); }
    100% { transform: translate(0, 0); }
}


@keyframes lineWarpNeon {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 300;
        stroke: var(--neon) !important;
    }
    100% {
        stroke-dashoffset: 600;
    }
}

#h-rfc-diamond-svg {
    will-change: transform;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}