/* =========================================================
Work Experience — Vertical Timeline (newest first)
========================================================= */

/* One full screen below header */
.work{
  min-height: calc(100dvh - var(--header-h, 56px)); /* was height: */
  overflow: visible; /* or overflow-y: auto if you want inner scrolling */
}

.work .section-title{ text-align:center; margin:0 0 12px; font-weight:800; }

/* Tokens */
.work{
--rail-w: 28px;
--date-w: 160px;
--col-gap: 18px;
--row-gap: 28px;
--spine-w: 2px;
--dot-size: 12px;
--dot-ring-w: 4px;
--bridge-w: 2px;
--bridge-overlap: 1px;
--logo-size: 64px;
--fg: var(--exp-text);
--dim: var(--exp-muted);
--spine: var(--exp-spine);
--bridge: var(--exp-bridge);
--dot: var(--exp-dot);
--dot-ring: var(--exp-dot-ring);
--bg: transparent;
}

/* Timeline container */
.timeline{
list-style: none;
margin: 0 auto;
padding: 0 16px;
max-width: 1100px;
position: relative;
display: grid;
row-gap: var(--row-gap);
overflow: visible;
}



/* Vertical spine - base WHITE line (full opacity) */
.timeline::before{
content: "";
position: absolute;
left: calc(16px + (var(--rail-w) - var(--spine-w)) / 2);
top: calc(var(--dot-size) / 2);
bottom: calc(var(--dot-size) / 2);
width: var(--spine-w);
background: var(--spine);
opacity: 1;
z-index: 0;
}

/* =========================================================
   PROGRESS BAR - Red fill that grows as you scroll
   Uses a pixel-based height set by JavaScript
========================================================= */
.timeline::after {
content: "";
position: absolute;
left: calc(16px + (var(--rail-w) - var(--spine-w)) / 2);
top: calc(var(--dot-size) / 2);
width: var(--spine-w);
height: var(--progress-height, 0px);
background: var(--accent);
z-index: 1;
transition: height 0.08s linear;
box-shadow: 0 0 10px 2px var(--accent-glow-strong);
}

/* Hide the per-item spine segments */
.t-rail::after {
display: none;
}

/* Item layout: 3 columns, 2 rows */
.t-item{
display: grid;
grid-template-columns: var(--rail-w) var(--date-w) 1fr;
grid-template-rows: auto auto;
column-gap: var(--col-gap);
align-items: start;
position: relative;
}

/* ---- RAIL: cell that aligns dot to spine perfectly ---- */
.t-rail{
grid-column: 1;
grid-row: 1 / span 2;
position: relative;
}

/* Dot centered on the rail cell */
.t-dot{
position: absolute;
left: 50%;
top: 0;
width: var(--dot-size);
height: var(--dot-size);
border-radius: 50%;
background: var(--dot);
box-shadow: 0 0 0 var(--dot-ring-w) var(--dot-ring);
transform: translateX(-50%);
z-index: 2;
transition: background .4s ease, box-shadow .4s ease, transform .3s ease, opacity .4s ease;
}

/* =========================================================
   DOT PULSE ANIMATION - All red dots pulse
========================================================= */

/* PAST dots: red with pulsing glow */
.t-item.is-past .t-dot {
background: var(--accent) !important;
box-shadow: 
  0 0 0 var(--dot-ring-w) var(--accent-light),
  0 0 12px 4px var(--accent-glow) !important;
animation: dot-pulse 2s ease-in-out infinite !important;
opacity: 1 !important;
}

/* ACTIVE dot: red with pulsing glow */
.t-item.is-active .t-dot {
background: var(--accent) !important;
box-shadow: 
  0 0 0 var(--dot-ring-w) var(--accent-light),
  0 0 12px 4px var(--accent-glow) !important;
animation: dot-pulse 2s ease-in-out infinite !important;
opacity: 1 !important;
}

@keyframes dot-pulse {
0%, 100% {
  box-shadow: 
    0 0 0 var(--dot-ring-w) var(--accent-light),
    0 0 12px 4px var(--accent-glow);
  transform: translateX(-50%) scale(1);
}
50% {
  box-shadow: 
    0 0 0 calc(var(--dot-ring-w) + 2px) var(--accent-glow-intense),
    0 0 20px 8px var(--accent-glow-strong);
  transform: translateX(-50%) scale(1.15);
}
}

/* FUTURE dots: fully WHITE (not grayed out) */
.t-item.is-future .t-dot {
background: var(--dot) !important;
opacity: 1 !important;
box-shadow: 0 0 0 var(--dot-ring-w) var(--dot-ring) !important;
animation: none !important;
}

/* Reduced motion: disable pulse animation */
@media (prefers-reduced-motion: reduce) {
.t-item.is-active .t-dot {
  animation: none;
  transform: translateX(-50%);
}
}

/* Bridge */
.t-bridge{
position: absolute;
left: calc(
(var(--rail-w) / 2) + (var(--dot-size) / 2) + var(--dot-ring-w) - var(--bridge-overlap)
);
top: calc(var(--dot-size) / 2 - var(--bridge-w) / 2);
width: calc(
(var(--rail-w) / 2) + var(--col-gap) - (var(--dot-size) / 2) - var(--dot-ring-w) + var(--bridge-overlap)
);
height: 0;
border-top: var(--bridge-w) solid var(--bridge);
opacity: .9;
pointer-events: none;
z-index: 1;
transition: border-color .4s ease, opacity .4s ease;
}

/* =========================================================
   SEQUENTIAL HIGHLIGHT - Bridge states
   RED = already scrolled past (progress made)
========================================================= */

/* PAST bridge: RED (progress already made) */
.t-item.is-past .t-bridge {
border-top-color: var(--accent);
opacity: 0.8;
}

/* ACTIVE bridge: red accent (current position) */
.t-item.is-active .t-bridge {
border-top-color: var(--accent);
opacity: 1;
}

/* FUTURE bridge: dashed and faint */
.t-item.is-future .t-bridge {
border-top-style: dashed;
border-top-color: var(--bridge);
opacity: 0.25;
}

/* Date beside dot */
.t-date{
grid-column: 2;
grid-row: 1;
align-self: start;
transform: translateY(calc(var(--dot-size)/2 - 50%));
font-weight: 600;
color: var(--dim);
white-space: nowrap;
position: relative;
z-index: 2;
line-height: 1.2;
}

/* Header: logo + meta */
.t-head{
grid-column: 3;
grid-row: 1;
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 12px;
align-items: start;
margin: 0 0 6px;
}

/* Logo box */
.t-logo{
width: var(--logo-size);
height: var(--logo-size);
border-radius: 8px;
overflow: hidden;
display: grid;
place-items: center;
background: var(--exp-logo-bg);
border: 0px dashed var(--exp-logo-border);
}

.t-logo img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

/* Meta */
.t-meta{ display: flex; flex-direction: column; min-width: 0; }

/* Long names: clamp to two lines */
.t-company{
margin: 0;
font-size: 1.08rem;
line-height: 1.2;
color: var(--fg);
font-weight: 800;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}

/* Location row */
.t-location{
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
color: var(--dim);
font-size: .95rem;
}

.t-location .t-pin{
width: 14px;
height: 14px;
flex: 0 0 14px;
object-fit: contain;
}

.t-location .pin{ display: none !important; }

/* Optional role line */
.t-role{
margin: 6px 0 0;
color: var(--dim);
font-weight: 500;
font-size: .95rem;
}

/* Bullets */
.t-body{ grid-column: 3; grid-row: 2; }

.t-points{
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
color: var(--fg);
}

.t-points li{
position: relative;
margin: 0;
padding-left: 1.05rem;
line-height: 1.4;
}

.t-points li::before{
content: "";
position: absolute;
left: 0.25rem;
top: 0.7em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dim);
transform: translateY(-50%);
}

/* Responsive */
@media (max-width: 900px){
.work{ --rail-w: 26px; --date-w: 140px; --logo-size: 56px; }
}

@media (max-width: 700px){
.work{ --rail-w: 24px; --date-w: 120px; --dot-size: 10px; --logo-size: 48px; }

.t-item{
grid-template-columns: var(--rail-w) 1fr;
row-gap: 8px;
}

.t-bridge{ display: none; }

.t-date{
grid-column: 2; grid-row: 1;
transform: none;
align-self: start;
margin-top: -2px;
}

.t-head, .t-body{ grid-column: 2; }
}