/* =========================
   ZOOM OVERLAY
========================= */

#zoomOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  background:#000;
  opacity:0;
  transition:opacity .7s ease;
}

/* =========================
   CARD TRANSITIONS
========================= */

.ward-card{
  transition:
    transform .45s ease,
    box-shadow .45s ease,
    border .45s ease,
    filter .45s ease,
    opacity .45s ease;
  will-change:transform, opacity, filter;
}

/* =========================
   CINEMATIC FEEL
========================= */

.ward-card img{
  transition:
    transform 1.2s ease,
    filter .6s ease;
}

.ward-card:hover img{
  transform:scale(1.03);
}

/* =========================
   ACTIVE ZOOM STATE
========================= */

.ward-card.zooming{
  z-index:9999 !important;
}

/* =========================
   BLACKOUT
========================= */

#zoomOverlay.fade{
  opacity:1;
}