/* ==========================================================================
   Arsolia — Experimental text / heading / hero motion (site-wide)
   Self-contained: remove this file + motion.js + the enqueue block to undo.
   All hidden states only apply under html.has-motion (added before paint,
   removed automatically if motion.js fails to boot).
   ========================================================================== */

/* ---------- Split-text primitives ---------- */
.m-word {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
}

.m-mask .m-word {
  overflow: hidden;
  /* room for descenders + italic overhang inside the mask */
  padding: 0 0.06em 0.12em;
  margin: 0 -0.06em -0.12em;
}

.m-unit {
  display: inline-block;
}

/* Masked rise (headings) */
.has-motion .m-mask .m-unit {
  transform: translateY(112%) rotate(5deg);
  transform-origin: 0 100%;
  transition: transform 1.05s cubic-bezier(0.19, 1, 0.22, 1) var(--md, 0ms);
}

.has-motion .m-mask.m-in .m-unit {
  transform: none;
}

/* Soft blur-in (paragraphs) */
.has-motion .m-soft .m-unit {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(0.45em);
  transition:
    opacity 0.8s var(--ease-out) var(--md, 0ms),
    filter 0.8s var(--ease-out) var(--md, 0ms),
    transform 0.8s var(--ease-out) var(--md, 0ms);
}

.has-motion .m-soft.m-in .m-unit {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* Kicker: a fine sage rule draws in, then the label tracks out */
.has-motion .m-kicker {
  opacity: 0;
  letter-spacing: 0.32em;
  transition: opacity 0.9s var(--ease-out) var(--md, 0ms), letter-spacing 1.2s var(--ease-out) var(--md, 0ms);
}

.m-kicker::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 1px;
  margin-right: 0;
  vertical-align: middle;
  background: var(--color-sage);
  transition: width 0.9s var(--ease-out) var(--md, 0ms), margin-right 0.9s var(--ease-out) var(--md, 0ms);
}

.has-motion .m-kicker.m-in {
  opacity: 1;
  letter-spacing: 0.18em;
}

.has-motion .m-kicker.m-in::before {
  width: 1.6rem;
  margin-right: 0.7rem;
}

/* Generic rise (buttons, small blocks, footer columns) */
.has-motion .m-rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease-out) var(--md, 0ms), transform 0.9s var(--ease-out) var(--md, 0ms);
}

.has-motion .m-rise.m-in {
  opacity: 1;
  transform: none;
}

/* Image unveil (article / framed hero images) */
.has-motion .m-unveil {
  clip-path: inset(12% 6% 12% 6% round 1.5rem);
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition:
    clip-path 1.4s cubic-bezier(0.19, 1, 0.22, 1) var(--md, 0ms),
    opacity 0.9s var(--ease-out) var(--md, 0ms),
    transform 1.4s cubic-bezier(0.19, 1, 0.22, 1) var(--md, 0ms);
}

.has-motion .m-unveil.m-in {
  clip-path: inset(0 0 0 0 round 1.5rem);
  opacity: 1;
  transform: none;
}

/* ---------- Heroes (every page) ---------- */
/* Hold hero text until it is split (prevents a flash of unsplit text) */
.has-motion:not(.m-booted) main [class*="hero"] :is(h1, p, .hero__actions) {
  opacity: 0;
}

/* Full-bleed background heroes: slow zoom out of a soft blur */
.has-motion .hero__media img,
.has-motion .gd-hero__media img {
  transform: scale(1.16);
  filter: blur(4px);
  transition: transform 2.8s cubic-bezier(0.19, 1, 0.22, 1), filter 1.8s var(--ease-out);
}

.has-motion .m-hero.m-in .hero__media img,
.has-motion .m-hero.m-in .gd-hero__media img {
  transform: scale(1.05);
  filter: blur(0);
}

/* Scroll cue: a breathing line */
.hero__scroll::after {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%) 0 0 / 200% 100%;
  animation: m-scroll-line 2.2s ease-in-out infinite;
}

@keyframes m-scroll-line {
  0% { background-position: 100% 0; }
  50% { background-position: 0% 0; }
  100% { background-position: -100% 0; }
}

/* Magnetic buttons */
.m-magnet {
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.m-magnet.is-pulling {
  transition: transform 0.15s ease-out;
}

/* Numbers that count up */
.m-count {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .has-motion .m-mask .m-unit,
  .has-motion .m-soft .m-unit,
  .has-motion .m-kicker,
  .has-motion .m-rise,
  .has-motion .m-unveil,
  .has-motion .hero__media img,
  .has-motion .gd-hero__media img,
  .has-motion:not(.m-booted) main [class*="hero"] :is(h1, p, .hero__actions) {
    opacity: 1;
    filter: none;
    transform: none;
    clip-path: none;
    transition: none;
  }

  .hero__scroll::after {
    animation: none;
  }
}