/* ── Quote entry — parchment → dark, scroll-driven ───────────── */

.pre-bridge {
  position:   relative;
  background: #F4EFE6;
}

.pre-bridge__track {
  height:   220vh;
  position: relative;
  background: linear-gradient(
    to bottom,
    #F4EFE6  0%,
    #F4EFE6  14%,
    #C8C5B0  28%,
    #8A9E72  42%,
    #1E3014  64%,
    #0A150A  82%,
    #0A150A 100%
  );
}

.pre-bridge__stage {
  position:        sticky;
  top:             0;
  height:          100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  background:      transparent;
}

.pre-bridge__quote {
  max-width:  min(820px, 88vw);
  text-align: center;
  margin:     0;
  padding:    0 2rem;
}

.pre-bridge__quote-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size:   clamp(1.3rem, 2.6vw, 2.1rem);
  font-style:  italic;
  font-weight: 400;
  line-height: 1.72;
  color:       #1A2810;
  margin:      0 0 1.8rem;
}

.pre-bridge__attribution {
  display:        block;
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          #1A2810;
}

/* ── Scroll arrow ─────────────────────────────────────────────── */

.pre-bridge__arrow {
  position:   absolute;
  bottom:     2.4rem;
  left:       50%;
  transform:  translateX(-50%);
  display:    flex;
  flex-direction: column;
  align-items:    center;
  gap:        0;
  opacity:    0;
  color:      currentColor;
  transition: opacity 1000ms ease 1200ms;
  animation:  pb-arrow-bob 2000ms cubic-bezier(0.45, 0, 0.55, 1) 2000ms infinite;
}

.pre-bridge__arrow.is-visible {
  opacity: 1;
}

.pre-bridge__arrow-line {
  width:      1.5px;
  height:     42px;
  background: currentColor;
  opacity:    0.45;
}

.pre-bridge__arrow-tip {
  width:         11px;
  height:        11px;
  border-right:  1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform:     rotate(45deg) translateY(-4px);
  opacity:       0.60;
}

@keyframes pb-arrow-bob {
  0%   { transform: translateX(-50%) translateY(0);    }
  45%  { transform: translateX(-50%) translateY(10px); }
  55%  { transform: translateX(-50%) translateY(10px); }
  100% { transform: translateX(-50%) translateY(0);    }
}

/* ── Full-screen photo — sticky for scroll pause ──────────────── */

.pre-bridge__photo-section {
  position:   relative;
  height:     220vh;
  background: #050c05;
}

.pre-bridge__photo-stage {
  position:   sticky;
  top:        0;
  height:     100vh;
  overflow:   hidden;
}

.pre-bridge__photo-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  opacity:    0.85;
}

/* ── Photo info button ────────────────────────────────────────── */

.pre-bridge__info-btn {
  position:      absolute;
  bottom:        1.4rem;
  right:         1.4rem;
  width:         28px;
  height:        28px;
  background:    rgba(4, 10, 4, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:        1px solid rgba(244, 239, 230, 0.16);
  border-radius: 50%;
  padding:       0;
  cursor:        pointer;
  color:         rgba(244, 239, 230, 0.75);
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    color 180ms ease, background 180ms ease;
  z-index:       10;
}

.pre-bridge__info-btn:hover {
  color:      rgba(244, 239, 230, 0.95);
  background: rgba(4, 10, 4, 0.55);
}

.pre-bridge__info-tooltip {
  position:      absolute;
  bottom:        calc(100% + 0.5rem);
  right:         0;
  min-width:     220px;
  background:    rgba(4, 10, 4, 0.92);
  border:        1px solid rgba(244, 239, 230, 0.12);
  border-radius: 3px;
  padding:       0.85rem 1rem;
  display:       flex;
  flex-direction: column;
  gap:           0.3rem;
  text-align:    left;
  pointer-events: none;
  opacity:       0;
  transform:     translateY(4px);
  transition:    opacity 180ms ease, transform 180ms ease;
  white-space:   nowrap;
}

.pre-bridge__info-btn:hover .pre-bridge__info-tooltip,
.pre-bridge__info-btn:focus-visible .pre-bridge__info-tooltip {
  opacity:   1;
  transform: translateY(0);
}

.pre-bridge__info-tooltip span {
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.58rem;
  letter-spacing: 0.06em;
  color:          rgba(244, 239, 230, 0.55);
  line-height:    1.5;
}

.pre-bridge__info-credit {
  color:          rgba(244, 239, 230, 0.85) !important;
  margin-bottom:  0.25rem;
  padding-bottom: 0.4rem;
  border-bottom:  1px solid rgba(244, 239, 230, 0.10);
}

.pre-bridge__info-desc {
  font-family:    Georgia, 'Times New Roman', serif !important;
  font-style:     italic;
  white-space:    normal;
  max-width:      220px;
  margin-bottom:  0.3rem;
  padding-bottom: 0.4rem;
  border-bottom:  1px solid rgba(244, 239, 230, 0.10);
  color:          rgba(244, 239, 230, 0.70) !important;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pre-bridge__quote {
    max-width: 94vw;
    padding:   0 1.2rem;
  }
  .pre-bridge__quote-text {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
  }
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pre-bridge__quote-text,
  .pre-bridge__attribution,
  .pre-bridge__arrow {
    opacity:    1;
    transform:  none;
    transition: none;
    color:      #1A2810;
  }
  .pre-bridge__arrow-line {
    animation: none;
    opacity:   0.35;
  }
}