/* Falling tiles intro, shared by Our work and Services. The section is tall and its inner frame sticks to the screen;
   /js/fall.js moves each tile down by the scroll distance times its depth speed (near fastest). Without JS the tiles sit
   still as a scattered collage. */

/* Pulled up under the fixed header (main has 72px top padding) so the pin starts at the top of the screen; the pin's own
   72px top padding then centres the heading in the visible area below the header */
.wfall { position: relative; height: 260vh; margin-top: -72px; }
/* Bottom padding lifts the copy ~20px above true centre, where it reads as centred (optical centre) */
.wfall-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; padding: 72px 16px 40px; }
/* Tiles live below the header (never over the nav) and fade in at the top and out at the bottom, so nothing is
   sliced off with a hard edge as tiles enter or the section releases */
.wfall-tiles { position: absolute; inset: 72px 0 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 64px, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 64px, #000 74%, transparent 100%); }
.wfall-t { position: absolute; left: var(--x); top: 0; width: var(--w); aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: var(--grey);
  transform: translate3d(0, var(--y), 0); will-change: transform; user-select: none; }
.wfall-t img { width: 100%; height: 100%; object-fit: cover; }
.wfall-t.d1 { z-index: 3; box-shadow: 0 24px 60px -24px rgba(27, 27, 27, .35); }
.wfall-t.d2 { z-index: 1; }
.wfall-t.d3 { z-index: 0; filter: blur(8px); opacity: .55; transform: translate3d(0, var(--y), 0) scale(.85); }
.wfall-head { position: relative; z-index: 2; text-align: center; max-width: 1000px; margin: 0 auto; pointer-events: none; }
.wfall-head .eyebrow { display: inline-block; margin-bottom: 16px; }
.wfall-head h1 { font-size: 88px; line-height: 88px; font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; }
.wfall-head .lead { max-width: 560px; margin: 20px auto 0; }
.wfall-head .hero-actions { display: flex; justify-content: center; margin-top: 32px; }
.wfall-head a { pointer-events: auto; }
/* Very soft white glow behind the copy so it reads over tiles drifting past (front tiles still pass over it) */
.wfall-head::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 130%; height: 150%; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35) 55%, rgba(255, 255, 255, 0)); pointer-events: none; }

@media (max-width: 960px) {
  .wfall-head h1 { font-size: min(44px, 8.2vw); line-height: 1.1; }
}

/* Phones: no scroll effect. Heading first, then two rows of equal tiles drifting slowly sideways (tiles are
   duplicated in js/fall.js so the loop is seamless); edges fade so tiles slide in and out softly */
@media (max-width: 960px) {
  .wfall { height: auto; margin-top: 0; }
  .wfall-pin { position: static; height: auto; display: flex; flex-direction: column; gap: 40px; padding: 40px 0 16px; overflow: hidden; }
  .wfall-head { order: 0; padding: 0 16px; }
  .wfall-head::before { display: none; }
  .wfall-tiles { order: 1; position: static; inset: auto; display: flex; flex-direction: column; gap: 10px; width: 100%;
    -webkit-mask-image: none; mask-image: none; }
  /* Top row drifts left, bottom row drifts right (rows built in js/fall.js) */
  .wfall-row { display: flex; gap: 10px; height: 120px; width: max-content; animation: wfallStrip 90s linear infinite; }
  .wfall-row.r { animation-name: wfallStripBack; }
  .wfall-pin { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent); }
  .wfall-head { -webkit-mask-image: none; }
  .wfall-t, .wfall-t.d1, .wfall-t.d2, .wfall-t.d3 { position: static; width: auto; height: 100%; aspect-ratio: auto; transform: none; filter: none; opacity: 1; box-shadow: none; border-radius: 16px; z-index: auto; }
  .wfall-t:nth-child(4n+2), .wfall-t:nth-child(4n+3) { translate: 0 0; }
  .wfall-row .wfall-t { flex: none; width: 160px; }
}
@keyframes wfallStrip { to { transform: translateX(-50%); } }
@keyframes wfallStripBack { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 960px) and (prefers-reduced-motion: reduce) { .wfall-row { animation: none; } }
/* Copy always sits above the falling tiles at every width (no photo ever covers the headline) */
.wfall-head { z-index: 4; }


/* Phones: the Our work intro shows the "Trusted by" logo strip instead of photo tiles */
.wfall-logos { display: none; }
@media (max-width: 960px) {
  .wfall-tiles { display: none; }
  .wfall-pin { -webkit-mask-image: none; mask-image: none; padding-bottom: 8px; }
  .wfall-logos { order: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .wfall-logos .micro { font-weight: 600; color: var(--black); }
}