/* ==========================================================================
   Outcome Website - CSS Design Tokens
   ========================================================================== */

:root {
    /* ==========================================================================
       Color Tokens
       Requirements: 2.1-2.8
       ========================================================================== */
    
    /* Background colors */
    --color-bg-desktop: #0B0B0B;      /* Desktop/Tablet background (viewport >= 640px) */
    --color-bg-mobile: #0F0F0F;       /* Mobile background (viewport < 640px) */
    
    /* Text colors */
    --color-text-primary: #EDEDED;    /* Primary text (H1, main content) */
    --color-text-secondary: #A8A8A8;  /* Secondary text ("What remains.") */
    --color-text-meta: #6F6F6F;       /* Meta text (footer, labels) */
    --color-text-company: #CFCFCF;    /* Company names */
    
    /* UI element colors */
    --color-axis: #1E1E1E;            /* System axis line */
    --color-divider: #6F6F6F;         /* Divider line */

    /* ==========================================================================
       Spacing Tokens
       Requirements: 1.2-1.5
       ========================================================================== */
    
    /* Horizontal padding (responsive) */
    --padding-desktop: 120px;         /* Viewport > 1024px */
    --padding-tablet: 64px;           /* Viewport 640px - 1024px */
    --padding-mobile: 24px;           /* Viewport < 640px */
    
    /* Layout constraints */
    --max-width: 960px;               /* Maximum content width */
    
    /* Axis positioning */
    --axis-left-desktop: 48px;        /* Desktop/Tablet axis position */
    --axis-left-mobile: 16px;         /* Mobile axis position */

    /* ==========================================================================
       Typography Tokens
       Requirements: 3.1-3.3, 3.5-3.7
       ========================================================================== */
    
    /* Font family */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* H1 sizes (responsive) */
    --h1-size-desktop: 96px;          /* Viewport > 1024px */
    --h1-size-tablet: 64px;           /* Viewport 640px - 1024px */
    --h1-size-mobile: 42px;           /* Viewport < 640px */

    /* ==========================================================================
       Animation Tokens
       Requirements: 9.1-9.4
       ========================================================================== */
    
    /* Durations */
    --duration-divider: 200ms;        /* Divider extension animation */
    --duration-fade: 180ms;           /* Opacity fade transitions */
    
    /* Easing functions */
    --easing-fade: ease-out;          /* For opacity transitions */
    --easing-divider: linear;         /* For divider extension */
}

/* ==========================================================================
   Base Styles and Typography
   Requirements: 3.1, 3.2, 3.3, 2.1, 2.2
   ========================================================================== */

/* Universal box-sizing and font smoothing */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Apply Inter font family to all elements - Requirement 3.1 */
html {
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;  /* Requirement 3.2 */
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;   /* Requirement 3.3 */
}

/* Body background color - Requirements 2.1, 2.2 */
body {
    background-color: var(--color-bg-desktop);  /* Default: #0B0B0B for desktop/tablet */
    color: var(--color-text-primary);
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

/* Mobile background override - Requirement 2.2 (viewport < 640px) */
@media (max-width: 639px) {
    body {
        background-color: var(--color-bg-mobile);  /* #0F0F0F for mobile */
    }
}

/* Ensure no italics on any text - Requirement 3.4 */
* {
    font-style: normal;
}

/* ==========================================================================
   Responsive Layout System
   Requirements: 1.1, 1.2, 1.3, 1.4, 1.5
   ========================================================================== */

/* Main container - single-column layout with max-width constraint */
.main-container {
    max-width: var(--max-width);  /* 960px - Requirement 1.2 */
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-align: left;  /* Left-aligned text only - Requirement 1.1 */
    
    /* Desktop padding (viewport > 1024px) - Requirement 1.3 */
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
}

/* Tablet layout (640px - 1024px) - Requirement 1.4 */
@media (max-width: 1024px) {
    .main-container {
        padding-left: var(--padding-tablet);
        padding-right: var(--padding-tablet);
    }
}

/* Mobile layout (< 640px) - Requirement 1.5 */
@media (max-width: 639px) {
    .main-container {
        padding-left: var(--padding-mobile);
        padding-right: var(--padding-mobile);
    }
}

/* Ensure all text elements are left-aligned - Requirement 1.1 */
.main-container * {
    text-align: left;
}

/* ==========================================================================
   System Axis
   Requirements: 4.1, 4.2, 4.3, 4.4, 4.5
   ========================================================================== */

/* System axis - vertical line visual anchor */
.system-axis {
    position: fixed;                          /* Requirement 4.4 - always visible */
    top: 0;
    left: var(--axis-left-desktop);           /* Requirement 4.2 - 48px from left (desktop/tablet) */
    width: 1px;                               /* Requirement 4.1 - 1px width */
    height: 100vh;                            /* Requirement 4.1 - 100vh height */
    background-color: var(--color-axis);      /* #1E1E1E - Requirement 2.7 */
    opacity: 0;                               /* Requirement 4.5 - initial opacity 0 for load sequence */
    transition: opacity var(--duration-fade) var(--easing-fade);  /* Smooth fade-in transition */
    pointer-events: none;                     /* Non-interactive element */
    z-index: 1;                               /* Ensure visibility above content */
}

/* Mobile axis position (< 640px) - Requirement 4.3 */
@media (max-width: 639px) {
    .system-axis {
        left: var(--axis-left-mobile);        /* 16px from left on mobile */
    }
}

/* ==========================================================================
   Hero Section
   Requirements: 5.1-5.10, 3.5-3.8
   ========================================================================== */

/* Hero section container - positioning */
.hero {
    /* Desktop/Tablet: slightly above vertical center - Requirement 5.2 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 40vh;  /* Position slightly above center */
}

/* Mobile: top-third of viewport - Requirement 5.3 */
@media (max-width: 639px) {
    .hero {
        padding-top: 25vh;  /* Position in top-third */
    }
}

/* Hero title (H1 "Outcome") - Requirements 5.1, 3.5-3.8 */
.hero-title {
    font-size: var(--h1-size-desktop);        /* 96px - Requirement 3.5 */
    font-weight: 400;                          /* Requirement 3.8 */
    color: var(--color-text-primary);          /* #EDEDED - Requirement 2.3 */
    line-height: 1;
    margin: 0;
    opacity: 0;                                /* Initial opacity 0 - fades in at 1200ms via JS */
    transition: opacity var(--duration-fade) var(--easing-fade);
    cursor: default;
}

/* Tablet H1 size (640px - 1024px) - Requirement 3.6 */
@media (max-width: 1024px) {
    .hero-title {
        font-size: var(--h1-size-tablet);     /* 64px */
    }
}

/* Mobile H1 size (< 640px) - Requirement 3.7 */
@media (max-width: 639px) {
    .hero-title {
        font-size: var(--h1-size-mobile);     /* 42px */
    }
}

/* Focus styles for keyboard accessibility - Requirement 8.3 */
.hero-title:focus {
    outline: none;  /* Remove default outline, reveal content shows on focus */
}

/* Hero divider line - Requirements 5.5, 5.6 */
.hero-divider {
    width: 120px;                              /* Requirement 5.5 - 120px width */
    height: 1px;                               /* Requirement 5.5 - 1px height */
    margin-top: 12px;                          /* Requirement 5.5 - 12px margin-top */
    background-color: var(--color-divider);   /* #6F6F6F - Requirement 2.8 */
    opacity: 0;                                /* Requirement 5.6 - initial opacity 0 (hidden) */
    transform: scaleX(0);                      /* Initial state for left-to-right extension */
    transform-origin: left center;             /* Extend from left to right */
    transition: opacity var(--duration-fade) var(--easing-fade),
                transform var(--duration-divider) var(--easing-divider);
}

/* Hero secondary text ("What remains.") - Requirements 5.7, 5.8, 5.9, 5.10 */
.hero-secondary {
    font-size: 18px;                           /* Requirement 5.9 - Desktop/Tablet: 18px */
    color: var(--color-text-secondary);        /* #A8A8A8 - Requirement 2.4 */
    margin-top: 8px;                           /* Requirement 5.7 - 8px margin-top */
    opacity: 0;                                /* Requirement 5.8 - initial opacity 0 (hidden) */
    transition: opacity var(--duration-fade) var(--easing-fade);
}

/* Mobile secondary text size (< 640px) - Requirement 5.10 */
@media (max-width: 639px) {
    .hero-secondary {
        font-size: 16px;                       /* 16px on mobile */
    }
}

/* Reveal state classes - applied via JavaScript */
.hero-divider.revealed {
    opacity: 1;
    transform: scaleX(1);                      /* Extend left-to-right when revealed */
}

.hero-secondary.revealed {
    opacity: 1;
}

/* ==========================================================================
   Companies Section
   Requirements: 10.1-10.5
   ========================================================================== */

/* Companies section container - Requirements 10.1, 10.2 */
.companies {
    margin-top: 64px;  /* Desktop/Tablet: 64px margin-top - Requirement 10.1 */
}

/* Mobile companies section margin (< 640px) - Requirement 10.2 */
@media (max-width: 639px) {
    .companies {
        margin-top: 48px;  /* Mobile: 48px margin-top */
    }
}

/* Companies label ("COMPANIES") - Requirement 10.3 */
.companies-label {
    display: block;
    font-size: 12px;                           /* 12px font size */
    text-transform: uppercase;                 /* Uppercase */
    letter-spacing: 0.02em;                    /* +2% letter-spacing */
    color: var(--color-text-meta);             /* #6F6F6F - meta color */
    margin-bottom: 8px;
}

/* Companies list - remove default list styling */
.companies-list {
    list-style: none;                          /* Remove bullets */
    padding: 0;
    margin: 0;
}

.companies-list li {
    margin: 0;
    padding: 0;
}

/* Company links (Zoopcode, Fameon) - Requirements 10.4, 10.5 */
.company-link {
    display: inline-block;
    font-size: 14px;                           /* 14px font size - Requirement 10.4 */
    line-height: 22px;                         /* 22px line-height - Requirement 10.4 */
    color: var(--color-text-company);          /* #CFCFCF - company color */
    text-decoration: none;                     /* Remove link underlines */
    transition: opacity var(--duration-fade) var(--easing-fade);
}

/* Company hover state - Requirement 10.5 */
.company-link:hover {
    opacity: 0.7;                              /* Opacity 100% → 70% on hover */
}

/* ==========================================================================
   Footer
   Requirements: 11.1-11.5
   ========================================================================== */

/* Footer line - Requirements 11.1, 11.2, 11.3, 11.4, 11.5 */
.footer-line {
    margin-top: auto;                          /* Push to bottom */
    padding-top: 48px;                         /* Minimum spacing from content */
    padding-bottom: 24px;                      /* Bottom padding */
    font-size: 12px;
    color: var(--color-text-meta);             /* #6F6F6F - Requirement 11.2 */
    /* Requirement 11.4 - NOT sticky or fixed (default static positioning) */
    /* Requirement 11.5 - No copyright symbols (handled in HTML content) */
}


/* ==========================================================================
   Animation Constraints and Reduced Motion
   Requirements: 9.1-9.5
   ========================================================================== */

/*
 * Animation Constraint Compliance:
 * - Only opacity and transform properties are animated (Requirement 9.1)
 * - translateY movement limited to max 8px (Requirement 9.2)
 * - Divider extension: 200ms, linear easing (Requirement 9.3)
 * - Text fade: 150-200ms (180ms), ease-out easing (Requirement 9.4)
 * - NO bounce, elastic, distortion, or noise effects (Requirement 9.5)
 *
 * All transitions in this stylesheet comply with these constraints:
 * - .system-axis: opacity transition only
 * - .hero-title: opacity transition only
 * - .hero-divider: opacity and transform (scaleX) transitions
 * - .hero-secondary: opacity transition only
 * - .company-link: opacity transition only
 */

/* Respect user preference for reduced motion - Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}