/* ============================================================
   FLOWELL OIL & GAS — Animations
   Scroll-reveal (IntersectionObserver) + hover micro-interactions
   MOTION 2: scroll-reveal + hover states, no parallax, no loops
   Purpose: guide attention to content as it enters the viewport
   ============================================================ */

/* ── Scroll-reveal: initial hidden state ── */
/* Purpose: elements enter on a single upward-fade (30px Y, 400ms ease-out)
   to signal that page content is structured top-to-bottom */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays — applied to siblings within a group */
[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }
[data-reveal-delay="500"] { transition-delay: 500ms; }

/* ── Hero scroll cue ── */
/* A thin amber vertical line with a descending dot.
   Purpose: communicates "scroll to navigate" without a generic arrow icon */
.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  height: 64px;
  width: 1px;
}

.scroll-cue-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, var(--accent), transparent);
}

.scroll-cue-dot {
  position: absolute;
  top: 0;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: scroll-cue-drop 2s var(--ease-in-out) infinite;
}

@keyframes scroll-cue-drop {
  0%   { top: 0;     opacity: 1; }
  70%  { top: 57px;  opacity: 0.4; }
  100% { top: 57px;  opacity: 0; }
}

/* ── Nav scroll: active highlight ── */
/* Handled in components.css via .is-active class and ::after underline */

/* ── Prefers-reduced-motion override ── */
/* All animations disabled for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-cue-dot {
    animation: none;
    top: 28px;
    opacity: 0.6;
  }

  .nav-link::after,
  .btn--ghost::after {
    transition: none;
  }
}