/*
   CHANGE/INFRA BRAND SYSTEM
   v2.0.0
*/
@import url("https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300;400;600;800&display=swap");

:root {
    /* Slash brand tokens */
    --brand-ink: #0b0b0b;
    --brand-paper: #f4f3ef;
    --brand-blue: #0047ff;
    --brand-graphite: #1d1d1d;
    --brand-muted: #6d6d6d;

    /* Semantic aliases used across pages */
    --color-primary: var(--brand-ink);
    --color-bg: var(--brand-paper);
    --color-accent: var(--brand-blue);
    --color-utility: var(--brand-muted);

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

/* Global brand polish without layout changes */
body {
    background-color: var(--color-bg);
    color: var(--brand-ink);
}

.font-serif {
    font-family: "Darker Grotesque", var(--font-sans, sans-serif) !important;
    letter-spacing: 0.02em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Darker Grotesque", var(--font-sans, sans-serif);
}

a {
    transition: color 180ms var(--ease-brand);
}

a:hover {
    color: var(--brand-blue);
}

::selection {
    background: var(--brand-blue);
    color: #ffffff;
}

#scroll-progress {
    background: var(--brand-blue) !important;
}

.brand-slash {
    color: var(--brand-blue);
}

.logo-symbol {
    color: var(--brand-ink);
}

.logo-interactive:hover .logo-symbol {
    color: var(--brand-blue);
}

/* Slash wordmark logo */
.brand-wordmark {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    line-height: 1;
    text-transform: uppercase;
    font-family: "Darker Grotesque", var(--font-sans, sans-serif);
    letter-spacing: -0.01em;
}

.brand-wordmark .brand-left {
    font-weight: 800;
}

.brand-wordmark .brand-slash {
    font-family: var(--font-mono, "IBM Plex Mono", monospace);
    font-weight: 300;
    color: var(--brand-blue);
    position: relative;
    top: -0.03em;
    padding: 0 0.08em;
}

.brand-wordmark .brand-right {
    font-weight: 300;
}

.brand-wordmark-nav {
    font-size: 16px;
}

.brand-wordmark-hero {
    font-size: 44px;
}

.brand-wordmark-sm {
    font-size: 12px;
}

.logo-interactive:hover .brand-slash {
    color: #1b5cff;
}

/* 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(--brand-ink);
}