/* ==========================================================================
   Mango motion layer · v1
   Additive only. Every rule is scoped to [data-motion*] attributes under
   html.motion-ready, which motion.js adds. No JS, or reduced motion = the
   site renders exactly as it does today.
   Remove the two tags (stylesheet link + motion.js script) to roll back.
   ========================================================================== */

:root {
  --mm-ease: cubic-bezier(.2, .7, .2, 1);
  --mm-dur: 700ms;
  --mm-accent: #F5A623;   /* Mango Orange, accents only */
  --mm-ok: #2D6A4F;       /* Leaf Green, success states */
}

/* 1 · Section reveal: fade up once on scroll -------------------------- */
.motion-ready [data-motion~="reveal"] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--mm-dur) var(--mm-ease),
              transform var(--mm-dur) var(--mm-ease);
  transition-delay: calc(var(--mm-i, 0) * 90ms);
}
.motion-ready [data-motion~="reveal"].is-in {
  opacity: 1;
  transform: none;
}

/* 2 · Job-card sequence: steps tick on in order ----------------------- */
.motion-ready [data-motion~="sequence"] > * {
  opacity: .32;
  transition: opacity 380ms var(--mm-ease);
}
.motion-ready [data-motion~="sequence"] > *.is-done { opacity: 1; }
.motion-ready [data-motion~="sequence"] > * [data-motion-check] {
  transform: scale(.4);
  opacity: 0;
  transition: transform 420ms cubic-bezier(.3, 1.6, .5, 1), opacity 200ms;
}
.motion-ready [data-motion~="sequence"] > *.is-done [data-motion-check] {
  transform: none;
  opacity: 1;
}

/* Elements that wait for a sequence (status badge, credit line) */
.motion-ready [data-motion-after] {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 500ms var(--mm-ease), transform 500ms var(--mm-ease);
}
.motion-ready [data-motion-after].is-in { opacity: 1; transform: none; }

/* 3 · Strikethrough draws across each line ---------------------------- */
.motion-ready [data-motion~="strike"] :is(s, del) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 0% 1.5px;
  transition: background-size 520ms var(--mm-ease);
  transition-delay: calc(var(--mm-i, 0) * 220ms + 200ms);
}
.motion-ready [data-motion~="strike"].is-in :is(s, del) {
  background-size: 100% 1.5px;
}

/* 4 · Count-up numbers: tabular figures so width doesn't jitter ------- */
[data-motion~="count"] { font-variant-numeric: tabular-nums; }
/* motion.js keeps the real figure in a visually-hidden span (what screen
   readers, DOM snapshots and print get) and animates an aria-hidden copy.
   The copy is generated content, not text, so the figure is never doubled in
   innerText, copy-paste or a search snippet. */
.mm-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mm-anim::before { content: attr(data-n); }

/* 5 · Glow: product frame lifts with a soft orange halo --------------- */
.motion-ready [data-motion~="glow"] {
  transition: box-shadow 1200ms var(--mm-ease), transform 1200ms var(--mm-ease);
}
.motion-ready [data-motion~="glow"].is-in {
  /* --mm-base-shadow: the element's own shadow, kept under the halo */
  box-shadow: var(--mm-base-shadow, 0 0 0 0 transparent),
              0 30px 80px -30px rgba(245, 166, 35, .45),
              0 0 0 1px rgba(245, 166, 35, .18);
}
/* reveal + glow on one element: one transition list, so neither the fade nor
   the stagger delay is wiped by the glow's shorthand */
.motion-ready [data-motion~="reveal"][data-motion~="glow"] {
  transition: opacity var(--mm-dur) var(--mm-ease),
              transform var(--mm-dur) var(--mm-ease),
              box-shadow 1200ms var(--mm-ease);
  transition-delay: calc(var(--mm-i, 0) * 90ms);
}
.motion-ready [data-motion~="pulse"].is-in {
  animation: mm-pulse 2.4s var(--mm-ease) 600ms 2;
}
@keyframes mm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 106, 79, 0); }
  40%      { box-shadow: 0 0 0 8px rgba(45, 106, 79, .16); }
}

/* 6 · Hover lift for buttons and cards (opt-in) ----------------------- */
/* gated on .motion-ready like everything else (no JS → untouched), and it
   keeps the colour transitions buttons already have */
.motion-ready [data-motion~="lift"] {
  transition: transform 180ms var(--mm-ease), box-shadow 180ms var(--mm-ease),
              background-color .12s, color .12s, border-color .12s;
}
.motion-ready [data-motion~="lift"]:hover { transform: translateY(-2px); }

/* Print: everything that hasn't scrolled into view yet prints as finished */
@media print {
  .motion-ready [data-motion],
  .motion-ready [data-motion] > *,
  .motion-ready [data-motion] [data-motion-check],
  .motion-ready [data-motion-after] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .motion-ready [data-motion~="strike"] :is(s, del) {
    text-decoration: line-through !important; background-image: none !important;
  }
  .mm-anim { display: none !important; }
  .mm-sr { position: static !important; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; }
}

/* Safety net: reduced motion = no transforms, no transitions ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-motion], [data-motion] *, [data-motion-after] {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}