/* --- Shared Logo Styles --- */

.logo-prefix {
    font-weight: 300; /* Light */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
    color: var(--text-color);
    letter-spacing: -0.02em;
    margin-right: 0.1em;
}

.logo-works {
    font-family: 'Gochi Hand', cursive;
    font-weight: 400; /* Correct weight for Gochi Hand */
    color: #FF5722;
    transform: rotate(-2deg) translateY(-0.08em);
    text-decoration: none; /* Ensure no underline on the logo itself */

    /* Neon light-up animation */
    animation: neon-turn-on 6s forwards, neon-pulse 3s infinite 6s;
    opacity: 0; /* Start with the light "off" */
}

@keyframes neon-turn-on {
    /* --- Flicker Phase (0s to 2s) --- */
    0%, 5% { opacity: 0; }
    10% { opacity: 1; text-shadow: 0 0 2px #fff, 0 0 5px #FF5722; }
    15% { opacity: 0.3; text-shadow: none; }
    20% { opacity: 1; text-shadow: 0 0 2px #fff, 0 0 5px #FF5722, 0 0 8px #FF5722; }
    30% { opacity: 0.5; text-shadow: none; }
    38% { opacity: 1; text-shadow: 0 0 2px #fff, 0 0 5px #FF5722, 0 0 8px #FF5722; }

    /* --- Settle to Glow (from 2s onwards) --- */
    40%, 100% {
        opacity: 1;
        text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px #FF5722, 0 0 12px #FF5722;
    }
}

@keyframes neon-pulse {
    0%, 100% {
        text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px #FF5722, 0 0 12px #FF5722;
    }
    50% {
        text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px #FF5722, 0 0 15px #FF5722;
    }
}

/* Miniature version for headers */
.header-logo {
    /* This class is no longer needed for sizing */
}

.header-logo-prefix {
    font-size: 1.5rem;
    text-decoration: none;
}

/* --- Shared Header Framework --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0; /* Vertical padding only */
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.header-left, .header-right {
    flex: 1; /* Allow them to grow and shrink */
}
.header-center {
    flex-basis: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Default gap for items in the center */
    flex-shrink: 1; /* Allow center to shrink on very narrow screens */
    min-width: 120px; /* Ensure it doesn't become too small */
}
.header-left { display: flex; justify-content: flex-start; align-items: center; padding-left: clamp(15px, 5vw, 40px); }
.header-right { display: flex; justify-content: flex-end; align-items: center; flex-wrap: nowrap; /* Prevent wrapping */ padding-right: clamp(15px, 5vw, 40px); }

/* Override for theme-toggle when it's inside a header */
header #theme-toggle {
    position: relative; /* Ensure it's part of the flex layout */
}

.header-icon-button {
    font-size: clamp(1.5rem, 4vw, 2rem); /* Match Works logo and desired header size */
    width: 1em;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 2.5D Origami Animations --- */

/* Animation for ground-based animals */
@keyframes ground-idle-animation {
    0%, 100% {
        transform: translateY(0) rotateX(5deg);
    }
    50% {
        transform: translateY(-4px) rotateX(0deg);
    }
}

.figure-container.ground-idle .origami-figure {
    animation: ground-idle-animation 5s ease-in-out infinite;
    transform-origin: bottom center;
}

/* Animation for water-based animals */
@keyframes water-idle-animation {
    0%, 100% {
        transform: translateY(0) rotate(-2deg) rotateX(5deg);
    }
    50% {
        transform: translateY(5px) rotate(2deg) rotateX(-5deg);
    }
}

.figure-container.water-idle .origami-figure {
    animation: water-idle-animation 8s ease-in-out infinite;
    transform-origin: center center;
}

/* Animation for air-based animals */
@keyframes air-idle-animation {
    0%, 100% {
        transform: translateY(0) rotate(2deg);
    }
    50% {
        transform: translateY(-8px) rotate(-2deg);
    }
}

.figure-container.air-idle .origami-figure {
    animation: air-idle-animation 7s ease-in-out infinite;
    transform-origin: center center;
}