/*
 * ProSocial Agency - Orbit hero
 * 22-hero-orbit.css
 * Front page only. Loads after 09-answer-deck.css.
 *
 * Text left, the four real service decks orbiting on a ring to the
 * right. The artifacts come from template-parts/answer-deck.php, so
 * everything inside .deck is already styled by 09-answer-deck.css and
 * this file must not restyle any of it. What it does instead is undo
 * the three things that deck does for a full-width hero column and
 * which fight a ring:
 *
 *   .deck has its own perspective       -> nested inside the stage's
 *   .deck__stack has a baked-in tilt    -> the ring owns rotation now
 *   .deck__card is absolutely positioned -> with one card it needs flow
 *
 * Ring positions are set in JS because they are trigonometry.
 */

.horbit {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-pad-y);
  background: var(--color-bg-base);
}

.horbit__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--section-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}

/* ---------- Text column ---------- */

.horbit__eyebrow {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-action);
  margin-bottom: var(--space-4);
}

.horbit__headline {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-5);
  color: var(--color-text-primary);
}

.horbit__lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-body);
  max-width: 46ch;
  margin: 0 0 var(--space-6);
}

.horbit__lede p:last-child { margin-bottom: 0; }

.horbit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

/* ---------- Ring control ---------- */

.horbit__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.horbit__tab {
  background: none;
  border: 0;
  padding: var(--space-2) 0;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  cursor: pointer;
  position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}

.horbit__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-action);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.horbit__tab:hover { color: var(--color-text-primary); }
.horbit__tab.is-active { color: var(--color-action); }
.horbit__tab.is-active::after { transform: scaleX(1); }
.horbit__tab:focus-visible { outline: 2px solid var(--color-action); outline-offset: 3px; }

/* ---------- Ring ---------- */

.horbit__stage {
  position: relative;
  height: 480px;
  perspective: 1600px;
  perspective-origin: 42% 50%;
}

.horbit__art {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  max-width: 560px;
  transform-style: preserve-3d;
    transition: transform 600ms var(--ease-out),
              opacity 600ms var(--ease-out),
              filter 600ms var(--ease-out);
  will-change: transform, opacity;
}

/* Only the artifact at the front of the ring is interactive. */
.horbit__art:not(.is-front) { pointer-events: none; }

/* Initial state, before hero-orbit.js has assigned ring positions.
   Without this every artifact sits at the same absolute position at
   full opacity, so the hero renders as four decks stacked on top of
   each other until the script runs — and it runs on window load, which
   waits for the laptop screenshot. Hiding them all and placing the
   first in the front slot means the hero is correct from first paint,
   and stays correct if the script never runs at all. */
.horbit__art { opacity: 0; }

.horbit__art:first-child {
  opacity: 1;
  transform: translate3d(10px, -50%, 0);
}

/* The laptop 20% wider than the cards. Container width rather than
   transform: scale(), because hero-orbit.js centres each artifact by
   reading offsetHeight and a scaled element reports its unscaled
   height — a scaled laptop would sit off-axis. */
.horbit__art--web { max-width: 672px; }

/* ---------- Undoing the deck's hero-column geometry ---------- */

.horbit__stage .deck {
  perspective: none;
  padding: 0;
}

/* The stack tilts itself by -5deg / 2.5deg for the service pages. In
   the ring the angle is the ring's job, and two rotations compound
   into something neither was designed for. */
.horbit__stage .deck__stack {
  transform: none;
  min-height: 0;
}

/* One card, so it can sit in flow and give the stack its height. On the
   service pages the cards are stacked absolutely and cycled. */
.horbit__stage .deck__card {
  position: relative;
  inset: auto;
  height: auto;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 1024px) {
  .horbit__inner { grid-template-columns: 1fr; }
  .horbit__stage { height: 440px; perspective-origin: 50% 50%; }
  .horbit__lede { max-width: none; }
}

/*
 * Below the tablet breakpoint the ring stops being a ring. There is no
 * room beside the front artifact for a queued one, and a 3D transform
 * on a phone costs more than it returns. The front artifact is shown
 * flat; the tabs still switch it.
 */
@media (max-width: 720px) {
    .horbit__stage {
    height: auto;
    perspective: none;
  }

  .horbit__art {
    position: relative;
    top: auto;
    max-width: none;
    transform: none !important;
    opacity: 0 !important;
    filter: none !important;
    height: 0;
    overflow: hidden;
  }

  .horbit__art.is-front {
    opacity: 1 !important;
    height: auto;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .horbit__art { transition: opacity 200ms linear; }
}