/* =====================================================================
   v7 motion: "gilded"
   Headings rise while a band of brass light passes over the letters once,
   photos open on a 115deg diagonal (the hero's own pattern angle), the
   quote is written in word by word. Gated by html.js-motion (set in <head>,
   skipped for reduced motion). assets/js/motion.js adds every class here.
   ===================================================================== */

/* soft rise: text, buttons, cards */
.js-motion .dm7-rise {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s ease var(--dl, 0s),
    transform 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) var(--dl, 0s);
}
.js-motion .dm7-rise.is-in {
  opacity: 1;
  transform: none;
}

/* headings: rise, then the gilded sheen sweeps across once */
.js-motion .dm7-gild {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1s ease var(--dl, 0s),
    transform 1.2s cubic-bezier(0.2, 0.7, 0.1, 1) var(--dl, 0s);
}
.js-motion .dm7-gild.is-in {
  opacity: 1;
  transform: none;
}
.js-motion .dm7-gild.is-sweeping {
  background-image: linear-gradient(
    105deg,
    var(--tc) 0%,
    var(--tc) 40%,
    var(--gc) 50%,
    var(--tc) 60%,
    var(--tc) 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dm7-sweep 2s cubic-bezier(0.45, 0, 0.2, 1) calc(var(--dl, 0s) + 0.35s) forwards;
}
@keyframes dm7-sweep {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

/* photos: diagonal wipe, image settles from a slight zoom */
.js-motion .dm7-wipe {
  clip-path: polygon(0 0, 0 0, -35% 100%, -35% 100%);
  transform: scale(1.07);
  transition:
    clip-path 1.5s cubic-bezier(0.7, 0, 0.2, 1) var(--dl, 0s),
    transform 2.2s cubic-bezier(0.2, 0.7, 0.1, 1) var(--dl, 0s);
}
.js-motion .dm7-wipe.dm7-noscale {
  transform: none;
}
.js-motion .dm7-wipe.is-in {
  clip-path: polygon(0 0, 135% 0, 100% 100%, -35% 100%);
  transform: none;
}

/* quote: written in word by word */
.js-motion .dm7-words .dm7-w {
  opacity: 0.08;
  transition: opacity 0.7s ease calc(var(--dl, 0s) + var(--i, 0) * 45ms);
}
.js-motion .dm7-words.is-in .dm7-w {
  opacity: 1;
}
.js-motion .quote-mark.dm7-rise {
  transform: translateY(18px) scale(0.7);
}
.js-motion .quote-mark.dm7-rise.is-in {
  transform: none;
}

/* stats: a brass rule draws in under each number */
.js-motion .dm7-rule {
  position: relative;
}
.js-motion .dm7-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 36px;
  height: 1px;
  background: var(--brass-light, #c9b48c);
  transform: translateX(-50%) scaleX(0);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.1, 1) calc(var(--dl, 0s) + 0.4s);
}
.js-motion .dm7-rule.is-in::after {
  transform: translateX(-50%) scaleX(1);
}