/* ==========================================================================
   Brand case gallery

   A design case told the way a portfolio tells it: one black band, media
   edge to edge, text set large between the pictures. Used by
   /work/diia-city-union and its NO and UA versions.

   Motion: blocks fade up as they enter the viewport and the loops play only
   while visible (js/brand-case.js). Nothing is hidden unless that script ran,
   and reduced-motion users get still frames with controls.
   ========================================================================== */

.bx {
  background: #000;
  color: #fafaf8;
}

.bx__stack {
  max-width: var(--container-wide);
  margin-inline: auto;
}

.bx__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

.bx__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.bx__pair .bx__media {
  aspect-ratio: 8 / 9;
}

@media (max-width: 599px) {
  .bx__pair { grid-template-columns: 1fr; }
}

/* --- Text slides ---------------------------------------------------------- */

.bx__text {
  display: grid;
  gap: var(--sp-6) var(--sp-8);
  padding: clamp(3rem, 1rem + 7vw, 7rem) var(--gutter);
}

@media (min-width: 800px) {
  .bx__text--two { grid-template-columns: 1fr 1fr; }
}

.bx__label {
  margin: 0 0 var(--sp-2);
  font-size: var(--t-body);
  color: rgba(250, 250, 248, 0.45);
}

.bx__text p:not(.bx__label) {
  margin: 0;
  max-width: 60ch;
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
}

.bx__headline {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(2.25rem, 0.9rem + 6.2vw, 6.75rem);
  font-weight: var(--fw-regular);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #fafaf8;
  text-wrap: balance;
}

.bx__text--concept {
  gap: clamp(3rem, 1rem + 8vw, 9rem);
}

/* --- Motion ----------------------------------------------------------------
   Only armed once the script has added .bx-js, so no-JS visitors and crawlers
   always see the full page. */

.bx-js .bx [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}

.bx-js .bx [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bx-js .bx [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}