/*
 * /intro – timeline rail
 * The scale uses the full grid-column height, so its milestone dots remain
 * aligned with the centres of the cards instead of being compressed into a
 * viewport-sized sticky panel.
 */
@media (min-width: 621px) {
  /* A longer, more organic colour journey behind the story cards. */
  body.page-id-364 .smyda-story {
    background:
      radial-gradient(ellipse 72% 26% at 8% 3%, rgba(238, 193, 112, .18) 0%, transparent 72%),
      radial-gradient(ellipse 64% 30% at 96% 31%, rgba(150, 71, 38, .24) 0%, transparent 74%),
      radial-gradient(ellipse 75% 32% at 10% 70%, rgba(113, 104, 47, .28) 0%, transparent 76%),
      radial-gradient(ellipse 64% 28% at 94% 92%, rgba(102, 42, 28, .20) 0%, transparent 76%),
      linear-gradient(180deg, rgba(29, 35, 23, .88) 0%, rgba(74, 67, 34, .76) 29%, rgba(48, 40, 27, .72) 57%, rgba(45, 55, 34, .80) 78%, rgba(24, 29, 21, .90) 100%),
      url("https://smyda.at/wp-content/uploads/2026/09/milestone_bg_rock-scaled.webp") center center / cover no-repeat !important;
    /* Scroll with the page: fixed attachment on a 4,000px section is costly on some GPUs. */
    background-attachment: scroll !important;
  }

  .smyda-timeline {
    align-items: stretch !important;
  }

  .smyda-timeline__rail-wrap {
    position: relative !important;
    align-self: stretch !important;
    min-height: 100% !important;
  }

  .smyda-timeline__rail-wrap::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 16px;
    width: 1px;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(238, 193, 112, 0.32) 0%,
      rgba(245, 133, 73, 0.22) 52%,
      rgba(255, 247, 231, 0.12) 100%
    );
  }

  .smyda-timeline__rail {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .smyda-timeline__rail-label {
    position: absolute;
    top: -28px;
    left: 0;
    z-index: 2;
    margin: 0 !important;
    white-space: nowrap;
  }

  .smyda-timeline__line {
    top: var(--smyda-progress-start, 0px) !important;
    right: auto;
    bottom: var(--smyda-progress-end, 0px) !important;
    left: 16px !important;
    background: rgba(255, 247, 231, 0.10) !important;
  }

  .smyda-timeline__dates {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
  }

  .smyda-timeline__date {
    position: absolute !important;
    left: 0;
    min-height: 30px;
    transform: translateY(-50%) !important;
  }

  .smyda-timeline__date.is-active {
    transform: translate(8px, -50%) !important;
  }

  .smyda-timeline__minor-tick {
    position: absolute;
    z-index: 1;
    left: 11px;
    width: 11px;
    height: 1px;
    pointer-events: none;
    background: rgba(255, 247, 231, 0.30);
    box-shadow: 0 0 8px rgba(238, 193, 112, 0.10);
    transform: translateY(-50%);
  }
}

/* Mobile: cards may still rise in softly, but their real colours are visible immediately. */
@media (max-width: 620px) {
  body.page-id-364 .smyda-milestone,
  body.page-id-364 .smyda-milestone.is-visible,
  body.page-id-364 .smyda-milestone.is-active,
  body.page-id-364 .smyda-milestone.is-past {
    opacity: 1 !important;
    filter: none !important;
  }

  body.page-id-364 .smyda-milestone:not(.is-visible):not(.is-active):not(.is-past) {
    transform: translate3d(0, 18px, 0) scale(.992) !important;
  }
}