/* ==========================================================================
   Label Abha Jindal — Kanha Ji and Radha Ji for the paired sidebar rails
   Kanha animation remains namespaced .aj-kanha. Radha is a decorative
   pseudo-element on the existing Collections rail and never handles input.
   ========================================================================== */

.aj-kanha {
  /* The only value you should ever need to change. */
  --aj-kanha-width: 64px;

  position: relative;
  width: var(--aj-kanha-width);
  aspect-ratio: 702 / 1498;      /* the artwork's own proportions */
  margin-inline: auto;
  pointer-events: none;          /* never intercepts a click on the nav */
  user-select: none;
  z-index: 2;
}

/* Match the current seated Kanha's exact desktop anchor on the Search rail. */
.edge-utility-tab-search > .aj-kanha {
  position: absolute;
  top: -86px;
  left: 0;
  margin: 0;
}

/* A soft devotional glow. Remove this rule if it reads as too much. */
.aj-kanha__glow {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 120%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 162, 39, .20), rgba(201, 162, 39, 0) 70%);
}

.aj-kanha__in {
  position: absolute;
  inset: 0;
  transform-origin: 50% 96%;     /* he breathes from where he is seated */
  will-change: transform;
}

.aj-kanha__lower,
.aj-kanha__upper,
.aj-kanha__flute {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  display: block;
  -webkit-user-drag: none;
}

/* ---------------------------------------------------------------------------
   THE ONE RULE THAT MATTERS MOST

   The body above the waistband and the bansuri live inside this single group,
   so they rotate together as one rigid object. If the flute is ever moved out
   of .aj-kanha__sway, it stops following his head and the mouthpiece drifts off
   his lips on every sway.

   Any motion added later goes ON this group, or on something INSIDE it —
   never on a sibling of the flute.
   --------------------------------------------------------------------------- */
.aj-kanha__sway {
  position: absolute;
  inset: 0;
  transform-origin: 50% 51.5%;   /* the green waistband — the seam hides in the fabric */
  will-change: transform;
}

.aj-kanha__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Seated Radha Ji — decorative companion on the right Collections rail.

   The artwork already faces screen-left, toward Kanha Ji. Keep it unmirrored,
   static, and non-interactive so the Collections control remains unchanged.
   --------------------------------------------------------------------------- */

.edge-utility-tab-collections {
  isolation: isolate;
  overflow: visible;
}

.edge-utility-tab-collections::before {
  content: "";
  position: absolute;
  top: -86px;
  right: 0;
  z-index: 2;
  display: block;
  width: 64px;
  aspect-ratio: 702 / 1498;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  background: url("/wp-content/themes/abha-jindal-migration/assets/radha/radha-collections.webp") center / contain no-repeat;
}

/* ---------------------------------------------------------------------------
   Responsive + accessibility
   --------------------------------------------------------------------------- */

/* Narrow screens: keep both companions seated above the compact rail controls.
   The artwork remains decorative and cannot intercept taps. */
@media (max-width: 900px) {
  .edge-utility-tab-search > .seated-kanha {
    display: block !important;
    width: 48px;
    top: -68px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .edge-utility-tab-search > .aj-kanha {
    --aj-kanha-width: 48px;
    display: block !important;
    top: -68px;
    left: 50%;
    transform: translateX(-50%);
  }

  .edge-utility-tab-collections::before {
    display: block !important;
    width: 48px;
    top: -68px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Visitors who ask for reduced motion get him seated and still. */
@media (prefers-reduced-motion: reduce) {
  .aj-kanha__in,
  .aj-kanha__sway { animation: none !important; transform: none; }
  .aj-kanha__glow {
    animation: none !important;
    transform: translate(-50%, -50%);
  }
  .aj-kanha .aj-kanha__notes { opacity: 0 !important; }
}