/* ============================================
   Noor — Utilities (typography + reduced-motion)
   ============================================ */

/* --- Typographic classes (fluid scale) --- */

.text-display {
  font-family: var(--font-display-current);
  font-size: var(--text-display);
  line-height: 1;
  letter-spacing: -0.02em;
}

.text-h1 {
  font-family: var(--font-display-current);
  font-size: var(--text-h1);
  line-height: 1.15;
}

.text-h2 {
  font-family: var(--font-display-current);
  font-size: var(--text-h2);
  line-height: 1.2;
}

.text-h3 {
  font-family: var(--font-ui);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.3;
}

.text-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.3;
}

.text-small {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  line-height: 1.5;
}

.section-label {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

/* Legacy aliases (backward compat) */
.display-hero {
  font-family: var(--font-display-current);
  font-size: var(--text-display);
  line-height: 1;
}

.display-work {
  font-family: var(--font-display-current);
  font-size: var(--text-h1);
  line-height: 1.15;
}

/* --- Pill hover — drop reveal (single source of truth) ---
   Usage: add class="pill-hover" to any pill-shaped interactive element.
   The ::before handles the animated background fill.
   Override background via --pill-hover-bg on the element if needed.
   Active/current state: add .is-active or .is-current to keep it revealed.
   ------------------------------------------------------------------ */

.pill-hover {
  position: relative;
  isolation: isolate;
  text-decoration: none;
}

.pill-hover::before {
  content: "";
  position: absolute;
  inset: -2px -4px;
  border-radius: 999px;
  background: var(--pill-hover-bg, color-mix(in srgb, var(--surface-text) 10%, transparent));
  opacity: 0;
  transform: scale(0.85, 0.7) translateY(4px);
  /* Squashed/Liquid start */
  filter: blur(4px);
  pointer-events: none;
  z-index: -1;
  /* Out: Natural snap-back */
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.3s ease,
    opacity 0.2s ease;
}

/* In: Liquid expansion with organic spring overshoot */
.pill-hover:hover::before,
.pill-hover.is-active::before,
.pill-hover.is-current::before {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.4s ease,
    opacity 0.15s ease;
}

/* Active state is solid, no transition needed when already active */
.pill-hover.is-active::before,
.pill-hover.is-current::before {
  transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Accessibility & Layout Utilities --- */

.u-low-opacity {
  opacity: 0.6;
}

.u-muted {
  opacity: 0.45;
}

.u-flex {
  display: flex;
}

.u-flex-column {
  display: flex;
  flex-direction: column;
}

.u-gap-md {
  gap: var(--space-md);
}

.u-gap-lg {
  gap: var(--space-lg);
}

/* --- Accessibility: Skip link --- */

.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  background: var(--accent-current);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  z-index: 1000;
  font-family: var(--font-ui);
  font-size: var(--text-small);
  text-decoration: none;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 20px;
  outline: 2px solid #fff;
  outline-offset: 4px;
}