/*!
 * NP Twin Orbit Button v1.1.1 (Nature Perspectives)
 * "Platform" <-> "Try it now!" header button.
 * Look: D5 "Quiet Capsule" (Halo+ with quiet depth). Press: P3 "Aurora Ripple".
 *
 * Tweak the look with the custom properties in section 1.
 */

/* Lets the aurora light travel smoothly round the rim (falls back to still light in very old browsers). */
@property --npo-a {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

/* ------------------------------------------------------------------
   1. Settings (safe to edit)
   ------------------------------------------------------------------ */
.npo-host,
.np-orbit-cta {
  --npo-cycle: 7s;                          /* one full Platform -> Try it now! -> Platform loop */
  --npo-height: 42px;
  --npo-padding-x: 24px;
  --npo-font-size: 14.5px;
  --npo-font-weight: 600;
  --npo-text: #ffffff;                      /* first label */
  --npo-text-alt: #ffffff;                  /* second label */
  --npo-rim: rgba(188, 195, 247, 0.3);      /* resting outline */
  --npo-face-top: #152b46;                  /* capsule face, top to bottom */
  --npo-face-mid: #0f2236;
  --npo-face-bottom: #0c1c2e;
  --npo-tint: rgba(111, 233, 181, 0.2);     /* faint green glow inside */
  --npo-edge: #060d18;                      /* thin underside edge */
  --npo-aurora-1: #74e284;                  /* halo greens */
  --npo-aurora-2: #5fcbaa;
  --npo-rim-light-1: #9cf5b0;               /* rim greens */
  --npo-rim-light-2: #8ff0d0;
  --npo-aurora-deep: rgba(58, 143, 122, 1);
  --npo-ripple: rgba(143, 240, 208, 0.9);   /* press ring */
  --npo-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ------------------------------------------------------------------
   2. Before the script runs (and if it never does): a calm static capsule
   ------------------------------------------------------------------ */
a.np-orbit-cta:not(.npo-host),
.np-orbit-cta a:not(.npo-host) {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--npo-height) !important;
  padding: 0 var(--npo-padding-x) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--npo-face-top), var(--npo-face-bottom)) !important;
  box-shadow: inset 0 0 0 2px var(--npo-rim), 0 1px 0 0 var(--npo-edge) !important;
  color: var(--npo-text) !important;
  font-size: var(--npo-font-size) !important;
  font-weight: var(--npo-font-weight) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* ------------------------------------------------------------------
   3. The link itself: neutralise theme / Elementor / JetMenu styling
   ------------------------------------------------------------------ */
a.npo-host,
a.npo-host:hover,
a.npo-host:focus,
a.npo-host:active,
a.npo-host:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--npo-text) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  -webkit-tap-highlight-color: transparent;
}
a.npo-host::before,
a.npo-host::after {
  content: none !important;
  display: none !important;
}
a.npo-host:focus-visible {
  outline: 2px solid var(--npo-aurora-1) !important;
  outline-offset: 4px !important;
  border-radius: 999px !important;
}

/* Screen readers hear the first label only, once. */
.npo-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ------------------------------------------------------------------
   4. The capsule
   ------------------------------------------------------------------ */
/* Everything that presses together: halo, capsule and press ring. */
.npo-body {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  transition: transform 0.15s ease;
  animation: npo-turn calc(var(--npo-cycle) / 2) linear infinite;
}

/* Soft aurora glow just outside the capsule. */
.npo-halo {
  position: absolute;
  inset: -8px;
  z-index: 0;
  border-radius: 999px;
  background: conic-gradient(
    from var(--npo-a),
    rgba(95, 203, 170, 0) 0deg,
    rgba(95, 203, 170, 0) 60deg,
    rgba(58, 143, 122, 0.9) 120deg,
    var(--npo-aurora-1) 172deg,
    rgba(116, 226, 132, 0) 180deg,
    rgba(95, 203, 170, 0) 240deg,
    rgba(58, 143, 122, 0.9) 300deg,
    var(--npo-aurora-2) 352deg,
    rgba(95, 203, 170, 0) 360deg
  );
  filter: blur(10px);
  opacity: 0.6;
  pointer-events: none;
  animation: npo-halo var(--npo-cycle) var(--npo-ease) infinite both;
}

.npo {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--npo-height);
  padding: 0 var(--npo-padding-x);
  border-radius: 999px;
  overflow: hidden;
  background: var(--npo-rim);
  box-shadow: 0 1px 0 0 var(--npo-edge), 0 5px 10px -6px rgba(0, 0, 0, 0.6);
  color: var(--npo-text);
  font-family: inherit;
  font-size: var(--npo-font-size);
  font-weight: var(--npo-font-weight);
  line-height: 18px;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: box-shadow 0.15s ease, filter 0.25s ease;
}

/* Twin aurora arcs travelling round the rim. */
.npo-ring {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 999px;
  background: conic-gradient(
    from var(--npo-a),
    rgba(95, 203, 170, 0) 0deg,
    rgba(95, 203, 170, 0) 40deg,
    var(--npo-aurora-deep) 110deg,
    var(--npo-rim-light-1) 172deg,
    rgba(156, 245, 176, 0) 180deg,
    rgba(95, 203, 170, 0) 220deg,
    var(--npo-aurora-deep) 290deg,
    var(--npo-rim-light-2) 352deg,
    rgba(95, 203, 170, 0) 360deg
  );
  opacity: 0.9;
  animation: npo-flare var(--npo-cycle) var(--npo-ease) infinite both;
}

/* Capsule face: faint green tint, gentle top-to-bottom shading, soft bevel. */
.npo-core {
  position: absolute;
  inset: 2px;
  z-index: 1;
  border-radius: 999px;
  background:
    radial-gradient(120% 160% at 50% 130%, var(--npo-tint), rgba(111, 233, 181, 0) 60%),
    linear-gradient(180deg, var(--npo-face-top) 0%, var(--npo-face-mid) 55%, var(--npo-face-bottom) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -4px 7px rgba(0, 0, 0, 0.22);
}

/* Thin line of light along the top inside edge. */
.npo-sheen {
  position: absolute;
  z-index: 1;
  left: 10%;
  right: 10%;
  top: 2px;
  height: 62%;
  border-radius: 999px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 70%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  pointer-events: none;
}

/* Brief inner glow at each label change. */
.npo-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 999px;
  background: radial-gradient(70% 140% at 50% 130%, rgba(111, 233, 181, 0.42), rgba(111, 233, 181, 0) 70%);
  opacity: 0;
  animation: npo-glow var(--npo-cycle) var(--npo-ease) infinite both;
}

/* Labels share one grid cell, so the capsule is as wide as the longer one. */
.npo-stack {
  position: relative;
  z-index: 2;
  display: grid;
}
.npo-l {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.npo-l2 { color: var(--npo-text-alt); }

.npo-ch {
  display: inline-block;
  transform-origin: 50% 55%;
  animation-duration: var(--npo-cycle);
  animation-timing-function: var(--npo-ease);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: calc(var(--npo-i, 0) * 24ms);
}
.npo-sp {
  display: inline-block;
  width: 0.28em;
}
.npo-l1 .npo-ch { animation-name: npo-flip-out; }
.npo-l2 .npo-ch { opacity: 0; animation-name: npo-flip-in; }

/* Press ring (Aurora Ripple). Sits exactly on the capsule's outline. */
.npo-ripple {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 999px;
  box-shadow: 0 0 0 1.5px var(--npo-ripple), 0 0 16px 3px rgba(111, 233, 181, 0.5);
  opacity: 0;
  transform: scale(1.3);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
  pointer-events: none;
}

/* ------------------------------------------------------------------
   5. Hover and press
   ------------------------------------------------------------------ */
@media (hover: hover) {
  a.npo-host:hover .npo-body { transform: translateY(-1px); }
  a.npo-host:hover .npo {
    filter: brightness(1.12);
    box-shadow: 0 2px 0 0 var(--npo-edge), 0 8px 14px -7px rgba(0, 0, 0, 0.6);
  }
}

/* Held down: the whole capsule (halo and ring included) settles and shrinks a touch,
   and the aurora ring hugs the pressed outline. On release it springs back and the ring spreads out. */
a.npo-host:active .npo-body {
  transform: translateY(1px) scale(0.975);
  transition-duration: 0.06s;
}
a.npo-host:active .npo {
  box-shadow: 0 0 0 0 var(--npo-edge), 0 3px 6px -4px rgba(0, 0, 0, 0.6);
  transition-duration: 0.06s;
}
a.npo-host:active .npo-ripple {
  opacity: 1;
  transform: scale(1);
  transition: none;
}

/* ------------------------------------------------------------------
   6. Motion. Holds 2.8 s per label, hands over in about 0.7 s.
   ------------------------------------------------------------------ */
@keyframes npo-turn {
  from { --npo-a: 0deg; }
  to   { --npo-a: 360deg; }
}
@keyframes npo-halo {
  0%, 28%, 56%, 78%, 100% { opacity: 0.6; }
  38%, 46%, 88%, 96%      { opacity: 1; }
}
@keyframes npo-flare {
  0%, 28%, 56%, 78%, 100% { opacity: 0.9; }
  38%, 46%, 88%, 96%      { opacity: 1; }
}
@keyframes npo-glow {
  0%, 30%, 54%, 80%, 100% { opacity: 0; }
  42%, 92%                { opacity: 1; }
}
@keyframes npo-flip-out {
  0%, 35%      { transform: perspective(60px) rotateX(0deg);   opacity: 1; }
  41%          { transform: perspective(60px) rotateX(90deg);  opacity: 0; }
  41.1%, 87.9% { transform: perspective(60px) rotateX(-90deg); opacity: 0; }
  94%, 100%    { transform: perspective(60px) rotateX(0deg);   opacity: 1; }
}
@keyframes npo-flip-in {
  0%, 37.9%    { transform: perspective(60px) rotateX(-90deg); opacity: 0; }
  44%, 85%     { transform: perspective(60px) rotateX(0deg);   opacity: 1; }
  91%          { transform: perspective(60px) rotateX(90deg);  opacity: 0; }
  91.1%, 100%  { transform: perspective(60px) rotateX(-90deg); opacity: 0; }
}

/* Visitors who ask for less motion get a still "Platform" capsule; the press still responds. */
@media (prefers-reduced-motion: reduce) {
  .npo-body, .npo-halo, .npo-ring, .npo-glow, .npo-ch { animation: none !important; }
  .npo-ripple { transform: none !important; }
}

/* Inside Elementor's mobile dropdown, give the capsule some breathing room. */
.elementor-nav-menu--dropdown a.npo-host {
  margin: 12px 20px !important;
}