.info-page--experience {
  --experience-surface: rgba(255, 255, 255, .035);
  --experience-surface-strong: rgba(255, 255, 255, .06);
}

.info-page--experience .experience-links {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  margin-bottom: clamp(2.2rem, 5vw, 4rem) !important;
  font-size: .9rem;
}

.info-page--experience .experience-links a {
  color: var(--color-primary);
  font-weight: 600;
  text-underline-offset: .25em;
}

.info-page--experience .experience-links a:hover,
.info-page--experience .experience-links a:focus-visible {
  color: var(--color-text-primary) !important;
}

.experience-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
  border-top: 1px solid var(--color-border-secondary);
  border-bottom: 1px solid var(--color-border-secondary);
}

.experience-overview__item {
  display: flex;
  flex-direction: column;
  min-height: 8.2rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border-right: 1px solid var(--color-border-primary);
}

.experience-overview__item:last-child { border-right: 0; }

.experience-overview__index,
.experience-section-heading__eyebrow {
  color: var(--color-primary);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.experience-overview__index { margin-bottom: auto; }

.experience-overview__item strong {
  color: var(--color-text-primary);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: -.02em;
}

.experience-overview__item small {
  max-width: 13rem;
  margin-top: .3rem;
  color: var(--color-text-muted);
  font-size: .75rem;
  line-height: 1.45;
}

.experience-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.8rem;
}

.experience-section-heading__eyebrow { margin: 0 0 .6rem; }

.experience-section-heading h2 {
  margin: 0;
  color: var(--color-text-primary) !important;
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  letter-spacing: -.045em;
}

.experience-section-heading > p {
  max-width: 22rem;
  margin: 0 0 .15rem;
  color: var(--color-text-muted);
  font-size: .85rem;
  line-height: 1.65;
  text-align: right;
}

.info-page--experience .timeline {
  display: flex;
  flex-direction: column;
  padding: .2rem 0 0;
}

.info-page--experience .timeline-item--active { order: -1; }

.info-page--experience .timeline-item--active .timeline-content .card {
  position: relative;
  border-color: rgba(var(--color-primary-rgb), .58);
  background: linear-gradient(140deg, rgba(var(--color-primary-rgb), .16), var(--experience-surface));
  box-shadow: 0 18px 46px rgba(var(--color-primary-rgb), .14), 0 12px 30px rgba(0, 0, 0, .16);
}

.info-page--experience .timeline-item--active .timeline-content .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--color-primary);
  opacity: .9;
}

.info-page--experience .timeline::before {
  left: .7rem;
  top: var(--experience-marker-center, 1.95rem);
  bottom: .65rem;
  width: 1px;
  background: linear-gradient(to bottom, rgba(var(--color-primary-rgb), .9), var(--color-border-primary) 35%, transparent);
}

.info-page--experience .timeline-progress {
  position: absolute;
  z-index: 3;
  top: var(--experience-marker-center, 1.95rem);
  bottom: .65rem;
  left: calc(.7rem + .5px);
  width: 2px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(var(--color-primary-rgb), .15), var(--color-primary));
}

.info-page--experience .timeline-progress__head {
  position: absolute;
  top: -.2rem;
  left: 50%;
  width: .58rem;
  height: .58rem;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  border-radius: 0;
  color: var(--color-primary);
  filter: drop-shadow(0 0 5px rgba(var(--color-primary-rgb), .45));
  transform: translateX(-50%) translateY(var(--experience-head-offset, 0px)) rotate(-135deg);
  opacity: 0;
  transition: opacity .16s ease, transform .16s linear;
}

.info-page--experience .timeline-progress__head--current { z-index: 3; }
.info-page--experience .timeline-progress__head--trail-one { z-index: 2; }
.info-page--experience .timeline-progress__head--trail-two { z-index: 1; }

.info-page--experience .timeline-progress__burst {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  width: 4.5rem;
  height: 4.5rem;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.16);
  will-change: transform, opacity;
}

.info-page--experience .timeline-progress__burst::before {
  position: absolute;
  inset: .55rem;
  content: "";
  border: 2px solid rgba(var(--color-primary-rgb), .72);
  border-radius: 50%;
  box-shadow: 0 0 0 .35rem rgba(var(--color-primary-rgb), .12), 0 0 1.3rem rgba(var(--color-primary-rgb), .65);
  opacity: 0;
  transform: scale(.2);
}

.info-page--experience .timeline-progress__burst::after {
  position: absolute;
  inset: 1.65rem;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, var(--color-primary) 38%, rgba(var(--color-primary-rgb), .08) 72%, transparent 74%);
  box-shadow: 0 0 1rem rgba(var(--color-primary-rgb), .95), 0 0 2rem rgba(var(--color-primary-rgb), .62);
  opacity: 0;
  transform: scale(.2);
}

.info-page--experience .timeline-progress__spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .2rem;
  height: .95rem;
  border-radius: 999px;
  background: linear-gradient(to bottom, #fff, var(--color-primary) 42%, rgba(var(--color-primary-rgb), .15));
  box-shadow: 0 0 .45rem rgba(var(--color-primary-rgb), .75);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateY(-.6rem) scaleY(.2);
  transform-origin: 50% 0;
}

.info-page--experience .timeline-progress__spark:nth-child(1) { --spark-angle: 0deg; --spark-distance: 1.7rem; }
.info-page--experience .timeline-progress__spark:nth-child(2) { --spark-angle: 30deg; --spark-distance: 1.55rem; }
.info-page--experience .timeline-progress__spark:nth-child(3) { --spark-angle: 60deg; --spark-distance: 1.8rem; }
.info-page--experience .timeline-progress__spark:nth-child(4) { --spark-angle: 90deg; --spark-distance: 1.55rem; }
.info-page--experience .timeline-progress__spark:nth-child(5) { --spark-angle: 120deg; --spark-distance: 1.8rem; }
.info-page--experience .timeline-progress__spark:nth-child(6) { --spark-angle: 150deg; --spark-distance: 1.55rem; }
.info-page--experience .timeline-progress__spark:nth-child(7) { --spark-angle: 180deg; --spark-distance: 1.7rem; }
.info-page--experience .timeline-progress__spark:nth-child(8) { --spark-angle: 210deg; --spark-distance: 1.55rem; }
.info-page--experience .timeline-progress__spark:nth-child(9) { --spark-angle: 240deg; --spark-distance: 1.8rem; }
.info-page--experience .timeline-progress__spark:nth-child(10) { --spark-angle: 270deg; --spark-distance: 1.55rem; }
.info-page--experience .timeline-progress__spark:nth-child(11) { --spark-angle: 300deg; --spark-distance: 1.8rem; }
.info-page--experience .timeline-progress__spark:nth-child(12) { --spark-angle: 330deg; --spark-distance: 1.55rem; }

.info-page--experience .timeline-progress.has-arrived .timeline-progress__burst {
  animation: timeline-arrival-burst 1.08s cubic-bezier(.16, .84, .24, 1) both;
}

.info-page--experience .timeline-progress.has-arrived .timeline-progress__burst::before {
  animation: timeline-arrival-ring 1.08s cubic-bezier(.16, .84, .24, 1) both;
}

.info-page--experience .timeline-progress.has-arrived .timeline-progress__burst::after {
  animation: timeline-arrival-core .72s cubic-bezier(.16, .84, .24, 1) both;
}

.info-page--experience .timeline-progress.has-arrived .timeline-progress__spark {
  animation: timeline-arrival-spark .9s cubic-bezier(.16, .84, .24, 1) both;
}

@keyframes timeline-arrival-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.16) rotate(-20deg);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.94) rotate(6deg);
  }
  34% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) rotate(-4deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.28) rotate(24deg);
  }
}

@keyframes timeline-arrival-ring {
  0% { opacity: 0; transform: scale(.2); }
  18% { opacity: 1; transform: scale(.72); }
  100% { opacity: 0; transform: scale(1.18); }
}

@keyframes timeline-arrival-core {
  0% { opacity: 0; transform: scale(.2); }
  18% { opacity: 1; transform: scale(1.35); }
  42% { opacity: 1; transform: scale(.92); }
  100% { opacity: 0; transform: scale(.1); }
}

@keyframes timeline-arrival-spark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateY(-.6rem) scaleY(.2);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateY(-.95rem) scaleY(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateY(calc(-.75rem - var(--spark-distance))) scaleY(.45);
  }
}

.info-page--experience .timeline-progress.is-moving .timeline-progress__head--current {
  opacity: 1;
}

.info-page--experience .timeline-progress.is-moving.has-trail-one .timeline-progress__head--trail-one {
  opacity: .7;
  transform: translateX(-50%) translateY(calc(var(--experience-head-offset, 0px) + .85rem)) rotate(-135deg);
}

.info-page--experience .timeline-progress.is-moving.has-trail-two .timeline-progress__head--trail-two {
  opacity: .4;
  transform: translateX(-50%) translateY(calc(var(--experience-head-offset, 0px) + 1.7rem)) rotate(-135deg);
}

.info-page--experience .timeline-item {
  padding-left: 3.25rem;
  margin-bottom: 1.4rem;
}

.info-page--experience .timeline-marker {
  top: 1.35rem;
  left: .1rem;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-bg-primary);
  border: 1px solid rgba(var(--color-primary-rgb), .8);
  box-shadow: 0 0 0 5px rgba(var(--color-primary-rgb), .08);
}

.info-page--experience .timeline-marker::after {
  content: "";
  position: absolute;
  inset: .28rem;
  border-radius: 50%;
  background: var(--color-primary);
}

.info-page--experience .timeline-item--active .timeline-marker {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 5px rgba(var(--color-primary-rgb), .12), 0 0 24px rgba(var(--color-primary-rgb), .28);
  z-index: 1;
}

.info-page--experience .timeline-item--active .timeline-marker::before {
  content: "";
  position: absolute;
  inset: -.45rem;
  border: 1px solid rgba(var(--color-primary-rgb), .48);
  border-radius: 50%;
  animation: experience-marker-pulse 2.2s cubic-bezier(.22, .61, .36, 1) infinite;
}

.info-page--experience .timeline-item--active .timeline-marker::after {
  animation: experience-marker-beat 2.2s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(var(--color-primary-rgb), .7);
}

.info-page--experience .timeline-item--latest .timeline-marker {
  box-shadow: 0 0 0 5px rgba(var(--color-primary-rgb), .12), 0 0 22px rgba(var(--color-primary-rgb), .22);
}

.info-page--experience .timeline-content .card {
  overflow: hidden;
  border: 1px solid var(--color-border-primary);
  border-radius: 1rem;
  background: linear-gradient(140deg, var(--experience-surface-strong), var(--experience-surface));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
  transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.info-page--experience .timeline-content .card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--color-primary-rgb), .42);
  background: linear-gradient(140deg, rgba(var(--color-primary-rgb), .1), var(--experience-surface));
  box-shadow: 0 20px 42px rgba(0, 0, 0, .24);
}

.info-page--experience .timeline-item--latest .timeline-content .card {
  border-color: rgba(var(--color-primary-rgb), .38);
  background: linear-gradient(140deg, rgba(var(--color-primary-rgb), .12), var(--experience-surface));
}

.info-page--experience .timeline-content .card-body {
  padding: clamp(1.15rem, 2.4vw, 1.8rem);
}

.info-page--experience .experience-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .75rem;
  margin-bottom: .85rem;
}

.info-page--experience .badge {
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  padding: .5rem .7rem;
}

.info-page--experience .badge.bg-primary {
  background: var(--color-primary) !important;
  color: var(--color-text-primary) !important;
}

.info-page--experience .badge.bg-warning {
  background: var(--color-primary) !important;
  color: var(--color-text-primary) !important;
}

.info-page--experience .badge.bg-success,
.info-page--experience .badge.bg-info {
  background: var(--experience-surface-strong) !important;
  border-color: var(--color-border-secondary);
  color: var(--color-text-muted) !important;
}

.experience-card__status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .65rem;
  border: 1px solid rgba(var(--color-primary-rgb), .28);
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb), .08);
  color: var(--color-primary);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}

.experience-card__status-dot {
  width: .45rem;
  height: .45rem;
  flex: 0 0 .45rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .12), 0 0 10px currentColor;
}

@keyframes experience-marker-pulse {
  0% { transform: scale(.68); opacity: .85; }
  65%, 100% { transform: scale(1.38); opacity: 0; }
}

@keyframes experience-marker-beat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.18); }
  24% { transform: scale(1); }
  34% { transform: scale(1.1); }
  48% { transform: scale(1); }
}

.info-page--experience .card-title {
  margin-bottom: .55rem;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  letter-spacing: -.025em;
}

.info-page--experience .card-body > p.text-muted {
  display: flex;
  align-items: flex-start;
  gap: .25rem;
  margin-bottom: 1.15rem !important;
  color: var(--color-text-muted) !important;
  font-size: .82rem;
  line-height: 1.5;
}

.info-page--experience .card-body > p.text-muted i {
  flex: 0 0 auto;
  margin-top: .2rem;
  color: var(--color-primary);
}

.info-page--experience .card-body ul {
  display: grid;
  gap: .5rem;
  margin-bottom: 1.25rem !important;
  padding-left: 0;
  list-style: none;
}

.info-page--experience .card-body li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--color-text-muted);
  font-size: .86rem;
  line-height: 1.6;
}

.info-page--experience .card-body li::before {
  content: "";
  position: absolute;
  top: .65em;
  left: 0;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .1);
}

.info-page--experience .card-body li strong { color: var(--color-text-primary); }

.info-page--experience .bg-purple-subtle {
  background: rgba(var(--color-primary-rgb), .1) !important;
  border-color: rgba(var(--color-primary-rgb), .18);
  color: #9fb1ff !important;
}

/* Light theme: keep filled badges high-contrast and tags legible on white cards. */
html[data-theme="light"] .info-page--experience .badge.bg-primary,
html[data-theme="light"] .info-page--experience .badge.bg-warning {
  background: var(--color-primary) !important;
  border-color: rgba(var(--color-primary-rgb), .32);
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), .16);
}

html[data-theme="light"] .info-page--experience .badge.bg-success,
html[data-theme="light"] .info-page--experience .badge.bg-info {
  background: rgba(var(--color-primary-rgb), .06) !important;
  border-color: rgba(var(--color-primary-rgb), .2);
  color: #17339b !important;
}

html[data-theme="light"] .info-page--experience .bg-purple-subtle {
  background: rgba(var(--color-primary-rgb), .08) !important;
  border-color: rgba(var(--color-primary-rgb), .22);
  color: #17339b !important;
  box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), .03);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .info-page--experience .badge.bg-primary,
  html:not([data-theme="dark"]) .info-page--experience .badge.bg-warning {
    background: var(--color-primary) !important;
    border-color: rgba(var(--color-primary-rgb), .32);
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), .16);
  }

  html:not([data-theme="dark"]) .info-page--experience .badge.bg-success,
  html:not([data-theme="dark"]) .info-page--experience .badge.bg-info {
    background: rgba(var(--color-primary-rgb), .06) !important;
    border-color: rgba(var(--color-primary-rgb), .2);
    color: #17339b !important;
  }

  html:not([data-theme="dark"]) .info-page--experience .bg-purple-subtle {
    background: rgba(var(--color-primary-rgb), .08) !important;
    border-color: rgba(var(--color-primary-rgb), .22);
    color: #17339b !important;
    box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), .03);
  }
}

.experience-impact {
  border-top: 1px solid var(--color-border-secondary);
}

.experience-section-heading--impact { margin-bottom: 1.6rem; }

.experience-impact .card {
  border-color: var(--color-border-primary);
  border-radius: .85rem;
  background: var(--experience-surface);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.experience-impact .card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--color-primary-rgb), .4);
  background: var(--experience-surface-strong);
}

.experience-impact .card h3 {
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  letter-spacing: -.04em;
}

.experience-impact .card i { color: var(--color-primary) !important; }

@media (max-width: 767.98px) {
  .experience-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .experience-overview__item:nth-child(2) { border-right: 0; }
  .experience-overview__item:nth-child(-n + 2) { border-bottom: 1px solid var(--color-border-primary); }

  .experience-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: .7rem;
  }

  .experience-section-heading > p {
    max-width: 30rem;
    text-align: left;
  }

  .info-page--experience .timeline::before { left: .55rem; }

  .info-page--experience .timeline-progress {
    left: calc(.55rem + .5px);
  }

  .info-page--experience .timeline-item {
    padding-left: 2.35rem;
    margin-bottom: 1rem;
  }

  .info-page--experience .timeline-marker { left: 0; }

  .info-page--experience .timeline-content .card-body { padding: 1.05rem; }

  .info-page--experience .card-body li { font-size: .82rem; }

  .experience-impact .row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .info-page--experience .timeline-content .card,
  .experience-impact .card { transition: none; }

  .info-page--experience .timeline-item--active .timeline-marker::before,
  .info-page--experience .timeline-item--active .timeline-marker::after,
  .info-page--experience .timeline-progress { animation: none; }

  .info-page--experience .timeline-progress {
    opacity: 1;
    transition: none;
  }

  .info-page--experience .timeline-progress__head {
    transition: none;
  }

  .info-page--experience .timeline-progress__burst { animation: none !important; }
  .info-page--experience .timeline-progress__burst::before,
  .info-page--experience .timeline-progress__burst::after,
  .info-page--experience .timeline-progress__spark { animation: none !important; }

  .info-page--experience .timeline-content .card:hover,
  .experience-impact .card:hover { transform: none; }
}