/* ============================================
   Noor — Work rail (horizontal pinned scroll gallery)
   Desktop: GSAP ScrollTrigger pins the section and scrubs
   the track horizontally as the user scrolls vertically.
   Mobile / reduced-motion: native horizontal scroll-snap —
   same visual language, touch-native trigger instead of a pin.
   ============================================ */

.work-rail__pin {
  position: relative;
  /* Full viewport height while pinned — anything shorter leaves a gap below
     it (viewport height minus this), and since the footer is the very next
     element in the document, it creeps into that gap and starts rising
     into view well before the horizontal scroll actually finishes. */
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  --rail-light-color: var(--accent-current);
}

/* The band lives inside the pin now — the pin (and the scroll stop) starts
   at the band's own top edge, so it's always in full view when it freezes. */
.work-rail__pin > .landing-works__band {
  flex: 0 0 auto;
}

.work-rail__track {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: var(--gutter);
  padding-left: var(--edge-margin);
  padding-right: var(--edge-margin);
  will-change: transform;
}

/* --- Card --- */

.work-rail__card {
  position: relative;
  flex: 0 0 auto;
  width: min(74vw, 860px);
  height: 100%;
}

.work-rail__card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--space-md);
  text-decoration: none;
  color: var(--surface-text);
}

.work-rail__card-link:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 4px;
  border-radius: var(--radius-card);
}

/* Meta comes first in both DOM and layout — always above the image and the light */
.work-rail__media {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  transition: filter 0.5s ease;
}

.work-rail__card:not([data-active="true"]) .work-rail__media {
  filter: brightness(0.5) saturate(0.85);
}

.work-rail__img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  will-change: transform, opacity;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-rail__img-tag {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.work-rail__img--base {
  z-index: 1;
}

.work-rail__img--accent {
  z-index: 2;
  opacity: 0.5;
  mix-blend-mode: soft-light;
}

.work-rail__card:not([data-active="true"]) .work-rail__img {
  transform: scale(1.06);
}

/* --- Meta (index + title + desc) — fixed neutral color, never tinted --- */

.work-rail__meta {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  column-gap: var(--space-md);
  padding: 0 var(--space-xs);
  overflow: hidden;
}

.work-rail__index {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  line-height: 1;
  color: var(--rail-light-color);
  will-change: opacity;
}

.work-rail__title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: 1.15;
  color: var(--surface-text);
}

.work-rail__desc {
  grid-column: 2;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--surface-text);
  opacity: 0.5;
  max-width: 42ch;
}

/* --- Progress: one segment per project, filling like a tube of liquid as
   its project comes into view. Sits clear of the cards in its own row —
   never overlapping the images. --- */

.work-rail__progress {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-md) var(--edge-margin) 0;
  pointer-events: none;
}

.work-rail__progress-segment {
  position: relative;
  flex: 1 1 0;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.work-rail__progress-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: inherit;
  background: var(--rail-light-color);
  /* --glow (0–1) is set per-frame in JS, based on distance from the current
     scroll position — a continuous falloff across neighboring segments
     instead of a hard on/off, so the light reads as a trail, not a switch. */
  --glow: 0;
  opacity: 0.1;
  box-shadow:
    0 0 calc(8px * var(--glow)) calc(1px * var(--glow)) var(--rail-light-color),
    0 0 calc(20px * var(--glow)) calc(4px * var(--glow)) color-mix(in srgb, var(--rail-light-color) 55%, transparent);
  will-change: transform, opacity, filter;
  transition: background 0.5s ease;
}

/* --- Reduced motion + mobile: native horizontal scroll-snap, no pin --- */

@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .work-rail__pin {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding-bottom: var(--space-lg);
  }

  .work-rail__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transform: none !important;
  }

  .work-rail__track::-webkit-scrollbar {
    display: none;
  }

  .work-rail__card {
    width: 84vw;
    height: auto;
    scroll-snap-align: center;
  }

  .work-rail__media {
    flex: 0 0 auto;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 480px) {
  .work-rail__card {
    width: 90vw;
  }

  .work-rail__index {
    font-size: clamp(2.25rem, 12vw, 3.25rem);
  }

  .work-rail__desc {
    max-width: 32ch;
  }
}