/* IMAGE REVEAL — smooth mask + scale entry */

.img-reveal {
  position: relative;
  overflow: hidden;
  background: var(--color-concrete-soft);
  border-radius: var(--radius-lg);
  width: 100%;
  display: block;
}

.img-reveal__mask {
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  transform-origin: bottom;
  transform: scaleY(1);
  transition: transform 1.05s cubic-bezier(0.85, 0, 0.15, 1);
  z-index: 2;
}

.img-reveal[data-visible="true"] .img-reveal__mask {
  transform: scaleY(0);
}

.img-reveal__inner {
  position: absolute;
  inset: 0;
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-reveal[data-visible="true"] .img-reveal__inner {
  transform: scale(1);
}

.img-reveal__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.93) saturate(0.94);
  transition: opacity 600ms ease, filter 350ms ease;
}

.img-reveal__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      rgba(38, 56, 42, 0.04) 14px 15px
    ),
    linear-gradient(180deg, var(--color-warm-white), var(--color-concrete-soft));
  color: var(--color-primary);
  text-align: center;
  gap: 6px;
  letter-spacing: 0.18em;
}

.img-reveal__placeholder-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
}

.img-reveal__placeholder-sub {
  font-size: 10px;
  opacity: 0.45;
  letter-spacing: 0.14em;
  font-feature-settings: "tnum";
}

@media (prefers-reduced-motion: reduce) {
  .img-reveal__mask,
  .img-reveal__inner,
  .img-reveal__inner img {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .img-reveal__mask {
    display: none;
  }
}