/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Skip Link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: calc(var(--z-modal) + 1);
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-violet);
  color: var(--c-text-primary);
  font-weight: var(--fw-semibold);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top var(--dur-fast) ease;
}
.skip-link:focus {
  top: 0;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Container */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

/* Text gradient */
.text-gradient {
  background: var(--c-gradient-cta);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glassmorphism */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
}

/* Glassmorphism fallback */
@supports not (backdrop-filter: blur(1px)) {
  .glass {
    background: rgba(18, 18, 18, 0.92);
  }
}

/* Scroll reveal — Hero only (legacy, kept for hero section) */
.hero .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
.hero .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: instant reveal */
@media (prefers-reduced-motion: reduce) {
  .hero .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}