/* ==========================================================
   History Section — Editorial Dossier Redesign v2
   File: static/css/landing/history-dossier.css

   Scope: every rule below is namespaced under #history and the
   cs-history-* classes, which are unique to this section only.
   No existing selector in style.css / redesign.css /
   final-polish.css / home.css / visual-life-palette.css is
   touched or overridden — this file only adds new rules for
   brand-new class names, so the rest of the page (including the
   old .history-card / .history-milestone rules used elsewhere
   for reference) is unaffected.

   Uses the site's existing design tokens (--primary, --cyan,
   --violet, --warning, --surface, --line, --radius,
   --font-display, etc. from style.css :root) so it matches the
   rest of the page instead of introducing a new palette.

   v2 gives each era its own accent color (a small, deliberate
   palette already used elsewhere on the site) so the timeline
   reads as a progression instead of four identical grey boxes.
========================================================== */

#history .cs-history-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:20px;
    margin-top:10px;
}

#history .cs-history-panel{
    --panel-accent: var(--primary);
    --panel-accent-rgb: 62,123,250;

    position:relative;
    overflow:hidden;
    background:
        radial-gradient(140% 160% at 100% -20%, rgba(var(--panel-accent-rgb),.10), transparent 60%),
        var(--surface);
    border:1px solid var(--line);
    border-top:1px solid var(--line);
    border-radius:var(--radius);
    padding:36px 32px 32px;
    box-shadow:var(--shadow-sm);
    transition:border-color .3s ease, box-shadow .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
    opacity:0;
    transform:translateY(16px);
    animation:cs-history-in .6s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes cs-history-in{
    to{ opacity:1; transform:translateY(0); }
}

#history .cs-history-panel--founding{ animation-delay:.05s; }
#history .cs-history-panel--boom{ animation-delay:.12s; }
#history .cs-history-panel--ched{ animation-delay:.19s; }
#history .cs-history-panel--today{ animation-delay:.26s; }
#history .cs-history-panel--mission{ animation-delay:.33s; }

/* colored top accent bar, unique per era */
#history .cs-history-panel::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg, rgba(var(--panel-accent-rgb),0), var(--panel-accent) 30%, var(--panel-accent) 70%, rgba(var(--panel-accent-rgb),0));
    opacity:.85;
}

#history .cs-history-panel:hover{
    border-color:rgba(var(--panel-accent-rgb),.45);
    box-shadow:var(--shadow-md), 0 18px 40px -18px rgba(var(--panel-accent-rgb),.45);
    transform:translateY(-5px);
}

/* per-era accent assignments — a small deliberate palette,
   already used elsewhere on the site */
#history .cs-history-panel--founding{ --panel-accent:var(--primary); --panel-accent-rgb:62,123,250; }
#history .cs-history-panel--boom{ --panel-accent:var(--cyan); --panel-accent-rgb:34,211,238; background:radial-gradient(140% 160% at 100% -20%, rgba(34,211,238,.10), transparent 60%), var(--surface-hi); }
#history .cs-history-panel--ched{ --panel-accent:var(--violet); --panel-accent-rgb:139,92,246; }
#history .cs-history-panel--today{ --panel-accent:var(--warning); --panel-accent-rgb:245,158,11; }

/* icon + date-tag header row — sits in normal flow, fully
   inside the card, so it can never get clipped by the panel's
   overflow:hidden (that was the earlier bug). */
#history .cs-history-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

#history .cs-history-marker{
    width:36px;
    height:36px;
    min-width:36px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, rgba(var(--panel-accent-rgb),.9), rgba(var(--panel-accent-rgb),.55));
    box-shadow:0 6px 16px rgba(var(--panel-accent-rgb),.35);
    color:#fff;
}

#history .cs-history-marker svg{
    width:18px;
    height:18px;
    display:block;
    stroke:#fff;
}

#history .cs-history-head .cs-history-tag{
    margin-bottom:0;
    margin-top:0;
}

#history .cs-history-ghost{
    position:absolute;
    right:14px;
    top:-10px;
    font-family:var(--font-display);
    font-weight:800;
    font-size:84px;
    line-height:1;
    color:rgba(var(--panel-accent-rgb),.10);
    pointer-events:none;
    user-select:none;
    transition:color .35s ease;
}

#history .cs-history-panel:hover .cs-history-ghost{
    color:rgba(var(--panel-accent-rgb),.16);
}

#history .cs-history-tag{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.02em;
    color:var(--panel-accent);
    margin-bottom:14px;
    margin-top:6px;
}

#history .cs-history-tag::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--panel-accent);
    box-shadow:0 0 8px rgba(var(--panel-accent-rgb),.7);
}

#history .cs-history-tag--accent{
    color:var(--primary);
}

#history .cs-history-panel h3{
    position:relative;
    font-size:1.28rem;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--gray-900);
    margin-bottom:12px;
}

#history .cs-history-panel p{
    position:relative;
    color:var(--gray-500);
    font-size:.98rem;
    line-height:1.7;
    max-width:48ch;
}

/* Asymmetric placement — a deliberate editorial layout, not a
   repeating card grid. */
#history .cs-history-panel--founding{ grid-column:1 / 8; }
#history .cs-history-panel--boom{ grid-column:8 / 13; }
#history .cs-history-panel--ched{ grid-column:1 / 6; }
#history .cs-history-panel--today{ grid-column:6 / 13; }

#history .cs-history-panel--mission{
    grid-column:1 / 13;
    display:grid;
    grid-template-columns:1.4fr auto 1fr;
    align-items:center;
    gap:40px;
    background:
        radial-gradient(120% 220% at 0% 0%, rgba(62,123,250,.16), transparent 55%),
        radial-gradient(120% 220% at 100% 100%, rgba(139,92,246,.14), transparent 55%),
        var(--surface);
    border-color:rgba(62,123,250,.28);
}

#history .cs-history-panel--mission::before{
    background:linear-gradient(90deg, var(--primary), var(--cyan) 50%, var(--violet));
    opacity:1;
}

#history .cs-history-mission-copy p{
    max-width:44ch;
    margin-top:2px;
}

#history .cs-history-divider{
    width:1px;
    align-self:stretch;
    background:linear-gradient(to bottom, transparent, var(--line-hi) 20%, var(--line-hi) 80%, transparent);
}

#history .cs-history-stats{
    display:flex;
    gap:36px;
}

#history .cs-history-stat-number{
    display:block;
    font-family:var(--font-display);
    font-size:2.3rem;
    font-weight:800;
    line-height:1;
    margin-bottom:8px;
    background:linear-gradient(135deg,#fff, var(--cyan));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

#history .cs-history-stat:nth-child(2) .cs-history-stat-number{
    background:linear-gradient(135deg,#fff, var(--violet));
    -webkit-background-clip:text;
    background-clip:text;
}

#history .cs-history-stat-label{
    font-size:.82rem;
    color:var(--gray-500);
}

@media (max-width: 860px){
    #history .cs-history-grid{ grid-template-columns:1fr; }
    #history .cs-history-panel--founding,
    #history .cs-history-panel--boom,
    #history .cs-history-panel--ched,
    #history .cs-history-panel--today,
    #history .cs-history-panel--mission{ grid-column:1 / -1; }
    #history .cs-history-panel--mission{
        grid-template-columns:1fr;
        text-align:left;
    }
    #history .cs-history-divider{ display:none; }
    #history .cs-history-stats{ margin-top:8px; }
    #history .cs-history-panel:hover{ transform:none; }
}

@media (prefers-reduced-motion: reduce){
    #history .cs-history-panel{
        animation:none !important;
        opacity:1;
        transform:none;
    }
}