/* ============================================================
   home-apple-motion.css
   Self-contained scroll/interaction "motion engine" styles for
   template-home.php. Loaded AFTER and DEPENDENT ON
   home-redesign.css (see functions.php: adc_home_enqueue_assets()).

   Contract implemented here (see home-apple-motion.js for the JS
   half):
     - data-reveal="fade-up|fade|scale|stagger"
     - data-parallax="0.25"   (JS-driven transform, no CSS needed)
     - magnetic buttons       (JS-driven transform, no CSS needed
                                besides the touch :active fallback)
     - hero entrance          (.hero-copy children, JS-driven)
     - smooth anchor scroll   (html{scroll-behavior:smooth})

   Sticky/pinned section headings (data-pin) were tried and removed --
   they read as an unwanted "stuck" heading while scrolling. Don't
   reintroduce position:sticky headings without explicit direction.

   PROGRESSIVE ENHANCEMENT / FAIL-SAFE:
   Elements with [data-reveal] must be fully visible by default.
   The JS adds a `.reveal-init` class to a target right before it
   starts observing it -- ONLY `.reveal-init[data-reveal]` gets a
   hidden starting state. If JS never runs (blocked, errors,
   IntersectionObserver unsupported), content simply has no
   `.reveal-init` class and stays at its natural opacity/position.
   ============================================================ */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Reveal system ---------- */

/* Only elements the JS has actually armed (via .reveal-init) start
   hidden. Anything else (no-JS, JS error, unsupported browser)
   renders at full opacity with no transform, so the page is never
   blank. */
[data-reveal].reveal-init {
  opacity: 0;
  will-change: opacity, transform;
}

[data-reveal="fade-up"].reveal-init {
  transform: translateY(28px);
}

[data-reveal="scale"].reveal-init {
  transform: scale(0.94);
}

/* "fade" only needs the opacity:0 above -- no transform. */

/* Direct children of a stagger container get the same treatment as
   fade-up; the JS assigns each child a staggered transition-delay
   inline, so the CSS just needs the shared hidden/visible states. */
[data-reveal="stagger"].reveal-init > * {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

[data-reveal].reveal-init.adc-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="stagger"].reveal-init.adc-in > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Parallax ---------- */

[data-parallax] {
  will-change: transform;
}

/* ---------- Magnetic buttons ---------- */

.btn-primary,
.btn-ghost,
.btn-outline {
  will-change: transform;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Touch / coarse-pointer fallback: plain CSS tap feedback instead
   of the JS magnetic effect (JS explicitly skips these devices). */
@media (hover: none), (pointer: coarse) {
  .btn-primary:active,
  .btn-ghost:active,
  .btn-outline:active {
    transform: scale(0.96);
  }
}

/* ---------- Hero entrance ---------- */

.hero-copy > * {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

/* If JS never runs, don't leave the hero blank -- fall back to
   visible after a short delay via animation-less default. This
   selector only matches once JS adds .adc-hero-armed to the
   container right before the entrance sequence starts; absent
   that class, the rule above is overridden here so hero content
   is visible without JS. */
.hero-copy:not(.adc-hero-armed) > * {
  opacity: 1;
  transform: none;
}

.hero-copy.adc-hero-armed > *.adc-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reduced motion: hard kill switch ---------- */

@media (prefers-reduced-motion: reduce) {
  [data-reveal].reveal-init,
  [data-reveal="stagger"].reveal-init > *,
  .hero-copy > *,
  .hero-copy.adc-hero-armed > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-parallax] {
    transform: none !important;
  }

  .btn-primary,
  .btn-ghost,
  .btn-outline {
    transition: none !important;
  }
}