@layer blocks {
  /* ==========================================================================
     Timeline — left-aligned vertical timeline for career stages
     ========================================================================== */

  /* ----------------------------------------
     Container — anchors line + dots
  ---------------------------------------- */
  .timeline {
    --timeline-line-width: 2px;
    --timeline-dot-size: 14px;
    --timeline-gutter: var(--space-xl);
    --timeline-line-progress: 0;
    --timeline-accent-progress: 0;

    position: relative;
    padding-left: calc(var(--timeline-dot-size) / 2 + var(--timeline-gutter));
  }

  /* Vertical line — base track */
  .timeline::before {
    content: '';
    position: absolute;
    left: calc(var(--timeline-dot-size) / 2 - var(--timeline-line-width) / 2);
    top: 0;
    bottom: 0;
    width: var(--timeline-line-width);
    background: var(--color-border);
    transform: scaleY(var(--timeline-line-progress));
    transform-origin: top;
  }

  /* Accent gradient overlay — GSAP scrubs with scroll */
  .timeline::after {
    content: '';
    position: absolute;
    left: calc(var(--timeline-dot-size) / 2 - var(--timeline-line-width) / 2);
    top: 0;
    bottom: 0;
    width: var(--timeline-line-width);
    background: var(--gradient-accent);
    transform: scaleY(var(--timeline-accent-progress));
    transform-origin: top;
  }

  /* ----------------------------------------
     Dot — positioned at left edge
  ---------------------------------------- */
  .timeline-dot {
    position: absolute;
    left: calc(-1 * var(--timeline-gutter) - var(--timeline-dot-size) / 2);
    top: var(--space-lg);
    width: var(--timeline-dot-size);
    height: var(--timeline-dot-size);
    border-radius: 50%;
    border: var(--timeline-line-width) solid var(--color-border);
    background: var(--color-bg);
    transition:
      border-color var(--duration-normal) var(--ease-out-expo),
      background-color var(--duration-normal) var(--ease-out-expo),
      box-shadow var(--duration-normal) var(--ease-out-expo);
  }

  .timeline-dot[data-revealed] {
    border-color: var(--color-accent);
    background: var(--color-accent);
    box-shadow: 0 0 12px var(--color-glow);
  }

  /* ----------------------------------------
     Node — each timeline entry
  ---------------------------------------- */
  .timeline-node {
    position: relative;
    padding-bottom: var(--space-2xl);
  }

  .timeline-node:last-child {
    padding-bottom: 0;
  }

  /* ----------------------------------------
     Details / Summary — expand/collapse
  ---------------------------------------- */
  .timeline-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition:
      border-color var(--duration-normal) ease,
      box-shadow var(--duration-normal) ease;
  }

  .timeline-content[open] {
    border-color: var(--color-accent);
    box-shadow: 0 0 20px var(--color-glow);
  }

  .timeline-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-lg);
    cursor: pointer;
    list-style: none;
  }

  .timeline-summary::-webkit-details-marker {
    display: none;
  }

  .timeline-summary::marker {
    display: none;
    content: '';
  }

  .timeline-summary:hover {
    background: var(--color-surface-raised);
    border-radius: var(--radius-lg);
  }

  .timeline-summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
    border-radius: var(--radius-lg);
  }

  .timeline-content[open] .timeline-summary:hover {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  /* Chevron — pushed to the right */
  .timeline-chevron {
    width: 20px;
    height: 20px;
    margin-left: auto;
    color: var(--color-text-muted);
    transition: transform var(--duration-normal) var(--ease-out-expo);
    flex-shrink: 0;
  }

  .timeline-content[open] .timeline-chevron {
    transform: rotate(180deg);
  }

  /* Period — mono accent, forces own line */
  .timeline-period {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    width: 100%;
    order: -1;
  }

  /* Role title */
  .timeline-role {
    font-size: var(--font-size-h4);
    font-weight: 700;
    color: var(--color-text);
  }

  /* Company name */
  .timeline-company {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  /* ----------------------------------------
     Details panel — inner content
  ---------------------------------------- */
  .timeline-details {
    padding: 0 var(--space-lg) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .timeline-description {
    color: var(--color-text-muted);
    line-height: 1.6;
  }

  /* ----------------------------------------
     Section headings within details
  ---------------------------------------- */
  .timeline-projects-heading,
  .timeline-skills-heading {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: var(--space-sm);
  }

  /* ----------------------------------------
     Projects list
  ---------------------------------------- */
  .timeline-project-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .timeline-project {
    padding: var(--space-md);
    background: var(--color-surface-raised);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .timeline-project-name {
    color: var(--color-text);
    font-size: var(--font-size-base);
  }

  .timeline-project-desc {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
  }

  /* ----------------------------------------
     Tags
  ---------------------------------------- */
  .timeline-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
  }

  .timeline-tag {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    font-size: 0.8rem;
    font-family: var(--font-mono);
    border-radius: var(--radius-sm);
  }

  /* ----------------------------------------
     Links section
  ---------------------------------------- */
  .timeline-links {
    margin-top: var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
  }

  /* Availability badge */
  .timeline-availability {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: hsl(142deg 71% 45% / 0.1);
    border: 1px solid hsl(142deg 71% 45% / 0.35);
    color: var(--color-success);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
  }

  .timeline-availability::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
    flex-shrink: 0;
    animation: timeline-pulse 2s ease-in-out infinite;
  }

  /* External links row */
  .timeline-external-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .timeline-ext-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition:
      border-color var(--duration-normal) ease,
      color var(--duration-normal) ease;
    min-height: 44px;
  }

  .timeline-ext-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .timeline-ext-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .timeline-ext-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  /* ----------------------------------------
     Loading state
  ---------------------------------------- */
  .timeline[data-state='loading'] {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .timeline[data-state='error'] {
    min-height: 100px;
  }

  .timeline-skeleton {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .timeline-skeleton-node {
    height: 80px;
    border-radius: var(--radius-lg);
    background: linear-gradient(
      90deg,
      var(--color-surface) 25%,
      var(--color-surface-raised) 50%,
      var(--color-surface) 75%
    );
    background-size: 200% 100%;
    animation: timeline-shimmer 1.5s ease-in-out infinite;
  }

  /* ----------------------------------------
     Responsive
  ---------------------------------------- */
  @media (width <= 480px) {
    .timeline {
      --timeline-gutter: var(--space-md);
    }

    .timeline-summary {
      padding: var(--space-md);
    }

    .timeline-details {
      padding: 0 var(--space-md) var(--space-md);
    }
  }

  @media (width >= 768px) {
    .timeline {
      --timeline-gutter: var(--space-2xl);
    }
  }

  /* ----------------------------------------
     Keyframes
  ---------------------------------------- */
  @keyframes timeline-pulse {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0.4;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes timeline-shimmer {
    from {
      background-position: 200% 0;
    }

    to {
      background-position: -200% 0;
    }
  }
}