/* ══════════════════════════════════════════════════════════════
   ÉCHELLE VENTURES — backdrops (For Businesses, For Students)
   Photographs that dissolve into the paper behind the page's own type:
   a hero backdrop, and photo scenes with a sentence laid over each.
   They add ground and motion only; fonts and colours stay the site's.
   ══════════════════════════════════════════════════════════════ */
/* Backdrops — photographs that dissolve into the paper behind the type.
   They sit under the words, never beside them, so the page reads exactly
   as before; they only add ground and a slow drift as you scroll. */
.bd-host { position: relative; isolation: isolate; overflow: hidden; }
.bd-photo { position: absolute; z-index: -1; top: 0; bottom: 0; overflow: hidden; pointer-events: none; }
.bd-photo img {
  position: absolute; left: 0; top: -10%; width: 100%; height: 125%;
  object-fit: cover; filter: grayscale(1); mix-blend-mode: multiply; opacity: 0.16;
}
.bd-hero { right: 0; width: 72%;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%), linear-gradient(to right, transparent 0%, #000 45%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, #000 40%, transparent 100%), linear-gradient(to right, transparent 0%, #000 45%);
          mask-composite: intersect;
  animation: bd-settle 1.8s var(--ease) both;
}
/* Scenes — three photographs, faint and feathered into the paper, with the
   sentence laid over each. The picture drifts, a hairline draws down beside
   the words and the words arrive one by one as you reach them. */
.bd-scenes { padding: clamp(30px, 4vw, 60px) var(--px); }
.bd-scene { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 420px; margin: 0; --scene-progress: 0; }
.bd-scene img {
  position: absolute; z-index: -1; top: 0; right: 0; width: 75%; height: 100%; object-fit: cover;
  opacity: 0.18; filter: grayscale(1); mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 70%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 35%, #000 70%, transparent);
  transform: translateY(calc((0.5 - var(--scene-progress)) * 30px));
}
.bd-scene::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--bg) 2%, transparent 32%, transparent 68%, var(--bg) 98%); }
.bd-scene figcaption { position: relative; max-width: 680px; padding: 60px 0 60px 50px; }
.bd-scene figcaption::before, .bd-scene figcaption::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; }
.bd-scene figcaption::before { background: var(--border); }
.bd-scene figcaption::after { background: var(--text); transform-origin: top; transform: scaleY(var(--scene-progress)); }
.bd-scene .ev-label { margin-bottom: 0; }
.bd-scene h3 {
  margin: 24px 0; font-family: var(--ff-serif); font-weight: 300; color: var(--text);
  font-size: clamp(36px, 5.3vw, 76px); line-height: 1.08; letter-spacing: -0.035em;
}
.bd-scene p { max-width: 340px; font-size: 15px; line-height: 1.8; color: var(--dim); }
.bd-scene:nth-child(2) figcaption { margin-left: 18%; }
.bd-scene:nth-child(3) figcaption { margin-left: 36%; }
.bd-scene:nth-child(2) img { right: 10%; }
.bd-scene:nth-child(3) img { right: 20%; }
.bd-word { display: inline-block; transform: translateY(calc((1 - var(--word-progress, 1)) * 20px)); opacity: calc(0.48 + var(--word-progress, 1) * 0.52); }
@media (max-width: 760px) {
  .bd-scene { min-height: 360px; }
  .bd-scene figcaption, .bd-scene:nth-child(n) figcaption { margin-left: 0; padding: 55px 0 55px 24px; }
  .bd-scene img, .bd-scene:nth-child(n) img { right: -5%; width: 100%; }
  .bd-scene h3 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-scene img, .bd-word { transform: none !important; opacity: 1; }
  .bd-scene img { opacity: 0.2; }
  .bd-scene figcaption::after { transform: scaleY(1); }
}
@keyframes bd-settle { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

/* How it works — the line along the top of the steps draws across them in
   order once they arrive, the way a route is traced (hover still works) */
.ev-process.bd-drawn .ev-step::after { transform: scaleX(1); transition: transform 0.7s var(--ease); }
.ev-process.bd-drawn .ev-step:nth-child(2)::after { transition-delay: 0.35s; }
.ev-process.bd-drawn .ev-step:nth-child(3)::after { transition-delay: 0.7s; }
.ev-process.bd-drawn .ev-step:nth-child(4)::after { transition-delay: 1.05s; }

@media (max-width: 900px) {
  .bd-hero { width: 100%; }
  .bd-photo img { opacity: 0.12; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-hero { animation: none; }
}