/* ==========================================================================
   motion-kit — additive motion layer for devbhoomirealtors.com
   --------------------------------------------------------------------------
   These are the effects from the uploaded motion-kit that the site did NOT
   already have. The kit's own tokens.css/effects.css are deliberately NOT
   imported: they carry a different palette and a dark theme, and the brief
   was "the effects, not the colours". So every colour below is drawn from
   the site's existing tokens (var(--sangam-500), var(--deodar-900), …) via
   color-mix, and there is no theme, no toggle, no new palette.

   The site already ships (in site.js): scroll reveal, tilt, magnetic,
   parallax, scroll progress, hover-video, word-by-word headings and smooth
   scroll. Running the kit's versions of those on the same elements would
   double-bind them, so only these three genuinely new ones are added:

       .mk-cursor-ring   a lagging ring that trails the pointer (desktop)
       [data-glow]       a pointer-tracked spotlight sheen on cards
       .ripple           a click ripple on buttons

   Motion kill switch: the site adds `motion-off` to <html> under
   prefers-reduced-motion before first paint. Everything here is scoped to
   :not(.motion-off) or hidden under it, and the JS checks the same query,
   so a reduced-motion visitor gets none of it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CURSOR RING
   A single hollow ring that lags a few frames behind the real cursor and
   swells over links and buttons. The native cursor is left visible on
   purpose -- replacing it site-wide fights text inputs and the forms, and
   a ring around the real arrow reads as intentional where a second dot on
   top of it reads as a bug. Fixed + pointer-events:none, so it can never
   intercept a click no matter how high its z-index sits.
   -------------------------------------------------------------------------- */
.mk-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--sangam-500) 60%, transparent);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform;
  transition:
    width .28s cubic-bezier(.22,1,.36,1),
    height .28s cubic-bezier(.22,1,.36,1),
    margin .28s cubic-bezier(.22,1,.36,1),
    opacity .3s ease,
    background-color .3s ease,
    border-color .3s ease;
}
.mk-cursor-ring.is-awake { opacity: 1; }
.mk-cursor-ring.is-active {          /* over a link or button */
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-color: color-mix(in srgb, var(--terrace-600) 55%, transparent);
  background: color-mix(in srgb, var(--terrace-600) 8%, transparent);
}
.mk-cursor-ring.is-down { transform-origin: center; }  /* JS scales on press */

/* No custom cursor on touch, coarse pointers, or reduced motion. */
@media (hover: none), (pointer: coarse) {
  .mk-cursor-ring { display: none; }
}
.motion-off .mk-cursor-ring { display: none; }

/* --------------------------------------------------------------------------
   2. CARD SPOTLIGHT  ([data-glow])
   The kit's glow-card puts the highlight BEHIND the card (z-index:-1),
   which only shows through a translucent glass card. These cards are opaque
   cream, so the same trick would be invisible. Instead the sheen sits just
   over the card as an ::after at very low opacity, following the pointer via
   --mx/--my written by the JS. Kept faint (sage, ~10%) so text on the card
   never loses contrast, and pointer-events:none so it is purely cosmetic.
   -------------------------------------------------------------------------- */
[data-glow] { position: relative; }
[data-glow]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;                 /* above media + overlay, below nothing clickable */
  opacity: 0;
  transition: opacity .45s cubic-bezier(.22,1,.36,1);
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--sangam-300) 22%, transparent),
    transparent 60%
  );
  mix-blend-mode: multiply;   /* darkens the sheen so it never washes text out */
}
[data-glow]:hover::after,
[data-glow]:focus-within::after { opacity: 1; }

.motion-off [data-glow]::after { display: none; }

/* --------------------------------------------------------------------------
   3. BUTTON RIPPLE  (.ripple, spawned by the JS at the click point)
   Uses currentColor, so it is automatically whatever the button's own text
   colour is -- white on the filled buttons, ink on the ghost ones -- and can
   never introduce a colour the palette does not already contain.
   -------------------------------------------------------------------------- */
@keyframes mk-ripple {
  from { transform: scale(0);   opacity: .35; }
  to   { transform: scale(2.6); opacity: 0;   }
}
.ripple {
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  margin: -1.75rem 0 0 -1.75rem;
  border-radius: 50%;
  background: currentColor;
  pointer-events: none;
  animation: mk-ripple 600ms ease-out forwards;
}
.motion-off .ripple { display: none; }