/* =============================================================
   motion.css — Drupal-safe scroll/motion layer for the Guilford concepts.
   No framework, no build step: add motion.css + motion.js to the theme's
   library and it works. All effects degrade to "instant, no motion" under
   prefers-reduced-motion (WCAG 2.3.3 / the a11y layer).
   ============================================================= */

/* ---- 1. Scroll reveal (fade + rise). JS adds .in when the element enters view. ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }

/* Staggered children for grids/rows (delay set inline by JS via --i) */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal-group].in > * { opacity: 1; transform: none; }

/* ---- 2. Hero: slow Ken Burns zoom + parallax (parallax offset set by JS via --py) ---- */
.motion-kenburns {
  background-position: center calc(50% + var(--py, 0px)) !important;
  animation: mkKenburns 22s ease-out both;
}
@keyframes mkKenburns {
  from { background-size: 112%; }
  to   { background-size: 118%; }
}
/* hero headline words rise in on load */
.motion-hero-in { animation: mkRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.motion-hero-in.d2 { animation-delay: 0.12s; }
.motion-hero-in.d3 { animation-delay: 0.24s; }
.motion-hero-in.d4 { animation-delay: 0.36s; }
@keyframes mkRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---- 3. Hover micro-interactions (clean lift + shadow; image tiles get a gentle zoom) ---- */
.d-tile, .d-mtile, .d-cardsm, .bm-tile, .prog-card, .d-link, .ea-path {
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              background-size 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.d-tile:hover, .d-mtile:hover, .bm-tile:hover, .prog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(11, 18, 22, 0.5);
  background-size: 106%;               /* subtle image push-in on the bg-image tiles */
}
.d-cardsm:hover, .d-link:hover, .ea-path:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -16px rgba(11, 18, 22, 0.28);
}
/* CTA arrow nudge */
.go .arrow, .drill, .go { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.d-tile:hover .go, .d-mtile:hover .drill, .prog-card:hover .drill { transform: translateX(4px); }

/* ---- 4. Count-up stats: no layout shift; JS swaps the text ---- */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ---- Reduced motion: everything is instant and static ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .motion-kenburns { animation: none !important; background-size: cover !important; }
  .motion-hero-in { animation: none !important; }
  .d-tile, .d-mtile, .d-cardsm, .bm-tile, .prog-card, .d-link, .ea-path { transition: none !important; }
}