/* premium-motion.css — wave 1 · agent D
   Loaded LAST, after strama.css + premium-global/home/pages.
   Owns the `m-*` classes set by motion.js plus premium micro-interactions.
   Everything degrades to a static page with no JS and is muted under
   prefers-reduced-motion. No !important unless overriding strama.css !important. */

:root { --m-ease: cubic-bezier(.2, .7, .2, 1); }

/* --- 5. Smooth page fade-in (CSS-only, no FOUC, no JS dependency) --- */
@media (prefers-reduced-motion: no-preference) {
  body { animation: m-page-in .4s var(--m-ease) both; }
}
@keyframes m-page-in { from { opacity: 0; } to { opacity: 1; } }

/* --- 3. Extended reveal (set by motion.js only) --- */
.m-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--m-ease), transform .8s var(--m-ease); will-change: opacity, transform; }
.m-reveal.m-in { opacity: 1; transform: none; }
.m-reveal[data-m-delay='1'] { transition-delay: .07s; }
.m-reveal[data-m-delay='2'] { transition-delay: .14s; }
.m-reveal[data-m-delay='3'] { transition-delay: .21s; }
.m-reveal[data-m-delay='4'] { transition-delay: .28s; }
.m-reveal[data-m-delay='5'] { transition-delay: .35s; }

/* --- 1. Parallax hint (transform itself is inline, per-frame, from motion.js) --- */
.m-parallax { will-change: transform; }

/* --- 4. Micro-interactions ------------------------------------------------ */

/* Card image zoom (containers already clip; article-card gets clipping here). */
.article-card { overflow: hidden; }
.space-card img, .article-card img { transition: transform .7s var(--m-ease); }
.space-card:hover img, .article-card:hover img { transform: scale(1.05); }

/* Consistent hover lift for cards / rows / tiles. */
.article-card, .resource-row, .decor-tile { transition: transform .4s var(--m-ease), box-shadow .4s var(--m-ease), border-color .2s; }
.article-card:hover, .resource-row:hover, .decor-tile:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(15, 27, 35, .1); }

/* Arrow slide inside buttons and text-links. */
.button span, .text-link em, .text-link > span { display: inline-block; transition: transform .4s var(--m-ease); }
.button:hover span, .text-link:hover em, .text-link:hover > span { transform: translateX(4px); }

/* Slide-in underline on text-links (skips resource rows, which own content:none). */
.text-link { position: relative; }
.text-link::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: currentColor; transition: width .45s var(--m-ease); }
.text-link:hover::after { width: 100%; }

/* Footer link underline slide (box shrunk to text so the line tracks the label). */
.footer-grid > div:not(.footer-brand) a { position: relative; width: -moz-fit-content; width: fit-content; max-width: 100%; }
.footer-grid > div:not(.footer-brand) a::after { content: ''; position: absolute; left: 0; bottom: 1px; height: 1px; width: 0; background: currentColor; transition: width .4s var(--m-ease); }
.footer-grid > div:not(.footer-brand) a:hover { text-decoration: none; }
.footer-grid > div:not(.footer-brand) a:hover::after { width: 100%; }

/* --- 6. Reduced motion: hard mute everything this layer adds --- */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .m-reveal { opacity: 1; transform: none; transition: none; }
  .m-parallax { transform: none; }
  .space-card img, .article-card img,
  .article-card, .resource-row, .decor-tile,
  .button span, .text-link em, .text-link > span,
  .text-link::after,
  .footer-grid > div:not(.footer-brand) a::after { transition: none; }
  .space-card:hover img, .article-card:hover img { transform: none; }
  .article-card:hover, .resource-row:hover, .decor-tile:hover { transform: none; }
  .button:hover span, .text-link:hover em, .text-link:hover > span { transform: none; }
}