/* =========================================================
   UTILITIES
   helpers / overlays / spacing / states
========================================================= */

/* =========================================================
   DISPLAY
========================================================= */

.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.flex {
  display: flex !important;
}

.grid {
  display: grid !important;
}

/* =========================================================
   POSITION
========================================================= */

.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.fixed {
  position: fixed !important;
}

.sticky {
  position: sticky !important;
}

/* =========================================================
   ALIGNMENT
========================================================= */

.items-center {
  align-items: center !important;
}

.items-start {
  align-items: flex-start !important;
}

.items-end {
  align-items: flex-end !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

/* =========================================================
   WIDTH
========================================================= */

.w-full {
  width: 100% !important;
}

.max-w-full {
  max-width: 100% !important;
}

.max-w-text {
  max-width: 58ch !important;
}

.max-w-title {
  max-width: 14ch !important;
}

/* =========================================================
   HEIGHT
========================================================= */

.h-full {
  height: 100% !important;
}

.min-h-screen {
  min-height: 100svh !important;
}

/* =========================================================
   OVERFLOW
========================================================= */

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.no-scroll {
  overflow: hidden !important;
}

/* =========================================================
   SPACING
========================================================= */

.mt-0 { margin-top: 0 !important; }
.mt-8 { margin-top: 8px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-18 { margin-top: 18px !important; }
.mt-24 { margin-top: 24px !important; }
.mt-32 { margin-top: 32px !important; }
.mt-48 { margin-top: 48px !important; }
.mt-64 { margin-top: 64px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-8 { margin-bottom: 8px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-18 { margin-bottom: 18px !important; }
.mb-24 { margin-bottom: 24px !important; }
.mb-32 { margin-bottom: 32px !important; }
.mb-48 { margin-bottom: 48px !important; }
.mb-64 { margin-bottom: 64px !important; }

.pt-0 { padding-top: 0 !important; }
.pt-12 { padding-top: 12px !important; }
.pt-18 { padding-top: 18px !important; }
.pt-24 { padding-top: 24px !important; }
.pt-32 { padding-top: 32px !important; }
.pt-48 { padding-top: 48px !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-12 { padding-bottom: 12px !important; }
.pb-18 { padding-bottom: 18px !important; }
.pb-24 { padding-bottom: 24px !important; }
.pb-32 { padding-bottom: 32px !important; }
.pb-48 { padding-bottom: 48px !important; }

/* =========================================================
   GAPS
========================================================= */

.gap-8 { gap: 8px !important; }
.gap-12 { gap: 12px !important; }
.gap-18 { gap: 18px !important; }
.gap-24 { gap: 24px !important; }
.gap-32 { gap: 32px !important; }
.gap-48 { gap: 48px !important; }

/* =========================================================
   BORDERS
========================================================= */

.border {
  border: 1px solid var(--line) !important;
}

.border-top {
  border-top: 1px solid var(--line) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--line) !important;
}

.border-left {
  border-left: 1px solid var(--line) !important;
}

.border-right {
  border-right: 1px solid var(--line) !important;
}

.border-none {
  border: none !important;
}

/* =========================================================
   RADIUS
========================================================= */

.radius-sm {
  border-radius: var(--radius-sm) !important;
}

.radius-md {
  border-radius: var(--radius-md) !important;
}

.radius-lg {
  border-radius: var(--radius-lg) !important;
}

.radius-full {
  border-radius: 999px !important;
}

/* =========================================================
   BACKGROUNDS
========================================================= */

.bg-paper {
  background: var(--paper) !important;
}

.bg-surface {
  background: var(--surface) !important;
}

.bg-graphite {
  background: var(--graphite) !important;
}

.bg-soft {
  background: rgba(255,255,255,0.14) !important;
}

.bg-glass {
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(14px);
}

/* =========================================================
   SHADOWS
========================================================= */

.shadow-soft {
  box-shadow: var(--shadow-soft) !important;
}

.shadow-medium {
  box-shadow: var(--shadow-medium) !important;
}

.shadow-hard {
  box-shadow: var(--shadow-hard) !important;
}

/* =========================================================
   TEXT
========================================================= */

.text-muted {
  color: var(--muted) !important;
}

.text-white {
  color: var(--white) !important;
}

.text-ink {
  color: var(--ink) !important;
}

.uppercase {
  text-transform: uppercase !important;
}

.lowercase {
  text-transform: lowercase !important;
}

.bold {
  font-weight: 600 !important;
}

.semibold {
  font-weight: 520 !important;
}

/* =========================================================
   OPACITY
========================================================= */

.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

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

.transition-fast {
  transition: all var(--transition-fast) !important;
}

.transition-medium {
  transition: all var(--transition-medium) !important;
}

.transition-slow {
  transition: all var(--transition-slow) !important;
}

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

.hover-lift:hover {
  transform: translateY(-3px);
}

.hover-fade:hover {
  opacity: 0.8;
}

.hover-bright:hover {
  filter: brightness(1.06);
}

/* =========================================================
   FLOATING FX
========================================================= */

.float-soft {
  animation:
    utilityFloatSoft 8s ease-in-out infinite alternate;
}

.float-medium {
  animation:
    utilityFloatMedium 12s ease-in-out infinite alternate;
}

@keyframes utilityFloatSoft {

  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-6px);
  }
}

@keyframes utilityFloatMedium {

  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-10px);
  }
}

/* =========================================================
   OVERLAYS
========================================================= */

.overlay-dark::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    rgba(0,0,0,0.22);

  pointer-events: none;
}

.overlay-soft::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.04),
      rgba(0,0,0,0.08)
    );

  pointer-events: none;
}

/* =========================================================
   DIVIDERS
========================================================= */

.divider {
  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--line),
      transparent
    );
}

.divider-left {
  width: 120px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--line-strong),
      transparent
    );
}

/* =========================================================
   CURSOR STATES
========================================================= */

.pointer {
  cursor: pointer !important;
}

.no-pointer {
  pointer-events: none !important;
}

/* =========================================================
   IMAGE STATES
========================================================= */

.cover {
  object-fit: cover !important;
}

.contain {
  object-fit: contain !important;
}

.img-grayscale {
  filter: grayscale(1);
}

.img-muted {
  filter:
    grayscale(0.25)
    saturate(0.7)
    contrast(1.08);
}

/* =========================================================
   MOBILE HELPERS
========================================================= */

.mobile-only {
  display: none !important;
}

.desktop-only {
  display: block !important;
}

@media (max-width: 760px) {

  .mobile-only {
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-center {
    text-align: center !important;
  }

  .mobile-full {
    width: 100% !important;
  }

  .mobile-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .mobile-hidden {
    display: none !important;
  }
}