/*
 * Utility Classes
 *
 * Single-purpose helper classes for common patterns.
 * Includes text colors and scroll-triggered animations.
 */

/* ============================================
   TEXT COLOR UTILITIES
   ============================================ */
.text-light-on-dark {
  --text-color: var(--text-light-on-dark);

  color: var(--text-light-on-dark);
}

.text-dark-on-light {
  --text-color: var(--text-dark-on-light);

  color: var(--text-dark-on-light);
}

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS
   Elements start hidden/offset and animate
   to visible when .in-view is added via JS
   ============================================ */

/* Fade in */
.fade-in {
  transition: opacity 0.6s var(--cubic-bezier-1);
  opacity: 0;
}

/* Fade up (from below) */
.fade-up {
  transition: var(--fade-transition);
  transform: translateY(30px);
  opacity: 0;
}

/* Fade left (from right) */
.fade-left {
  transition: var(--fade-transition);
  transform: translateX(30px);
  opacity: 0;
}

/* Fade right (from left) */
.fade-right {
  transition: var(--fade-transition);
  transform: translateX(-30px);
  opacity: 0;
}

/* In-view state - applied via IntersectionObserver */
.in-view,
.in-view .fade-in,
.in-view .fade-up,
.in-view .fade-left,
.in-view .fade-right {
  transform: none;
  opacity: 1;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--digicert-blue);
  color: var(--digicert-white);
  padding: var(--space-s) var(--space-m);
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* ============================================
   DISCLAIMER
   Shared "legal fine print" styling applied by
   applyDisclaimer() to the last content element
   of blocks with the `with-disclaimer` variant.
   ============================================ */
.disclaimer {
  font-size: var(--body-font-size-xxs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* ============================================
   REDUCED MOTION
   Respects user preference for reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-up,
  .fade-left,
  .fade-right {
    transition: none;
    transform: none;
    opacity: 1;
  }
}