/* gothurt.com — motion.css
   Quiet, deliberate motion. Always honors prefers-reduced-motion. */

/* Default state: in position but slightly translated.
   Opacity stays at 1 to avoid mid-transition color-contrast failures from automated tooling.
   The translate-only reveal still reads as motion to the eye while keeping text contrast stable. */
[data-reveal] {
  transform: translateY(12px);
  transition: transform var(--dur-deliberate) var(--ease-out-quint);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform;
}
[data-reveal="visible"] {
  transform: translateY(0);
}

/* Subtle hover lift for interactive cards */
.case-card,
.step-card,
.metric-card,
.principle-card,
.contact-channel {
  will-change: transform, box-shadow;
}

/* Soft fade for hero image — only when JS confirms it's loaded */
.hero__image,
.page-hero__image,
.case-hero__image { opacity: 1; transition: opacity var(--dur-epic) var(--ease-out-quint); }
.hero__image[data-loading],
.page-hero__image[data-loading],
.case-hero__image[data-loading] { opacity: 0; }

/* Skeleton placeholder — used while content/*.json is fetching */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-alt) 0%,
    var(--color-border) 50%,
    var(--color-bg-alt) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s var(--ease-in-out) infinite;
  border-radius: var(--radius-md);
  color: transparent;
}
.skeleton--text { height: 1em; margin-block: 0.4em; }
.skeleton--block { aspect-ratio: 4 / 3; }

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Smooth scroll for in-page anchor links */
html { scroll-behavior: smooth; }

/* Reduced-motion: everything snaps */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .skeleton { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}