/* =========================================================
   WMMEDIA DESIGN UTILITIES
   Bestand: wm-design.css
   Doel: zichtbare design-classes naast Bootstrap
   Gebruik in CMS Styling CSS:
   p-5 bg-white wm-rounded-lg wm-shadow-soft wm-overlap-md
========================================================= */

/* =========================
   LAGEN / OVERLAP
========================= */

.wm-layer-top {
  position: relative;
  z-index: 10;
}

@media (min-width: 768px) {
  .wm-overlap-sm {
    margin-top: -40px;
    position: relative;
    z-index: 10;
  }

  .wm-overlap-md {
    margin-top: -80px;
    position: relative;
    z-index: 10;
  }

  .wm-overlap-lg {
    margin-top: -140px;
    position: relative;
    z-index: 10;
  }
}

@media (max-width: 767.98px) {
  .wm-overlap-sm,
  .wm-overlap-md,
  .wm-overlap-lg {
    margin-top: 0;
  }
}

/* =========================
   RONDINGEN / ORGANISCH
========================= */

.wm-rounded-sm {
  border-radius: 14px !important;
  overflow: hidden;
}

.wm-rounded-md {
  border-radius: 28px !important;
  overflow: hidden;
}

.wm-rounded-lg {
  border-radius: 48px !important;
  overflow: hidden;
}

.wm-rounded-xl {
  border-radius: 80px !important;
  overflow: hidden;
}

.wm-organic-left {
  border-radius: 70px 24px 70px 24px !important;
  overflow: hidden;
}

.wm-organic-right {
  border-radius: 24px 70px 24px 70px !important;
  overflow: hidden;
}

.wm-organic-soft {
  border-radius: 42px 80px 36px 68px !important;
  overflow: hidden;
}

/* =========================
   SCHADUW / DIEPTE
========================= */

.wm-shadow-soft {
  box-shadow: 0 18px 50px rgba(0, 0, 0, .14) !important;
}

.wm-shadow-card {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12) !important;
}

.wm-shadow-deep {
  box-shadow: 0 28px 80px rgba(0, 0, 0, .22) !important;
}

.wm-lifted {
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .18) !important;
}

/* =========================
   GLAS / TRANSPARANT
========================= */

.wm-glass {
  background: rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .14) !important;
  border: 1px solid rgba(255, 255, 255, .45);
}

.wm-glass-light {
  background: rgba(255, 255, 255, .55) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, .5);
}

.wm-glass-dark {
  background: rgba(0, 0, 0, .38) !important;
  color: #fff !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .18);
}

/* =========================
   ACCENT / RANDBELIJNING
========================= */

.wm-border-soft {
  border: 1px solid rgba(0, 0, 0, .08) !important;
}

.wm-border-light {
  border: 1px solid rgba(255, 255, 255, .45) !important;
}

.wm-accent-left {
  border-left: 6px solid currentColor !important;
}

.wm-accent-top {
  border-top: 6px solid currentColor !important;
}

/* =========================
   ACHTERGRONDEN
========================= */

.wm-bg-soft {
  background: #f7f4ef !important;
}

.wm-bg-warm {
  background: #f1e8dc !important;
}

.wm-bg-calm {
  background: #edf4f1 !important;
}

.wm-bg-mist {
  background: linear-gradient(135deg, #ffffff 0%, #f3f0ea 100%) !important;
}

.wm-bg-organic {
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.8), transparent 28%),
    linear-gradient(135deg, #f5efe6 0%, #e7ddd1 100%) !important;
}

/* =========================
   HOVER EFFECTEN
========================= */

.wm-hover-lift {
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.wm-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .18) !important;
}

.wm-hover-zoom {
  transition: transform .25s ease, box-shadow .25s ease;
}

.wm-hover-zoom:hover {
  transform: scale(1.025);
}

.wm-hover-glow {
  transition: box-shadow .25s ease, transform .25s ease;
}

.wm-hover-glow:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 5px rgba(255,255,255,.55),
    0 20px 60px rgba(0,0,0,.18) !important;
}

.wm-hover-bright {
  transition: filter .25s ease, transform .25s ease;
}

.wm-hover-bright:hover {
  filter: brightness(1.06);
  transform: translateY(-3px);
}

/* =========================
   ANIMATIES BIJ LADEN
   Let op: subtiel houden naast AOS
========================= */

.wm-anim-fade {
  animation: wmFade .8s ease both;
}

.wm-anim-up {
  animation: wmUp .8s ease both;
}

.wm-anim-zoom {
  animation: wmZoom .75s ease both;
}

.wm-anim-soft {
  animation: wmSoft .9s ease both;
}

@keyframes wmFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes wmUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wmZoom {
  from {
    opacity: 0;
    transform: scale(.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wmSoft {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* =========================
   BEELDEN / FOTO'S
========================= */

.wm-img-soft img,
.wm-img-soft picture,
.wm-img-soft video {
  border-radius: 36px !important;
  overflow: hidden;
}

.wm-img-organic img,
.wm-img-organic picture,
.wm-img-organic video {
  border-radius: 70px 24px 70px 24px !important;
  overflow: hidden;
}

.wm-img-shadow img,
.wm-img-shadow picture,
.wm-img-shadow video {
  box-shadow: 0 18px 50px rgba(0,0,0,.16) !important;
}

/* =========================
   MOBIEL
========================= */

@media (max-width: 767.98px) {
  .wm-rounded-lg,
  .wm-rounded-xl,
  .wm-organic-left,
  .wm-organic-right,
  .wm-organic-soft {
    border-radius: 28px !important;
  }

  .wm-shadow-deep,
  .wm-shadow-soft {
    box-shadow: 0 10px 28px rgba(0,0,0,.12) !important;
  }

  .wm-hover-lift:hover,
  .wm-hover-zoom:hover,
  .wm-hover-glow:hover,
  .wm-hover-bright:hover {
    transform: none;
  }
}