/* Magnet Mischief: motion layer.
   Personality: PHYSICAL, restrained (older audience).
   Three curves only: spring-snappy (reveals), ease-snap (hover/press), linear (ambient loop). */
:root {
  --mm-spring: linear(
    0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%,
    0.938 16.7%, 1.017 19.4%, 1.067 22.5%, 1.089 26.0%,
    1.079 30.3%, 1.049 36.0%, 1.024 42.6%, 1.011 50.3%,
    1.004 59.2%, 1.001 69.3%, 1
  );
  --mm-snap: cubic-bezier(0.22, 1, 0.36, 1);
  --mm-rise: 24px;
  --mm-dur: 700ms;
}

@media (prefers-reduced-motion: no-preference) {
  /* Scroll/entry reveal. Uses the individual `translate` property so it never
     fights the site's own transform/rotate utilities; attributes are removed
     once the reveal finishes, handing the element back untouched. */
  [data-mm="pending"] {
    opacity: 0;
    translate: 0 var(--mm-rise);
  }
  [data-mm="pending"][data-mm-blur] { filter: blur(6px); }

  [data-mm="in"] {
    opacity: 1;
    translate: 0 0;
    filter: none;
    transition:
      opacity var(--mm-dur) var(--mm-snap) var(--mm-delay, 0ms),
      translate var(--mm-dur) var(--mm-spring) var(--mm-delay, 0ms),
      filter var(--mm-dur) var(--mm-snap) var(--mm-delay, 0ms);
  }

  /* Header drops in on load */
  header { animation: mm-drop 600ms var(--mm-snap) both; }
  @keyframes mm-drop { from { opacity: 0; translate: 0 -16px; } }

  /* Hero magnet: slow ambient float (translate) — tilt/parallax live on its wrapper */
  .mm-float { animation: mm-float 7s linear infinite; }
  @keyframes mm-float {
    0%, 100% { translate: 0 0; }
    25% { translate: 0 -4px; }
    50% { translate: 0 -6px; }
    75% { translate: 0 -3px; }
  }
  .mm-tilt { will-change: transform; transform-style: preserve-3d; }
}

/* Hover + press feedback, only for real pointers (taps on touch fire :hover) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mm-card {
    transition: transform 350ms var(--mm-snap), box-shadow 350ms var(--mm-snap);
  }
  .mm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -18px rgba(60, 40, 20, 0.28);
  }
  .mm-card img { transition: transform 600ms var(--mm-snap); }
  .mm-card:hover img { transform: scale(1.04); }

  a[class*="rounded-full"], button[class*="rounded-full"], button[class*="rounded-xl"] {
    transition-property: color, background-color, border-color, box-shadow, scale;
    transition-duration: 200ms;
    transition-timing-function: var(--mm-snap);
  }
  a[class*="rounded-full"]:active, button:active { scale: 0.97; }
}

/* "Crafted by HAMMND" footer credit */
.mm-credit {
  color: rgba(214, 206, 191, 0.55);
  border-color: rgba(214, 206, 191, 0.15);
  background: rgba(214, 206, 191, 0.05);
  transition: color 200ms var(--mm-snap), border-color 200ms var(--mm-snap);
}
.mm-credit:hover { color: rgba(214, 206, 191, 0.85); border-color: rgba(200, 90, 50, 0.45); }