/* ============================================================
   Hisdayspring — animations.css
   Restrained, respectful motion. All decorative animation is
   disabled when the user prefers reduced motion.
   ============================================================ */

/* ---------- Scroll reveal ----------
   Content is only hidden when JS has marked <html> with .js,
   so everything stays visible without JavaScript. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.js .reveal.in-view {
  opacity: 1;
  transform: none;
}

/* Stagger helpers */
.reveal-d1 { --reveal-delay: 0.08s; }
.reveal-d2 { --reveal-delay: 0.16s; }
.reveal-d3 { --reveal-delay: 0.24s; }
.reveal-d4 { --reveal-delay: 0.32s; }

/* ---------- Keyframes ---------- */
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(178, 58, 58, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(178, 58, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(178, 58, 58, 0); }
}

@keyframes sun-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.8;  transform: scale(1.04); }
}

@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Hero sunrise rays — slow, subtle */
.hero__rays { animation: sun-glow 9s ease-in-out infinite; transform-origin: center; }

/* ---------- Hover-only motion (no JS needed) ---------- */
@media (hover: hover) {
  .area-card__icon { transition: transform 0.25s var(--ease); }
  .area-card:hover .area-card__icon { transform: scale(1.06) rotate(-3deg); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal, .js .reveal { opacity: 1; transform: none; }
  .hero__rays { animation: none; }
}