/* =========================================================================
   forestana.com — microx polish layer
   Additive only. All classes prefixed mx-*. Uses design tokens from styles.css.
   ========================================================================= */

/* ------------------------------------------------------------ 1. REVEALS */
.mx-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms var(--easing, cubic-bezier(0.2, 0.7, 0.2, 1)),
    transform 700ms var(--easing, cubic-bezier(0.2, 0.7, 0.2, 1));
  will-change: opacity, transform;
}
.mx-reveal.mx-reveal--in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------ 2. TILT */
.mx-tilt {
  transform-style: preserve-3d;
  transition: transform 200ms ease;
  will-change: transform;
}

/* ------------------------------------------------------------ 3. CURSOR */
.mx-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 200ms var(--easing, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.mx-cursor.is-visible {
  opacity: 1;
}
.mx-cursor__ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--color-petal-orange);
  background: transparent;
  transform: scale(0.5);
  transition:
    transform 220ms var(--easing, cubic-bezier(0.2, 0.7, 0.2, 1)),
    border-color 220ms var(--easing, cubic-bezier(0.2, 0.7, 0.2, 1)),
    background-color 220ms var(--easing, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.mx-cursor.is-hover .mx-cursor__ring {
  transform: scale(1.6);
  border-color: var(--color-bloom-blue);
  background: color-mix(in srgb, var(--color-petal-orange) 14%, transparent);
}

/* ------------------------------------------------------------ 4. SCROLL PROGRESS */
.mx-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gradient-stem);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 200;
  pointer-events: none;
  will-change: transform;
}

/* ------------------------------------------------------------ 5. LANG PILL ENHANCED
   The base .lang-toggle__pill rule in styles.css uses a transform on
   [data-active="pt"]. When .mx-lang-pill-enhanced is added by JS, we
   override that with a CSS-variable-driven translation so the pill can
   land pixel-precisely under either button, with a richer easing curve. */
.mx-lang-pill-enhanced .lang-toggle__pill {
  width: var(--mx-pill-w, calc(50% - 12px));
  transform: translateX(var(--mx-pill-x, 0px));
  transition:
    transform 420ms cubic-bezier(0.34, 1.25, 0.4, 1),
    background-color var(--duration, 280ms) var(--easing, cubic-bezier(0.2, 0.7, 0.2, 1)),
    width var(--duration, 280ms) var(--easing, cubic-bezier(0.2, 0.7, 0.2, 1));
}
/* Override the existing translate rule so JS values win without !important wars */
.mx-lang-pill-enhanced.lang-toggle[data-active="pt"] .lang-toggle__pill {
  transform: translateX(var(--mx-pill-x, 0px));
}

/* ------------------------------------------------------------ MEDIA QUERIES */
@media (prefers-reduced-motion: reduce) {
  .mx-reveal,
  .mx-reveal.mx-reveal--in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mx-tilt {
    transform: none !important;
    transition: none;
  }
  .mx-cursor {
    display: none;
  }
  .mx-scroll-progress {
    transition: none;
  }
  .mx-lang-pill-enhanced .lang-toggle__pill {
    transition: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .mx-cursor {
    display: none;
  }
  .mx-tilt {
    transform: none !important;
  }
}