/* 
   CHANGE LABS BRAND SYSTEM 
   v1.0.0
*/

:root {
    /* Color Hierarchy */
    --color-primary: #334155; /* Slate-700 - Deep Sage/Slate approximation */
    --color-bg: #FAFAFA;      /* Off-white */
    --color-accent: #000000;  /* High contrast */
    --color-utility: #94a3b8; /* Grayscale */

    /* Motion Tokens */
    --ease-brand: cubic-bezier(0.4, 0.0, 0.2, 1);
    --duration-enter: 500ms;
    --delay-wordmark: 150ms; /* Between 120-180ms */
}

/* 1. LOGO SYSTEM UTILITIES */

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between symbol and wordmark */
    position: relative;
}

/* A. Primary Logo (Horizontal) */
.logo-primary {
    flex-direction: row;
}

/* B. Secondary Logo (Stacked) */
.logo-secondary {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.logo-secondary .logo-symbol {
    transform: scale(0.7); /* 60-70% size */
}

.logo-secondary .logo-wordmark {
    letter-spacing: 0.04em; /* Increased tracking */
}

/* C. Icon-Only (Mobile/App) */
.logo-icon-only .logo-wordmark {
    display: none;
}

/* 2. MOTION & ANIMATION */

/* A. On Load Animation */
.animate-brand-enter .logo-symbol {
    opacity: 0;
    animation: symbol-enter var(--duration-enter) var(--ease-brand) forwards;
}

.animate-brand-enter .logo-wordmark {
    opacity: 0;
    animation: wordmark-enter var(--duration-enter) var(--ease-brand) forwards;
    animation-delay: var(--delay-wordmark);
}

@keyframes symbol-enter {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wordmark-enter {
    0% {
        opacity: 0;
        transform: translateX(-4px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* B. Symbol Micro-Interaction (Hover) */
.logo-interactive .symbol-half {
    transition: transform 300ms var(--ease-brand);
}

.logo-interactive:hover .symbol-half-a {
    transform: translate(-2px, -2px);
}

.logo-interactive:hover .symbol-half-b {
    transform: translate(2px, 2px);
}

/* C. Page Transitions */
.page-transition {
    animation: page-enter 600ms var(--ease-brand) forwards;
}

@keyframes page-enter {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* D. Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 3. PRODUCT BRANDING */
.product-lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.product-lockup .parent-brand {
    opacity: 0.6;
    transform: scale(0.9);
    transform-origin: left bottom;
    margin-bottom: 4px;
}

.product-lockup .product-name {
    font-family: var(--font-serif);
    font-size: 2rem;
    line-height: 1;
    color: var(--color-accent);
}