/* DevAveb Logo - Vitruvian Man Sacred Geometry */

.hero-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -50px;
    margin-bottom: var(--space-2); margin-left: auto; margin-right: auto;
    height: 320px;
    width: 100%;
}

/* Sacred geometry circles */
.logo-circle-outer {
    position: absolute;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 50%;
}

.logo-circle-inner {
    position: absolute;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 50%;
}

/* Square rotated 45deg */
.logo-square {
    position: absolute;
    width: 195px;
    height: 195px;
    border: 1px solid rgba(59, 130, 246, 0.15);
    transform: rotate(45deg);
}

/* VITRUVIAN MAN - Pure SVG */
.vitruvian-man {
    position: absolute;
    width: 240px;
    height: 240px;
    z-index: 4;
    animation: vitruvian-breathe 4s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
}

.vitruvian-man img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes vitruvian-breathe {
    0%, 100% { 
        transform: scale(1); 
        filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
    }
    50% { 
        transform: scale(1.02); 
        filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.7));
    }
}

/* Good vibes spreading */
.logo-wave {
    position: absolute;
    border-radius: 50%;
    border: 0.5px solid rgba(59, 130, 246, 0.2);
    animation: wave-spread 4s ease-out infinite;
    opacity: 0;
}

.logo-wave-1 { width: 80px; height: 80px; }
.logo-wave-2 { width: 80px; height: 80px; animation-delay: 1.33s; }
.logo-wave-3 { width: 80px; height: 80px; animation-delay: 2.66s; }

/* Light pulse - thicker glow that follows */
.logo-wave-pulse {
    position: absolute;
    border-radius: 50%;
    border: none;
    background: radial-gradient(circle, transparent 60%, rgba(59, 130, 246, 0.15) 75%, transparent 90%);
    animation: wave-pulse 4s ease-out infinite;
    opacity: 0;
}

.logo-wave-pulse-1 { width: 80px; height: 80px; animation-delay: 0.2s; }
.logo-wave-pulse-2 { width: 80px; height: 80px; animation-delay: 1.53s; }
.logo-wave-pulse-3 { width: 80px; height: 80px; animation-delay: 2.86s; }

@keyframes wave-spread {
    0% { transform: scale(1); opacity: 0.2; }
    15% { opacity: 0.2; }
    30% { opacity: 0.1; }
    50% { opacity: 0.04; }
    100% { transform: scale(15); opacity: 0.01; }
}

@keyframes wave-pulse {
    0% { transform: scale(1); opacity: 0.4; }
    20% { opacity: 0.35; }
    40% { opacity: 0.2; }
    60% { opacity: 0.08; }
    100% { transform: scale(15); opacity: 0.02; }
}

/* Real heartbeat glow */
.logo-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: real-heartbeat 0.85s ease-in-out infinite;
}

@keyframes real-heartbeat {
    0% { transform: scale(1); opacity: 0.5; }
    10% { transform: scale(1.12); opacity: 0.85; }
    20% { transform: scale(1); opacity: 0.5; }
    30% { transform: scale(1.08); opacity: 0.75; }
    40% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1); opacity: 0.5; }
}

/* Main logo text - CENTERED */
.logo-icon {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

.logo-text-main {
    font-family: 'Fira Code', monospace;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 300;
    font-family: 'Inter', sans-serif;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: rgba(59, 130, 246, 0.7);
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
    -webkit-font-smoothing: antialiased;
}

/* BRACKET STYLING */
.logo-bracket {
    color: rgba(59, 130, 246, 0.7);
}

.logo-name {
    color: rgba(59, 130, 246, 0.7);
    margin: 0 4px;
}

.logo-flip {
    display: inline-block;
    transform: scaleX(-1);
    font-family: inherit;
}

.logo-delta {
    font-family: inherit;
}

.logo-slash {
    color: rgba(59, 130, 246, 0.7);
}

.logo-close {
    color: rgba(59, 130, 246, 0.7);
}

/* Cardinal points */
.logo-cardinal {
    position: absolute;
    width: 5px;
    height: 5px;
    background: rgba(59, 130, 246, 0.6);
    border-radius: 50%;
}

.logo-cardinal-n { top: 0; left: 50%; transform: translateX(-50%); }
.logo-cardinal-s { bottom: 0; left: 50%; transform: translateX(-50%); }
.logo-cardinal-e { right: 0; top: 50%; transform: translateY(-50%); }
.logo-cardinal-w { left: 0; top: 50%; transform: translateY(-50%); }

/* Connecting lines */
.logo-line {
    position: absolute;
    background: rgba(59, 130, 246, 0.08);
}

.logo-line-h { width: 280px; height: 1px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.logo-line-v { width: 1px; height: 280px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.logo-line-d1 { width: 280px; height: 1px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.logo-line-d2 { width: 280px; height: 1px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); }

/* ==================== SOLAR SYSTEM PLANETS ==================== */

/* Base orbit styling */
.logo-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(59, 130, 246, 0.08);
}

/* Base planet styling - all use template blue colors */
.planet {
    position: absolute;
    border-radius: 50%;
    background: var(--color-secondary);
    box-shadow: 0 0 8px var(--color-secondary), 0 0 16px var(--color-secondary);
}

/* Mercury - smallest, fastest, closest */
.logo-orbit.mercury {
    width: 100px;
    height: 100px;
    animation: orbit-cw 20s linear infinite;
}
.planet.mercury {
    width: 5px;
    height: 5px;
    top: 50%;
    right: -2.5px;
    transform: translateY(-50%);
    opacity: 0.7;
}

/* Venus */
.logo-orbit.venus {
    width: 130px;
    height: 130px;
    animation: orbit-ccw 25s linear infinite;
}
.planet.venus {
    width: 7px;
    height: 7px;
    bottom: -3.5px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.8;
}

/* Earth - highlighted */
.logo-orbit.earth {
    width: 160px;
    height: 160px;
    animation: orbit-cw 30s linear infinite;
}
.planet.earth {
    width: 9px;
    height: 9px;
    top: 50%;
    left: -4.5px;
    transform: translateY(-50%);
    background: var(--color-accent);
    box-shadow: 0 0 10px var(--color-accent), 0 0 20px var(--color-accent);
}

/* Mars */
.logo-orbit.mars {
    width: 190px;
    height: 190px;
    animation: orbit-cw 35s linear infinite;
}
.planet.mars {
    width: 6px;
    height: 6px;
    top: 15%;
    right: 5%;
    opacity: 0.75;
}

/* Jupiter - largest */
.logo-orbit.jupiter {
    width: 230px;
    height: 230px;
    animation: orbit-ccw 45s linear infinite;
}
.planet.jupiter {
    width: 14px;
    height: 14px;
    bottom: 10%;
    left: 8%;
    box-shadow: 0 0 12px var(--color-secondary), 0 0 25px var(--color-secondary);
}

/* Saturn - with ring */
.logo-orbit.saturn {
    width: 270px;
    height: 270px;
    animation: orbit-cw 55s linear infinite;
}
.planet.saturn {
    width: 11px;
    height: 11px;
    top: 20%;
    left: 10%;
}
.saturn-ring {
    position: absolute;
    width: 22px;
    height: 6px;
    border: 1.5px solid var(--color-secondary);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(70deg);
    background: transparent;
    opacity: 0.6;
}

/* Uranus */
.logo-orbit.uranus {
    width: 300px;
    height: 300px;
    animation: orbit-ccw 65s linear infinite;
}
.planet.uranus {
    width: 9px;
    height: 9px;
    bottom: 25%;
    right: 5%;
    opacity: 0.8;
}

/* Neptune - furthest */
.logo-orbit.neptune {
    width: 330px;
    height: 330px;
    animation: orbit-cw 75s linear infinite;
}
.planet.neptune {
    width: 8px;
    height: 8px;
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
    opacity: 0.7;
}

/* Orbit animations */
@keyframes orbit-cw {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes orbit-ccw {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

/* Remove old dot styles */
.logo-orbit-1, .logo-orbit-2, .logo-orbit-3, .logo-dot {
    display: none;
}

/* ==================== D.E.V.A.V.E.B ACRONYM ANIMATION ==================== */
.acronym-words {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    top: 0;
    left: 0;
}

.acronym-word {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: 'Fira Code', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-secondary);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    animation: word-spread 8s ease-out infinite;
    text-shadow: 0 0 10px var(--color-secondary);
    white-space: nowrap;
}

/* Each word spreads to different direction */
.word-d {
    --end-x: -180px;
    --end-y: -120px;
    --end-rotate: -25deg;
    animation-delay: 0s;
}

.word-e1 {
    --end-x: 160px;
    --end-y: -100px;
    --end-rotate: 15deg;
    animation-delay: 0.3s;
}

.word-v1 {
    --end-x: -200px;
    --end-y: 20px;
    --end-rotate: -10deg;
    animation-delay: 0.6s;
}

.word-a {
    --end-x: 190px;
    --end-y: 40px;
    --end-rotate: 20deg;
    animation-delay: 0.9s;
}

.word-v2 {
    --end-x: -150px;
    --end-y: 130px;
    --end-rotate: -30deg;
    animation-delay: 1.2s;
}

.word-e2 {
    --end-x: 170px;
    --end-y: 110px;
    --end-rotate: 25deg;
    animation-delay: 1.5s;
}

.word-b {
    --end-x: 0px;
    --end-y: 160px;
    --end-rotate: 0deg;
    animation-delay: 1.8s;
}

@keyframes word-spread {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    10% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(0.5) rotate(calc(var(--end-rotate) * 0.3));
    }
    30% {
        opacity: 1;
        transform: translate(calc(-50% + var(--end-x) * 0.5), calc(-50% + var(--end-y) * 0.5)) scale(0.8) rotate(calc(var(--end-rotate) * 0.6));
    }
    50% {
        opacity: 0.8;
        transform: translate(calc(-50% + var(--end-x)), calc(-50% + var(--end-y))) scale(1) rotate(var(--end-rotate));
    }
    70% {
        opacity: 0.4;
        transform: translate(calc(-50% + var(--end-x) * 1.2), calc(-50% + var(--end-y) * 1.2)) scale(1.1) rotate(calc(var(--end-rotate) * 1.2));
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--end-x) * 1.5), calc(-50% + var(--end-y) * 1.5)) scale(0.5) rotate(calc(var(--end-rotate) * 1.5));
    }
}

/* ==================== DEVAVEB CIRCULAR TEXT PATH ==================== */
.devaveb-circle {
    position: absolute;
    width: 460px;
    height: 460px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}

.circle-text-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: circle-rotate 90s linear infinite;
}

.circle-text {
    font-family: 'Fira Code', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.35em;
    fill: rgba(59, 130, 246, 0.5);
    text-transform: uppercase;
}

.circle-text .shine {
    fill: #fff;
    font-weight: 700;
}

.circle-text .shine {
    fill: #fff;
    font-weight: 700;
}

@keyframes circle-rotate {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

/* Brand name for use in text content */
.brand-name {
    white-space: nowrap;
}
.brand-name .brand-flip {
    display: inline-block;
    transform: scaleX(-1);
}