/* Career chapters: one card per scroll, with a compact progress cue. */
.experience-screens {
  position: relative;
  overflow: clip;
}
.work-screen {
  position: relative;
  isolation: isolate;
  scroll-snap-stop: always;
  border-top-color: transparent;
}
.work-screen::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -22%;
  top: 14%;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--brand-rgb), 0.07),
    transparent 67%
  );
  opacity: 0;
  transform: translate3d(90px, 35px, 0) scale(0.82);
  transition:
    opacity 0.9s ease-out,
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-screen.is-current::after {
  opacity: 1;
  transform: none;
}
.work-screen .experience-stage {
  position: relative;
  padding-left: 0;
}
.journey-kicker {
  width: 100%;
  min-height: 12px;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.journey-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--brand) 62%, var(--border));
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.05);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s ease-out,
    box-shadow 0.45s ease-out;
}
.journey-kicker::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  margin-left: 3px;
  background: linear-gradient(
    90deg,
    rgba(var(--brand-rgb), 0.5),
    var(--border) 34%,
    transparent
  );
  transform: scaleX(0.18);
  transform-origin: left;
  opacity: 0.5;
}
.journey-kicker span {
  font-size: 10px;
  letter-spacing: 0.08em;
}
.journey-kicker strong {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.11em;
  color: color-mix(in srgb, var(--brand) 58%, var(--secondary));
}
.work-screen.is-current .journey-kicker::before {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow:
    0 0 0 4px rgba(var(--brand-rgb), 0.08),
    0 0 18px rgba(var(--brand-rgb), 0.16);
  transform: scale(1.12);
}
.work-screen.is-past .journey-kicker::before {
  background: color-mix(in srgb, var(--brand) 52%, var(--bg));
}
.work-screen .experience-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .screens-ready .work-screen .experience-stage .experience-card {
    opacity: 0;
    transition: none;
  }
  .screens-ready
    .work-screen:nth-child(odd)
    .experience-stage.is-present
    .experience-card {
    animation: journey-arrive-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .screens-ready
    .work-screen:nth-child(even)
    .experience-stage.is-present
    .experience-card {
    animation: journey-arrive-left 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .experience-stage.is-present .journey-kicker {
    animation: journey-label 0.68s 0.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .experience-stage.is-present .journey-kicker::after {
    animation: journey-line 0.9s 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .experience-stage.is-present .experience-head {
    animation: journey-detail 0.72s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .experience-stage.is-present .experience-summary {
    animation: journey-detail 0.76s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .experience-stage.is-present .experience-card details {
    animation: journey-detail 0.8s 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .experience-stage.is-present .experience-foot {
    animation: journey-detail 0.76s 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}
@keyframes journey-arrive-right {
  from {
    opacity: 0;
    transform: translate3d(92px, 64px, 0) rotateY(-7deg) rotateZ(1deg)
      scale(0.93);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes journey-arrive-left {
  from {
    opacity: 0;
    transform: translate3d(-92px, 64px, 0) rotateY(7deg) rotateZ(-1deg)
      scale(0.93);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes journey-label {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes journey-line {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 0.5;
    transform: scaleX(1);
  }
}
@keyframes journey-detail {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.motion-paused .journey-kicker,
.motion-paused .journey-kicker::after,
.motion-paused .experience-card details {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
@media (max-width: 720px) {
  .journey-kicker {
    margin-bottom: 15px;
  }
  .journey-kicker::after {
    background: linear-gradient(
      90deg,
      rgba(var(--brand-rgb), 0.42),
      transparent
    );
  }
}
@media (prefers-reduced-motion: reduce) {
  .journey-kicker::before,
  .work-screen::after {
    transition: none;
  }
  .work-screen::after {
    display: none;
  }
}