/* ── V4 overrides ────────────────────────────────────────────────────
   V4 is a design exploration on top of V3. It shares styles.css, app.js,
   motion.* and hscroll.js with V3 - every rule that makes V4 different
   lives HERE, and this sheet loads last so it wins without !important.

   Why isolation matters: V3 is frozen and packaged for client handoff.
   Nothing in this file can reach V3, so exploration here is free.
   Deployed to dbmg-prototype-v4.pages.dev. */

/* ── market swap cascade ─────────────────────────────────────────────
   Commercial ↔ Industrial used to cut straight to the new photographs.
   The strip now fades out as one, is rebuilt while invisible, and the new
   cards return in sequence. Only card OPACITY is animated - the marquee
   owns card transforms inline on desktop - while the copy block inside,
   which the marquee never touches, rises as it arrives. */
#mkCards { transition: opacity .18s cubic-bezier(.4, 0, 1, 1); }
#mkCards.v4-swap-out { opacity: 0; }
#mkCards.v4-swap-out .mcard__text {
  transform: translateY(-10px);
  transition: transform .18s cubic-bezier(.4, 0, 1, 1);
}
/* the container snaps back to full while the cards themselves cascade in
   from zero - transitioning both would read as a double fade */
#mkCards.v4-swap-in { transition: none; }
#mkCards.v4-swap-in .mcard {
  animation: v4CardIn .58s cubic-bezier(.16, .84, .24, 1) both;
  animation-delay: calc(var(--v4-i, 0) * 45ms);
}
#mkCards.v4-swap-in .mcard__text {
  animation: v4CopyIn .72s cubic-bezier(.16, .84, .24, 1) both;
  animation-delay: calc(var(--v4-i, 0) * 45ms + 60ms);
}
@keyframes v4CardIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes v4CopyIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #mkCards, #mkCards .mcard, #mkCards .mcard__text { transition: none; animation: none; }
}

/* Mobile preconstruction photo: v4.js pins it with a transform so it can
   release when the last row reaches it and travel up with the copy.
   CSS stickiness has to step aside at exactly those widths or both would
   apply and the photo would double its offset. */
@media (max-width: 900px) {
  .services--varf .services__visual,
  .services__inner--varf .services__visual {
    position: relative;
    top: auto;
    will-change: transform;
  }
}