/* ============================================================
   micro-interactions.css
   Trusty Food Products — restrained micro-interactions
   (smooth scroll, header state, card hover and button hover
   already live in style.css — this file only adds the pieces
   that weren't there yet: scroll reveal, subtle parallax and
   the optional desktop custom cursor.)
   ============================================================ */

/* ----------------------------------------------------------
   Scroll Reveal
   Usage: add data-reveal to any element; optional
   data-delay="1".."3" to stagger a group of siblings.
   ---------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-delay="1"] { transition-delay:  80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }

/* ----------------------------------------------------------
   Subtle Parallax
   Usage: data-parallax on the image wrapper. Optional
   data-parallax-speed (default 0.07, smaller = subtler).
   Desktop only — JS disables this below 1024px width.
   ---------------------------------------------------------- */
[data-parallax] {
  overflow: hidden;
  will-change: transform;
}

/* ----------------------------------------------------------
   Optional desktop custom cursor (dot + ring)
   Built by micro-interactions.js. Disabled on touch devices
   and narrow viewports automatically.
   ---------------------------------------------------------- */
.mi-cursor-dot,
.mi-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  will-change: transform, left, top;
}
.mi-cursor-dot {
  width: 5px;
  height: 5px;
  background-color: #2C4A3E;
  transition: width 180ms ease, height 180ms ease, background-color 180ms ease, opacity 150ms ease;
  z-index: 10000;
}
.mi-cursor-ring {
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(184, 151, 90, 0.65);
  background: transparent;
  transition: width 220ms ease, height 220ms ease, opacity 220ms ease;
  opacity: 0.6;
}
.mi-cursor-dot.is-hovering {
  width: 9px;
  height: 9px;
  background-color: #B8975A;
}
.mi-cursor-ring.is-hovering {
  width: 42px;
  height: 42px;
  opacity: 0.35;
}
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button {
  cursor: none !important;
}

/* ----------------------------------------------------------
   prefers-reduced-motion — switch everything above off
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
  .mi-cursor-dot,
  .mi-cursor-ring {
    display: none !important;
  }
  body.has-custom-cursor,
  body.has-custom-cursor * {
    cursor: auto !important;
  }
}