/*!
 * The Talking Dog - motion layer (additive)
 * Version: 1.0.0
 * Purpose: (1) keep content visible when JavaScript is off/failed or when the visitor prefers reduced motion,
 *          (2) subtle hero-image intro, (3) scroll reveals for the FAQs page (the only page without them).
 * Animates transform and opacity only.
 * How to disable: remove the enqueue lines in functions.php (or deactivate the child theme).
 */
:root { --ttd-ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* 1. Safety: the existing page code hides .reveal elements until JavaScript shows them.
      If the "js-motion" class is absent (JS off/failed), force everything visible. */
html:not(.js-motion) .reveal,
html:not(.js-motion) .ttd-reveal,
html:not(.js-motion) [data-reveal] {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

/* 2. Reduced motion: no movement anywhere on in-scope pages. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .ttd-reveal, [data-reveal] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .hero-img, .hero-photo-frame img, .device-frame img { animation: none !important; }
}

/* 3. Hero image intro: scale 1.03 -> 1 (fade already comes from the parent's existing .reveal). */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion .hero-img,
  html.js-motion .about-hero .hero-photo-frame img,
  html.js-motion .hero .device-frame img {
    animation: ttd-media-in 900ms var(--ttd-ease) 120ms both;
  }
}
@keyframes ttd-media-in { from { transform: scale(1.03); } to { transform: none; } }

/* 4. FAQs page reveals (attributes are added to the FAQs markup: data-reveal / data-reveal-delay). */
html.js-motion [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms var(--ttd-ease), transform 700ms var(--ttd-ease);
}
html.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
html.js-motion [data-reveal-delay="1"] { transition-delay: 80ms; }
html.js-motion [data-reveal-delay="2"] { transition-delay: 160ms; }
html.js-motion [data-reveal-delay="3"] { transition-delay: 240ms; }
html.js-motion [data-reveal-delay="4"] { transition-delay: 320ms; }