/* ---------- Mobile base (default, no media query) ---------- */
.reference {
  position: relative;
  background: #0d0f1c;
  /* Mobile: card is ~5vh shorter than the full-width version to leave room
     for the neighbour slivers at both edges. 71.5vw x 1.2942 aspect lands at
     roughly 43vh tall on a typical handset. */
  --ref-focus-w: clamp(210px, 71.5vw, 380px);
  --ref-focus-h: calc(var(--ref-focus-w) * 642.4 / 496.4);
  --ref-thumb-w: calc(var(--ref-focus-w) * 0.35);
  --ref-thumb-h: calc(var(--ref-thumb-w) * 642.4 / 496.4);
  /* Also sets how much of each neighbour shows: the JS sizes each side mask
     to (focus edge - gap), so a wider gap means a narrower sliver. */
  --ref-gap: 1rem;
}

.reference__pin-wrap {
  position: relative;
}

.reference__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at center,
      transparent 25%,
      rgba(0, 0, 0, 0.18) 72%,
      rgba(0, 0, 0, 0.36) 100%
    ),
    linear-gradient(
      90deg,
      rgba(10, 12, 28, 0) 28%,
      rgba(10, 12, 28, 0.12) 48%,
      rgba(10, 12, 28, 0.65) 73%,
      rgba(10, 12, 28, 0.94) 100%
    ),
    radial-gradient(
      ellipse 55% 70% at 13% 52%,
      rgba(18, 30, 90, 0.32) 0%,
      rgba(12, 20, 65, 0.18) 38%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 75% 70% at 4% 112%,
      rgba(20, 35, 120, 0.76) 0%,
      rgba(15, 25, 90, 0.57) 28%,
      rgba(10, 18, 60, 0.3) 55%,
      transparent 82%
    ),
    #0d0f1c;
}

.reference__text {
  position: absolute;
  z-index: 3;
  /* Aligned to the focus card's left edge rather than the viewport margin,
     so the heading and the card share a starting line. The card is centred,
     so its left edge is half the viewport minus half its width. The laptop
     block below overrides both of these. */
  left: calc(50% - (var(--ref-focus-w) / 2));
  top: 13%;
  color: #fff;
  max-width: 260px;
  transition: opacity 1s ease;
}

.reference--exit .reference__text {
  opacity: 0;
}

.reference__title {
  margin: 0;
  font-family: "Archivo", "Arial Narrow Bold", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 1.3rem + 2.5vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
}

.reference__title-line--1 {
  opacity: 0.7;
  font-size: clamp(1.6rem, 1.3rem + 2.5vw, 1.75rem);
}

.reference__title-line--2 {
  opacity: 0.9;
  text-transform: none;
  font-size: clamp(1.6rem, 1.3rem + 2.5vw, 2rem);
}

.reference__thumbs {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  /* Visible at every width now. Each strip is clipped by its own mask, which
     reference-gallery.js sizes to the space between the focus card and the
     screen edge — so on a phone only a sliver of the previous/next image
     shows, running off the left and right edges. */
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  transition: transform 0.8s ease;
}

.reference__thumbs--left {
  left: 0;
}

.reference__thumbs--right {
  right: 0;
}

.reference--exit .reference__thumbs--left,
.reference--exit .reference__thumbs--right {
  transform: translateX(-100vw);
}

.reference__thumbs-track {
  display: flex;
  align-items: center;
  gap: var(--ref-gap);
  will-change: transform;
}

.reference__thumb {
  flex: none;
  width: var(--ref-thumb-w);
  aspect-ratio: 496.4 / 642.4;
  overflow: hidden;
  opacity: 0.85;
}

.reference__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reference__focus {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: var(--ref-focus-w);
  aspect-ratio: 496.4 / 642.4;
  overflow: hidden;
}

.reference__focus-line {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.reference__focus-line--top,
.reference__focus-line--bottom {
  left: 0;
  width: 100%;
  height: 1px;
  border-top: 1px dashed rgba(255, 255, 255, 0.8);
  transition: transform 0.7s ease;
}

.reference__focus-line--left,
.reference__focus-line--right {
  top: 0;
  width: 1px;
  height: 100%;
  border-left: 1px dashed rgba(255, 255, 255, 0.8);
  transition: transform 0.7s ease;
}

.reference__focus-line--top {
  top: 0;
  transform-origin: right center;
}

.reference__focus-line--right {
  right: 0;
  transform-origin: center bottom;
}

.reference__focus-line--bottom {
  bottom: 0;
  transform-origin: left center;
}

.reference__focus-line--left {
  left: 0;
  transform-origin: center top;
}

/* Each side contracts in sequence, like a frame unwinding. */
.reference--exit-lines .reference__focus-line--top {
  transform: scaleX(0);
  transition-delay: 0.3s;
}

.reference--exit-lines .reference__focus-line--right {
  transform: scaleY(0);
  transition-delay: 0.45s;
}

.reference--exit-lines .reference__focus-line--bottom {
  transform: scaleX(0);
  transition-delay: 0.6s;
}

.reference--exit-lines .reference__focus-line--left {
  transform: scaleY(0);
  transition-delay: 0.75s;
}

.reference__focus-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 6px solid #141210;
  pointer-events: none;
}

.reference__focus-track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.reference__focus-item {
  flex: none;
  width: 100%;
  height: 100%;
}

.reference__focus-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reference__about {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6%;
  pointer-events: none;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.reference--about-visible .reference__about {
  opacity: 1;
}

.reference__about-window {
  width: 100%;
  max-width: 560px;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.reference__about-text {
  will-change: transform;
}

.reference__about-text p {
  margin: 0 0 1.2em;
  font-size: clamp(1.05rem, 3.75vw, 1.69rem);
  line-height: 1.6;
  letter-spacing: -0.005em;
}

.reference__about-text p:last-child {
  margin-bottom: 0;
}

/* Each word starts dimmed and transitions its COLOR (not opacity) up to
   full contrast — see the text-reveal-by-scroll skill. */
.reveal-word {
  display: inline;
  color: rgba(255, 255, 255, 0.18);
  transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-word.is-revealed {
  color: rgba(255, 255, 255, 0.92);
}

.reveal-word.reveal-highlight.is-revealed {
  color: #c0392b;
}

.reference__dot {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  right: 0.75rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.reference__hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.4s ease;
}

.reference__hint-chevron {
  display: inline-block;
  animation: reference-bounce 1.6s ease-in-out infinite;
}

@keyframes reference-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ---------- Position indicator (narrow screens) ----------
   Stands in for the thumb strips, which only appear at laptop+. Sits just
   under the focus card; its offset is derived from --ref-focus-h so it
   follows the card at any size. */
.reference__counter {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(52% + (var(--ref-focus-h) / 2) + 1.1rem);
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: opacity 0.5s ease;
}

.reference__counter-current {
  color: #fff;
}

.reference__counter-sep,
.reference__counter-total {
  color: rgba(255, 255, 255, 0.45);
}

/* Leaves with the rest of the gallery furniture when the outro begins. */
.reference--exit .reference__counter {
  opacity: 0;
}

/* ---------- Narrow-screen about phase ----------
   There is no column beside the enlarged card on a phone, so the card goes
   full-bleed (see enlargedRect in reference-gallery.js) and the text rides
   over it. This scrim keeps the copy readable over whatever the photo
   happens to be; it is a child of .reference__about so it fades in and out
   with the text rather than sitting there during the image phase. */
@media (max-width: 1023px) {
  .reference__about::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(8, 9, 15, 0.62) 0%,
      rgba(8, 9, 15, 0.78) 45%,
      rgba(8, 9, 15, 0.88) 100%
    );
  }

  .reference__about-text p {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
    /* +2px on both ends of the desktop clamp (1.05rem/1.69rem -> 16.8px+2
       and 27.04px+2). Scoped to narrow screens so the -25% desktop sizing
       stays exactly as tuned. */
    font-size: clamp(1.175rem, 3.75vw, 1.815rem);
  }

  /* Narrower measure: ~5vh (about 42px on a 844px-tall handset) comes off
     the total column width, split between the two sides. The JS sets this
     box to the full sticky width and it is border-box, so the padding is
     what actually narrows the text — and because the measure pass and the
     render pass both go through this same element, the text height the
     scroll maths is built on stays correct automatically. */
  .reference__about {
    padding: 0 11.4%;
  }
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .reference {
    /* Still no thumb strips at this width, so the card stays dominant. */
    --ref-focus-w: clamp(340px, 58vw, 460px);
  }

  .reference__text {
    max-width: 320px;
  }
}

/* ---------- Laptop ---------- */
@media (min-width: 1024px) {
  .reference {
    --ref-focus-w: clamp(320px, 26vw, 420px);
    --ref-gap: 0.875rem;
  }

  .reference__text {
    left: 6%;
    top: auto;
    bottom: calc(50% + (var(--ref-thumb-h) / 2) + 20px);
  }

  /* Thumbs are on at all widths; from here up they are wide enough to give
     position context on their own, so the numeric indicator steps aside. */
  .reference__counter {
    display: none;
  }
}

/* ---------- Desktop ---------- */
@media (min-width: 1440px) {
  .reference {
    --ref-focus-w: 496px;
    --ref-gap: 0.875rem;
  }
}