/* ============================================================
   Orbit Hero — frameworkless CSS module
   Variables you can override per ring / item:
     --radius     orbit radius in px
     --duration   full revolution time
     --angle      starting angular position
     --delay      negative animation-delay used to seat each item
                  at its starting angle without breaking the loop
     --tint       ring outline color
     --accent     per-badge glow accent
   Global theme variables on .orbit-hero:
     --orbit-bg, --orbit-text, --orbit-glow, --orbit-scale
   ============================================================ */

.orbit-hero,
.orbit-hero *,
.orbit-hero *::before,
.orbit-hero *::after {
  box-sizing: border-box;
}

.orbit-hero {
  --orbit-bg:    #05070d;
  --orbit-text:  #ffffff;
  --orbit-line:  rgba(125, 211, 252, 0.18);
  --orbit-glow:  #7dd3fc;
  --orbit-scale: 1;

  /* Themeable palette (overridable via shortcode atts or custom CSS) */
  --orbit-accent:          #ff2d78;
  --orbit-extra-1:         #00ffcc;
  --orbit-extra-2:         #ffe04a;
  --orbit-extra-3:         #8224e3;
  --orbit-grad-from:       #0de2b8;
  --orbit-grad-to:         #0f8fff;
  --orbit-grad2-from:      #ff1053;
  --orbit-grad2-to:        #ff4f0f;

  /* Defaults consumed by items; overridden inline per ring/item. */
  --radius:   200px;
  --duration: 30s;
  --angle:    0deg;
  --delay:    0s;
  --accent:   var(--orbit-accent);

  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-color: var(--orbit-bg);
  color: var(--orbit-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Background layers ---------- */

.orbit-hero__bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  rgba(125,211,252,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(125,211,252,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.35;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.orbit-hero__bg-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(56,189,248,0.18), transparent 60%),
    radial-gradient(40% 30% at 50% 20%, rgba(139,92,246,0.18), transparent 70%),
    radial-gradient(40% 30% at 50% 90%, rgba(34,211,238,0.10), transparent 70%);
}

.orbit-hero__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 10rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--orbit-bg));
}

/* ---------- Particles ---------- */

.orbit-hero__particles {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.orbit-particle {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, var(--orbit-accent) 75%, white);
  filter: blur(0.5px);
  opacity: 0;
  animation: orbit-particle var(--p-duration, 8s) ease-in-out infinite;
  animation-delay: var(--p-delay, 0s);
  will-change: transform, opacity;
}
@keyframes orbit-particle {
  0%   { transform: translateY(0);     opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(-30px); opacity: 0; }
}

/* ---------- Layout ---------- */

.orbit-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
}

.orbit-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 48rem;
  text-align: center;
}

.orbit-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(186, 230, 253, 0.9);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.orbit-hero__dot {
  width: 6px; height: 6px;
  background: var(--orbit-accent);
  border-radius: 50%;
  animation: orbit-dot 1.4s ease-in-out infinite;
  box-shadow: 0 0 8px color-mix(in srgb, var(--orbit-accent) 60%, transparent);
}
@keyframes orbit-dot { 50% { opacity: 0.3; } }

.orbit-hero__title {
  margin: 1.5rem 0 0;
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: linear-gradient(to bottom, #fff, rgba(255,255,255,0.6));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.orbit-hero__subtitle {
  max-width: 36rem;
  margin: 1.25rem auto 0;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
}

.orbit-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
.orbit-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              border-color 0.2s ease, color 0.2s ease;
}
.orbit-hero__cta--primary {
  background: #fff;
  color: #000;
}
.orbit-hero__cta--primary:hover {
  transform: scale(1.02);
  box-shadow: 0 0 24px color-mix(in srgb, var(--orbit-accent) 45%, transparent);
}
.orbit-hero__cta--ghost {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.orbit-hero__cta--ghost:hover {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

/* ---------- Stage / scaling / parallax / float ---------- */

.orbit-hero__stage {
  position: relative;
  width: 100%;
  max-width: 880px;
  aspect-ratio: 1 / 1;
  margin-top: 2.5rem;
  flex: 1 1 auto;
}

.orbit-hero__parallax {
  position: absolute; inset: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.orbit-hero__scale {
  position: absolute; inset: 0;
  transform: scale(var(--orbit-scale, 1));
  transform-origin: center;
}

.orbit-hero__float {
  position: absolute; inset: 0;
  animation: orbit-float 10s ease-in-out infinite;
  will-change: transform;
}
@keyframes orbit-float {
  50% { transform: translateY(-8px); }
}

/* ---------- Center core ---------- */

.orbit-center {
  position: absolute;
  left: 50%; top: 50%;
  width: 112px; height: 112px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.orbit-center__pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center,
                color-mix(in srgb, var(--orbit-accent) 45%, transparent),
                transparent 65%);
  animation: orbit-core-pulse 3.6s ease-in-out infinite;
}
@keyframes orbit-core-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.25); opacity: 0.15; }
}
.orbit-center__midring {
  position: absolute; inset: 12px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--orbit-accent) 35%, transparent);
  animation: orbit-ring-rotate 18s linear infinite;
}
.orbit-center__core {
  position: absolute;
  left: 50%; top: 50%;
  width: 56px; height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 0 24px 6px color-mix(in srgb, var(--orbit-accent) 30%, transparent),
    inset 0 0 12px rgba(255, 255, 255, 0.08);
  animation: orbit-core-glow 2.4s ease-in-out infinite;
}
.orbit-center__core svg { width: 22px; height: 22px; }
@keyframes orbit-core-glow {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.8; }
}

/* ---------- Connection lines ---------- */

.orbit-hero__lines {
  position: absolute;
  left: 50%; top: 50%;
  overflow: visible;
}
.orbit-hero__lines line {
  opacity: 0;
  animation: orbit-line-pulse 4s ease-in-out infinite;
}
@keyframes orbit-line-pulse {
  0%, 100% { opacity: 0;   }
  50%      { opacity: 0.6; }
}

/* ---------- Rings ---------- */

.orbit-ring {
  position: absolute;
  left: 50%; top: 50%;
}
.orbit-ring__outline {
  position: absolute;
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  left: calc(var(--radius) * -1);
  top:  calc(var(--radius) * -1);
  border: 1px solid var(--tint, rgba(125, 211, 252, 0.18));
  border-radius: 50%;
  pointer-events: none;
}
.orbit-ring--dashed .orbit-ring__outline { border-style: dashed; }
.orbit-ring--mid    .orbit-ring__outline { opacity: 0.85; }
.orbit-ring--back   .orbit-ring__outline {
  opacity: 0.55;
  filter: blur(0.6px);
}
.orbit-ring--rotating .orbit-ring__outline {
  animation: orbit-ring-rotate calc(var(--duration) * 4) linear infinite;
  will-change: transform;
}
@keyframes orbit-ring-rotate {
  to { transform: rotate(360deg); }
}

/* ---------- Orbit arm + counter-rotation ----------
   Mathematical model:
     arm:  R(t)         rotates 0 → 360deg around (0,0)
     pos:  T(radius,0)  translates outward to the orbit
     pos:  R(-t)        counter-rotates so contents stay upright
     start offset is achieved via a negative animation-delay so the
     loop seam never appears.
   --------------------------------------------------- */

.orbit-arm {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  transform-origin: 0 0;
  animation: orbit-arm-spin var(--duration, 30s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
.orbit-arm--reverse { animation-direction: reverse; }
@keyframes orbit-arm-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

.orbit-pos {
  position: absolute;
  width: 48px; height: 48px;
  /* place the badge on the orbit, then center it */
  left: calc(var(--radius) - 24px);
  top: -24px;
  /* counter-rotation keeps the badge upright */
  animation: orbit-pos-spin var(--duration, 30s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
.orbit-arm--reverse .orbit-pos { animation-direction: reverse; }
@keyframes orbit-pos-spin {
  from { transform: rotate(0deg);    }
  to   { transform: rotate(-360deg); }
}

/* ---------- Badge ---------- */

.orbit-badge {
  position: relative;
  width: 100%; height: 100%;
  pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}
.orbit-badge:hover { transform: scale(1.18); }

.orbit-ring--mid  .orbit-badge { opacity: 0.85; }
.orbit-ring--back .orbit-badge {
  opacity: 0.55;
  filter: blur(0.4px);
}

.orbit-badge__glow {
  position: absolute; inset: 0;
  border-radius: 16px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 33%, transparent), transparent 70%);
  filter: blur(14px);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.orbit-badge:hover .orbit-badge__glow { opacity: 1; }

.orbit-badge__chip {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.9);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 8px 28px -10px color-mix(in srgb, var(--accent) 40%, transparent),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.orbit-badge:hover .orbit-badge__chip {
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.orbit-badge__chip svg { width: 22px; height: 22px; }

.orbit-badge__label {
  position: absolute;
  left: 50%; bottom: -28px;
  transform: translateX(-50%);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.2s ease;
}
.orbit-badge:hover .orbit-badge__label { opacity: 1; }

/* Fallback for browsers without color-mix() — solid accent at low alpha */
@supports not (color: color-mix(in srgb, red, blue)) {
  .orbit-badge__glow { background: radial-gradient(closest-side, rgba(125,211,252,0.33), transparent 70%); }
  .orbit-badge__chip { box-shadow: 0 8px 28px -10px rgba(125,211,252,0.4), inset 0 0 0 1px rgba(255,255,255,0.04); }
}

/* ---------- Layout variants ---------- */

/* Transparent background — orbit floats on the page's own background */
.orbit-hero.orbit-hero--transparent {
  background-color: transparent !important;
  min-height: auto;
}

/* No-copy variant — orbit only, no title/subtitle/CTAs */
.orbit-hero.orbit-hero--no-copy {
  min-height: auto;
}
.orbit-hero--no-copy .orbit-hero__inner {
  padding: 1.5rem 1rem;
  min-height: auto;
}
.orbit-hero--no-copy .orbit-hero__stage {
  margin-top: 0;
}

/* Salient / WPBakery column break-out — escape the parent container
   and span the full viewport width. Safe to combine with --transparent. */
.orbit-hero.orbit-hero--breakout {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ---------- Responsive scaling ---------- */

.orbit-hero { --orbit-scale: 1; }
@media (max-width: 1023px) { .orbit-hero { --orbit-scale: 0.85; } }
@media (max-width: 767px)  { .orbit-hero { --orbit-scale: 0.65; } }
@media (max-width: 479px)  { .orbit-hero { --orbit-scale: 0.5;  } }

@media (max-width: 767px) {
  .orbit-hero__inner { padding: 5rem 1rem 3rem; }
  .orbit-badge__chip svg { width: 18px; height: 18px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .orbit-hero *,
  .orbit-hero *::before,
  .orbit-hero *::after {
    animation: none !important;
    transition: none !important;
  }
}