/* ═══════════════════════════════════════════════════════════════════
   Logo & Branding - Refined Industrial Design
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   Home Page Logo
   ───────────────────────────────────────────────────────────────────── */
#app-logo {
    font-family: var(--font-display);
    font-size: clamp(3rem, 12vw, 6rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--brass-400);
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(184, 134, 11, 0.2);
    display: inline-block;
    position: relative;
    padding: 0 0.5em;

    /* Subtle brass gradient */
    background: linear-gradient(
        135deg,
        var(--brass-300) 0%,
        var(--brass-400) 30%,
        var(--brass-500) 60%,
        var(--copper-500) 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* Subtle animation */
    animation: logoShimmer 8s ease-in-out infinite;
}

/* Top decorative line */
#app-logo::before {
    content: '';
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--brass-500) 20%,
        var(--brass-400) 50%,
        var(--brass-500) 80%,
        transparent
    );
}

/* Bottom decorative line */
#app-logo::after {
    content: '';
    position: absolute;
    bottom: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--brass-500) 20%,
        var(--brass-400) 50%,
        var(--brass-500) 80%,
        transparent
    );
}

@keyframes logoShimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Home Page Overlay
   ───────────────────────────────────────────────────────────────────── */
.logo-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    z-index: 100;
    pointer-events: none;
    background: linear-gradient(
        0deg,
        var(--steel-950) 0%,
        var(--steel-950) 30%,
        rgba(10, 12, 15, 0.95) 50%,
        rgba(10, 12, 15, 0.8) 70%,
        rgba(10, 12, 15, 0.4) 85%,
        transparent 100%
    );
}

/* ─────────────────────────────────────────────────────────────────────
   Alternative Logo Styles (for flexibility)
   ───────────────────────────────────────────────────────────────────── */

/* Secondary text logo */
#app-name {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--brass-400);
    letter-spacing: 0.1em;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(184, 134, 11, 0.15);
}

/* Interactive logo (for navigation/header) */
.logo-text {
    font-family: var(--font-display);
    font-size: clamp(4rem, 10vw, 6.5rem);
    display: flex;
    position: absolute;
    bottom: 65vh;
    left: 50%;
    transform: translateX(-50%);
    user-select: none;
    color: var(--brass-400);
}

.logo-text__wrapper {
    padding: 1.25rem;
    cursor: pointer;
}

.logo-text__letter {
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateY(0);
}

.logo-text__shadow {
    transform: scale(1, -1);
    color: var(--steel-600);
    opacity: 0.3;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.logo-text__wrapper:hover .logo-text__letter {
    transform: translateY(-15%);
}

.logo-text__wrapper:hover .logo-text__shadow {
    opacity: 0;
    transform: translateY(100%) scale(1, -1);
}

/* ─────────────────────────────────────────────────────────────────────
   Responsive Adjustments
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #app-logo {
        letter-spacing: 0.05em;
    }

    #app-logo::before,
    #app-logo::after {
        width: 80%;
    }

    .logo-overlay {
        height: 35vh;
    }
}

@media (max-width: 480px) {
    #app-logo::before,
    #app-logo::after {
        width: 90%;
    }

    .logo-overlay {
        height: 30vh;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Blueprint-style decorative elements
   ───────────────────────────────────────────────────────────────────── */
.blueprint-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--blueprint);
    opacity: 0.4;
}

.blueprint-corner--top-left {
    top: 0;
    left: 0;
    border-top: 2px solid;
    border-left: 2px solid;
}

.blueprint-corner--top-right {
    top: 0;
    right: 0;
    border-top: 2px solid;
    border-right: 2px solid;
}

.blueprint-corner--bottom-left {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid;
    border-left: 2px solid;
}

.blueprint-corner--bottom-right {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid;
    border-right: 2px solid;
}

/* ═══════════════════════════════════════════════════════════════════
   Light Theme — Logo Overrides
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] #app-logo {
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 40px rgba(184, 134, 11, 0.15);
}

[data-theme="light"] .logo-overlay {
    background: linear-gradient(
        0deg,
        var(--steel-950) 0%,
        var(--steel-950) 30%,
        rgba(245, 246, 248, 0.95) 50%,
        rgba(245, 246, 248, 0.8) 70%,
        rgba(245, 246, 248, 0.4) 85%,
        transparent 100%
    );
}