/**
 * Rebuilt Timeline Components
 * Four completely distinct designs with custom HTML structures
 * Following Geometric Brutalist vision with weight-based physics
 */

/* ============================================
   Base Timeline Styles
   ============================================ */
.project-timeline-horizontal {
    order: 3;
    width: 100%;
    position: relative;
    margin: 30px 0;
}

/* Timeline start and end labels */
.project-timeline-horizontal .timeline-start,
.project-timeline-horizontal .timeline-end {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--dark);
    font-family: var(--font-primary); /* Chivo Mono via design system token */
    position: absolute;
    top: -20px;
}

.project-timeline-horizontal .timeline-start {
    left: 0;
}

.project-timeline-horizontal .timeline-end {
    right: 0;
}

/* ============================================
   Project 2 - Elevated Platform Architecture
   ============================================ */
.project2-timeline {
    height: 60px;
    position: relative;
}

/* Base timeline track */
.project2-timeline .timeline-track {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--light);
    position: relative;
    margin: 40px 0 20px 0;
}

/* Platform stages */
.project2-timeline .platform-stage {
    position: absolute;
    height: 12px;
    background-color: var(--blue);
    border: 2px solid var(--darkest);
    bottom: -6px;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Stage proportions based on letter count: 13 + 11 + 13 = 37 letters */
/* CONFRONTATION: 13/37 = 35%, CALIBRATION: 11/37 = 30%, TRANSCENDENCE: 13/37 = 35% */
.project2-timeline .stage-confrontation {
    left: 0%;
    width: 33%;
}

.project2-timeline .stage-calibration {
    left: 35%;
    width: 28%;
}

.project2-timeline .stage-transcendence {
    left: 65%;
    width: 35%;
}

/* Stage labels */
.project2-timeline .stage-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    font-size: var(--font-size-specialized);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--darkest);
    text-decoration: overline 2px solid var(--blue);
    white-space: nowrap;
    text-transform: uppercase;
    font-family: var(--font-primary); /* Chivo Mono via design system token */
    transition: color 0.3s ease;
}

/* Vertical connector lines */
.project2-timeline .stage-label::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 6px;
    background-color: var(--dark);
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.6;
}

/* Hover effects */
.project2-timeline .platform-stage:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Active state */
.project-column.active .project2-timeline .platform-stage {
    animation: platform-pulse 3s ease-in-out infinite;
}

.project-column.active .project2-timeline .stage-confrontation {
    animation-delay: 0s;
}

.project-column.active .project2-timeline .stage-calibration {
    animation-delay: 0.3s;
}

.project-column.active .project2-timeline .stage-transcendence {
    animation-delay: 0.6s;
}

.project-column.active .project2-timeline .stage-label {
    color: var(--darkest);
    font-weight: 700;
}

/* ============================================
   Project 3 - Elevated Platform Architecture
   ============================================ */
.project3-timeline {
    height: 60px;
    position: relative;
}

/* Base timeline track */
.project3-timeline .timeline-track {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--light);
    position: relative;
    margin: 40px 0 20px 0;
}

/* Platform stages */
.project3-timeline .platform-stage {
    position: absolute;
    height: 12px;
    background-color: var(--pink);
    border: 2px solid var(--darkest);
    bottom: -6px;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Stage proportions based on letter count: 4 + 5 + 11 = 20 letters */
/* DARE: 4/20 = 20%, DANCE: 5/20 = 25%, DEMONSTRATE: 11/20 = 55% */
/* Stage 1: DARE - starts at 0%, 20% width (4 letters) */
.project3-timeline .stage-dare {
    left: 0%;
    width: 20%;
}

/* Stage 2: DANCE - starts at 22% (20% + 2% gap), 25% width (5 letters) */
.project3-timeline .stage-dance {
    left: 22%;
    width: 25%;
}

/* Stage 3: DEMONSTRATE - starts at 49% (20% + 2% + 25% + 2%), 51% width (11 letters) */
.project3-timeline .stage-demonstrate {
    left: 49%;
    width: 51%;
}

/* Stage labels */
.project3-timeline .stage-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    font-size: var(--font-size-specialized);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--darkest);
    text-decoration: overline 2px solid var(--pink);
    white-space: nowrap;
    text-transform: uppercase;
    font-family: var(--font-primary); /* Chivo Mono via design system token */
    transition: color 0.3s ease;
}

/* Vertical connector lines */
.project3-timeline .stage-label::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 6px;
    background-color: var(--dark);
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.6;
}

/* Hover effects */
.project3-timeline .platform-stage:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Active state */
.project-column.active .project3-timeline .platform-stage {
    animation: platform-pulse 3s ease-in-out infinite;
}

.project-column.active .project3-timeline .stage-dare {
    animation-delay: 0s;
}

.project-column.active .project3-timeline .stage-dance {
    animation-delay: 0.3s;
}

.project-column.active .project3-timeline .stage-demonstrate {
    animation-delay: 0.6s;
}

.project-column.active .project3-timeline .stage-label {
    color: var(--darkest);
    font-weight: 700;
}

/* ============================================
   Project 4 - Elevated Platform Architecture (Refined)
   ============================================ */
.project4-timeline {
    height: 60px;
    position: relative;
}

/* Base timeline track */
.project4-timeline .timeline-track {
    display: block; /* Show the track */
    width: 100%;
    height: 2px;
    background-color: var(--light);
    position: relative;
    margin: 40px 0 20px 0;
}

/* Platform stages - concrete blocks representing time periods */
.project4-timeline .platform-stage {
    position: absolute;
    height: 12px;
    background-color: var(--purple);
    border: 2px solid var(--darkest);
    bottom: -6px; /* Centers on timeline track */
    transition: all 0.3s ease;
    /* Concrete texture effect */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Stage 1: EMERGE - starts at 0%, 33% width (6 letters) */
.project4-timeline .stage-emerge {
    left: 0%;
    width: 33%;
}

/* Stage 2: RESPOND - starts at 35% (33% + 2% gap), 38% width (7 letters) */
.project4-timeline .stage-respond {
    left: 35%;
    width: 38%;
}

/* Stage 3: HOPE - starts at 75% (33% + 2% + 38% + 2%), 25% width (4 letters) */
.project4-timeline .stage-hope {
    left: 75%;
    width: 25%;
}

/* Stage labels positioned above platforms */
.project4-timeline .stage-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    font-size: var(--font-size-specialized);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--darkest);
    text-decoration: overline 2px solid var(--purple);
    white-space: nowrap;
    text-transform: uppercase;
    font-family: var(--font-primary); /* Chivo Mono via design system token */
    transition: color 0.3s ease;
}

/* Vertical connector lines from labels to platforms */
.project4-timeline .stage-label::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 6px;
    background-color: var(--dark);
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.6;
}

/* Hover effects */
.project4-timeline .platform-stage:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Active state animations */
.project-column.active .project4-timeline .platform-stage {
    animation: platform-pulse 3s ease-in-out infinite;
}

.project-column.active .project4-timeline .stage-emerge {
    animation-delay: 0s;
}

.project-column.active .project4-timeline .stage-respond {
    animation-delay: 0.3s;
}

.project-column.active .project4-timeline .stage-hope {
    animation-delay: 0.6s;
}

@keyframes platform-pulse {
    0%, 100% { 
        transform: translateY(0);
        opacity: 1;
    }
    50% { 
        transform: translateY(-2px);
        opacity: 0.9;
    }
}

/* Active state label styling */
.project-column.active .project4-timeline .stage-label {
    color: var(--darkest);
    font-weight: 700;
}

/* ============================================
   Project 5 - Elevated Platform Architecture
   ============================================ */
.project5-timeline {
    height: 60px;
    position: relative;
}

/* Base timeline track */
.project5-timeline .timeline-track {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--light);
    position: relative;
    margin: 40px 0 20px 0;
}

/* Platform stages */
.project5-timeline .platform-stage {
    position: absolute;
    height: 12px;
    background-color: var(--darkblue);
    border: 2px solid var(--darkest);
    bottom: -6px;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Stage proportions based on letter count: 6 + 9 + 7 = 22 letters */
/* PROMPT: 6/22 = 27%, COMPOSITE: 9/22 = 41%, TRIUMPH: 7/22 = 32% */
/* Stage 1: PROMPT - starts at 0%, 27% width (6 letters) */
.project5-timeline .stage-prompt {
    left: 0%;
    width: 27%;
}

/* Stage 2: COMPOSITE - starts at 29% (27% + 2% gap), 41% width (9 letters) */
.project5-timeline .stage-composite {
    left: 29%;
    width: 41%;
}

/* Stage 3: TRIUMPH - starts at 72% (27% + 2% + 41% + 2%), 28% width (7 letters) */
.project5-timeline .stage-triumph {
    left: 72%;
    width: 28%;
}

/* Stage labels */
.project5-timeline .stage-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    font-size: var(--font-size-specialized);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--darkest);
    text-decoration: overline 2px solid var(--darkblue);
    white-space: nowrap;
    text-transform: uppercase;
    font-family: var(--font-primary); /* Chivo Mono via design system token */
    transition: color 0.3s ease;
}

/* Vertical connector lines */
.project5-timeline .stage-label::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 6px;
    background-color: var(--dark);
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.6;
}

/* Hover effects */
.project5-timeline .platform-stage:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Active state */
.project-column.active .project5-timeline .platform-stage {
    animation: platform-pulse 3s ease-in-out infinite;
}

.project-column.active .project5-timeline .stage-prompt {
    animation-delay: 0s;
}

.project-column.active .project5-timeline .stage-composite {
    animation-delay: 0.3s;
}

.project-column.active .project5-timeline .stage-triumph {
    animation-delay: 0.6s;
}

.project-column.active .project5-timeline .stage-label {
    color: var(--darkest);
    font-weight: 700;
}

/* ============================================
   Subtle Concrete Texture Overlay
   ============================================ */
.block::before,
.gear::before,
.platform::before,
.monolith::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.03) 2px,
            rgba(255, 255, 255, 0.03) 3px
        );
    pointer-events: none;
    mix-blend-mode: overlay;
}


/* ============================================================================
   START CLEAN-FIX-P5-S6.5c-A3-KEYFRAMES (2026-04-22)
   ============================================================================
   3 shared animation keyframes for P5-S6.5c Holistic Port Phase 1.
   Hosted here (per plan Core Principle #3) because they are consumed by
   matchMedia-scoped @media blocks in v3-project-columns-responsive.css —
   placing them here avoids duplicating the @keyframes rule across multiple
   @media breakpoint blocks in responsive.css.

   Source: test-layout-triage-option-2a.html
     - work-categories-marquee  (line 636, inside CSS_V12)
     - viewer-marquee           (line 1008, inside CSS_LG_MACRO)
     - triage-label-cycle-reveal (line 313, inside LG_MACRO pre-block)

   Consumed by:
     - v3-project-columns-responsive.css Chunk 1.4a V12 marquee CSS (work-categories-marquee 45s)
     - v3-project-columns-responsive.css Chunk 1.6d LG work-cats marquee (viewer-marquee 30s)
     - v3-project-columns-responsive.css Chunk 1.6e LG cycling timeline (triage-label-cycle-reveal 12s with 0s/4s/8s staggered delays)

   To revert: Search for CLEAN-FIX-P5-S6.5c-A3-KEYFRAMES and delete everything
   between START and END markers.
   ============================================================================ */

/* Work-categories horizontal marquee — V12 (MD Max + XL Min) @ 45s cadence.
   Matches production .hsec-fallback-marquee precedent. translateX 0 → -50%
   because DOM is duplicated by V3CategoriesMarquee.js (Chunk 1.5): track
   contains original + cloned tags, and -50% translation reaches the start
   of the cloned set for seamless loop. */
@keyframes work-categories-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Viewer-marquee — LG work-categories horizontal scroll @ 30s cadence.
   Same translateX mechanic as work-categories-marquee but different duration
   for LG's tighter visual density. Same DOM-duplication requirement via
   V3CategoriesMarquee.js. */
@keyframes viewer-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Triage label cycle reveal — LG cycling timeline (P2-P5) @ 12s cadence.
   Opacity pulse with 29% visible window (3.48s of 12s). Paired with
   nth-child animation-delay: 0s/4s/8s on 3 platform-stage labels for
   sequential reveal with ~0.52s gaps between labels. Widened from earlier
   23% window (2.76s visible / 1.24s gap) per ui-ninja 2026-04-20 review.

   V0-PRECURSOR-D4-CONFIRMED (2026-05-05): V0 4-tier × 6-project audit
   verified this keyframe matches LG production canonical state. lg-only
   triage values (9s × 0/3/6s × 23% peak) are the PRE-review draft from
   2026-04-18 rebuild; current state (12s × 0/4/8s × 29% peak) is the
   POST-review canonical from ui-ninja 2026-04-20. Cycling rhythm is NOT
   port drift — it is the locked LG decision per the review. Paired with
   v3-project-columns-responsive.css:4292-4300 (animation duration + delays). */
@keyframes triage-label-cycle-reveal {
    0%      { opacity: 0; }
    2%      { opacity: 1; }
    31%     { opacity: 1; }
    33%     { opacity: 0; }
    100%    { opacity: 0; }
}
/* END CLEAN-FIX-P5-S6.5c-A3-KEYFRAMES */

/* START CLEAN-FIX-P5-S7D-V2-M3-SCANNER-DOM (V.2 M3-V4 'Paired Thin Lines' — keyframe + base styling)
   M3 Scanner: identity-critical brutalist sweep across V3OO .overview-expanded-content at expand-entry.
   Reads "data being inspected" — ambient overlay, NOT visual feature. Locked constraints (typed-dawn plan):
   opacity ≤0.3 in 6n-aligned values; hard edges only (no gradient/blur/anti-alias); 1-3px line thickness;
   palette-locked per-project; linear/ease-out only; reduced-motion = display:none.
   Two parallel 2px lines, 18px (3×6n) separation, expanding radially from center, 2400ms ease-out,
   opacity 0.30→0. Per-project accent via column-scope `--accent-rgb` cascade (warm fallback per
   project-column-styles.css:980 precedent). z-index above marquee content (2) but below interactive UI.
   To revert: search marker, delete the START/END block + matching V3OverviewOverlay.js fences
   (M3-SCANNER-DOM JS + M3-SCANNER-SWEEP + M3-UNREGISTER). */
@keyframes m3-scanner-radial-expand {
    /* Visibility hotfix 2026-05-04: hold peak opacity 0.30 for first 25% of cycle
       so user has perceptible visibility window before opacity decays via ease-out.
       Pre-fix curve front-loaded the fade so lines were already <0.10 opacity by 20%
       progress, making them effectively invisible during the perceptually-noticeable
       width-grow phase. Held-then-fade reads cleaner against the dim --accent-rgb × 0.30
       palette over --darkest background. */
    0%   { width: 0;   opacity: 0.30; }
    25%  { width: 30%; opacity: 0.30; }
    100% { width: 100%; opacity: 0; }
}
.m3-scanner-line {
    position: absolute;
    height: 2px;
    background: rgba(var(--accent-rgb, 121, 126, 128), 0.30);
    pointer-events: none;
    opacity: 0;
    left: 50%;
    width: 0;
    top: 50%;
    will-change: width, opacity;
    z-index: 5; /* visibility hotfix: bumped 2→5 to paint above marquee transform stacking context */
}
.m3-scanner-line.m3-scanner-line-upper { transform: translate(-50%, -9px); }
.m3-scanner-line.m3-scanner-line-lower { transform: translate(-50%,  9px); }
.m3-scanner-line[data-scanner-active="true"] {
    animation: m3-scanner-radial-expand 2400ms ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
    .m3-scanner-line { display: none; }
}
/* END CLEAN-FIX-P5-S7D-V2-M3-SCANNER-DOM */

/* START CLEAN-FIX-P5-SESSION7-P1CTA-M4B-BRACKET-PULSE (2026-05-11)
   Shared-primitive keyframe for P1 case-study-cta M4B corner-bracket default-state pulse.
   Used by .view-case-btn::before + ::after in the 3C Decoration Strip Minimal fence at
   project-column-styles.css:3893-3952 (modify-in-place VI-B2-M4B-BRACKETS-M4D-HOVER) and
   mirrored in v3-project-columns-responsive.css LG-MACRO-E-P1 (L4036-4099) for compressed-
   mode composite. Per CLAUDE.md Post-Work Check 3, keyframes land in this shared-primitives
   host (NOT inline in responsive.css). Animation: 2.5s ease-in-out infinite; border-color
   cycles warm ↔ lightest. M4D hover state uses a static box-shadow with `transition`
   (no separate keyframe needed). To revert: search CLEAN-FIX-P5-SESSION7-P1CTA-M4B-BRACKET-
   PULSE and delete between START and END markers. */
@keyframes p1-cta-m4b-bracket-pulse {
    0%, 100% { border-color: rgb(var(--warm-rgb)); }
    50%      { border-color: var(--lightest); }
}
/* END CLEAN-FIX-P5-SESSION7-P1CTA-M4B-BRACKET-PULSE */