/* app.css — Discovagh's own layer on top of Tailwind (CDN).
   Holds what Tailwind utilities can't: the scroll-reveal motion backbone, the
   rates-ticker keyframes, and the reduced-motion calm path. */

/* ── Scroll-reveal backbone ──────────────────────────────────────────────────
   Elements marked .reveal start hidden+shifted; .is-visible (added by reveal.js
   as they scroll into view) eases them in. Expanded from the veb version's
   animate-on-scroll hook. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger helpers for cascading grids. */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* ── Rates ticker (Stage 2) ──────────────────────────────────────────────────
   A track duplicated in JS scrolls left seamlessly; pause on hover. */
@keyframes dg-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.dg-ticker-track {
  display: inline-flex;
  white-space: nowrap;
  animation: dg-ticker 40s linear infinite;
}
.dg-ticker:hover .dg-ticker-track {
  animation-play-state: paused;
}
/* Soft fade at both edges so items scroll in/out instead of hard-clipping. */
.dg-ticker-fade {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* Subtle hero depth: slow float for decorative blobs. */
@keyframes dg-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.dg-float { animation: dg-float 9s ease-in-out infinite; }

/* ── Mobile menu (hamburger) ──────────────────────────────────────────────────
   Deterministic show/hide, independent of Tailwind's responsive classes.
   Hidden by default; .is-open reveals it; ALWAYS hidden at >=768px (desktop uses
   the inline links, and the toggle button is md:hidden). */
.dg-mobile-menu {
  display: none;
}
.dg-mobile-menu.is-open {
  display: block;
}
@media (min-width: 768px) {
  .dg-mobile-menu,
  .dg-mobile-menu.is-open {
    display: none !important;
  }
}

/* ── Reduced motion: calm path (accessibility + care) ────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .dg-ticker-track { animation: none; }
  .dg-float { animation: none; }
}