/* ============================================
   DSR Reveal-in Effects (Safe JS Version)
   ============================================ */

/* Default: always visible (for browsers without JS) */
.reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Underline (visible by default too) */
.hero-accent {
  display: block;
  width: 180px;
  height: 6px;
  margin: 14px auto 0;
  background: #5fd48a;          /* CTA green */
  border-radius: 4px;
  transform: none;
}

/* Only when JS is detected */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(2px);
  transition:
    opacity .45s ease,
    transform .45s ease,
    filter .45s ease;
  will-change: opacity, transform, filter;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Underline “draw” effect */
.js .reveal-line {
  transform-origin: center;
  transform: scaleX(0);
  transition: transform .5s ease .35s;
}
.js .reveal-line.is-visible {
  transform: scaleX(1);
}

/* Staggered reveal helpers */
.reveal.r1 { transition-delay: .05s; }
.reveal.r2 { transition-delay: .15s; }
.reveal.r3 { transition-delay: .25s; }
.reveal.r4 { transition-delay: .35s; }
.reveal.r5 { transition-delay: .45s; }
.reveal.r6 { transition-delay: .55s; }
.reveal.r7 { transition-delay: .65s; }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-line {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}