/* ============================================================
   uni.css — HpUnify · "Ten systems collapse into one."
   Flagship BEFORE / AFTER set-piece. LIGHT sand-blue theme all
   the way through (no dark band, no rainbow module tints).
   De-boxed: no heavy bordered cards — content breathes on the
   page, with ONE soft-elevated stage for the orbit (the hero).
   LEFT: fragmented stack of scattered app tiles + broken dashed
   links. RIGHT: unified orbit — ten COMPACT module chips revolve
   endlessly + evenly around one DocsDocs core, wires from core to
   each chip. Geometry (orbit radius, per-chip --x/--y, wire coords)
   and the continuous rotation are driven in uni.js; CSS styles.
   All selectors namespaced .uni-*  |  scoped under .uni.
   ============================================================ */

.uni {
  --uni-blue: #5a82c2;
  --uni-blue-deep: #3d63a4;
  --uni-blue-lite: #8aa6dd;
  --uni-tint: color-mix(in srgb, #5a82c2 6%, #ffffff);
  --uni-tint-2: color-mix(in srgb, #5a82c2 11%, #ffffff);
  --uni-line: #dce0ee;
  position: relative;
  padding-block: clamp(56px, 8vw, 108px);
}

/* ---------------- header ---------------- */
.uni-head {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
}
.uni-eyebrow {
  color: var(--uni-blue-deep);
  display: inline-block;
}
.uni-h {
  margin-top: 12px;
}
.uni-lead {
  margin-left: auto;
  margin-right: auto;
  max-width: 58ch;
}

/* ---------------- BEFORE | cue | AFTER split ---------------- */
.uni-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 2vw, 30px);
  margin-top: clamp(34px, 5vw, 64px);
}

/* De-boxed: the panel is just an open wrapper — no card border,
   no drop shadow, no gradient box. The stage inside carries the
   only surface treatment. */
.uni-panel {
  position: relative;
  padding: 4px;
}

.uni-badge {
  position: absolute;
  top: -2px;
  left: 4px;
  z-index: 6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}
.uni-badge--before {
  color: var(--ink-60);
  background: color-mix(in srgb, #5a82c2 8%, #fff);
  border: 1px solid var(--uni-line);
}
.uni-badge--after {
  color: #fff;
  background: linear-gradient(150deg, var(--uni-blue), var(--uni-blue-deep));
  box-shadow: 0 8px 18px -12px rgba(61, 99, 164, 0.8);
}

/* ---------------- the transform cue ---------------- */
.uni-cue {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-inline: 2px;
}
.uni-arrow {
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1;
  font-weight: 400;
  color: var(--uni-blue-deep);
  filter: drop-shadow(0 6px 14px rgba(61, 99, 164, 0.24));
  animation: uni-nudge 2.6s ease-in-out infinite;
}
@keyframes uni-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}
.uni-cue-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-40);
  white-space: nowrap;
}

/* ============================================================
   BEFORE — scattered fragmented stack (open, un-boxed)
   ============================================================ */
.uni-stage-before {
  position: relative;
  width: 100%;
  aspect-ratio: 1.05 / 1;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 100% at 30% 0%, color-mix(in srgb, #5a82c2 8%, #fff), transparent 62%),
    var(--uni-tint);
}
/* faint blueprint grid so the panel reads as "workspace" */
.uni-stage-before::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(90, 130, 194, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 130, 194, 0.07) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(120% 100% at 50% 30%, #000 40%, transparent 88%);
  z-index: 0;
}
/* caption UNDER each stage (was an in-stage corner tag). Pulled fully OUTSIDE
   the stage box so it can never be swept by / overlap the rotating chips. */
.uni-cap {
  margin: 12px 2px 0;
  padding-inline: 6px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-40);
  font-weight: 600;
}
.uni-cap--after {
  color: var(--uni-blue-deep);
}

/* broken connectors */
.uni-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}
.uni-link {
  stroke: var(--uni-blue);
  stroke-width: 0.5;
  stroke-dasharray: 2.4 2.2;
  vector-effect: non-scaling-stroke;
  opacity: 0.45;
  animation: uni-flicker 3.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes uni-flicker {
  0%, 100% { opacity: 0.42; stroke-dashoffset: 0; }
  38% { opacity: 0.1; }
  42% { opacity: 0.55; } /* the "spark" of a link trying to connect */
  60% { opacity: 0.08; } /* then it breaks */
  80% { opacity: 0.3; stroke-dashoffset: 8; }
}

/* app tiles — light cards on the tinted panel (soft, not heavy) */
.uni-tile {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: clamp(112px, 14vw, 146px);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 13px;
  background: #ffffff;
  border: 1px solid var(--uni-line);
  box-shadow: 0 12px 26px -20px rgba(40, 52, 74, 0.4);
  transform: translate(-50%, -50%) rotate(var(--rot));
  transform-origin: center;
  animation: uni-float 7s ease-in-out infinite;
  animation-delay: calc(var(--rot) * 0.06s);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.28s ease, border-color 0.28s ease;
  cursor: default;
}
@keyframes uni-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
.uni-tic {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 74%, #1e2636));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 10px -5px var(--c);
}
.uni-tmeta { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.uni-tname {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uni-tsub {
  font-size: 10px;
  color: var(--ink-40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hover: jitter + reveal the "not connected" tag */
.uni-flag {
  position: absolute;
  top: -11px;
  right: 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(180deg, var(--uni-blue), var(--uni-blue-deep));
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(61, 99, 164, 0.75);
  opacity: 0;
  transform: translateY(4px) scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.uni-tile:hover {
  z-index: 5;
  border-color: color-mix(in srgb, var(--uni-blue) 45%, transparent);
  box-shadow: 0 20px 36px -22px rgba(40, 52, 74, 0.45), 0 0 0 1px color-mix(in srgb, var(--uni-blue) 22%, transparent);
  animation: uni-jitter 0.32s linear infinite;
}
.uni-tile:hover .uni-flag { opacity: 1; transform: translateY(0) scale(1); }

/* auto-pulse: JS reveals a random tile's flag now and then so the BEFORE
   panel reads as a live, mis-wired stack instead of a dead diagram */
.uni-tile[data-uni-live] { z-index: 5; }
.uni-tile[data-uni-live] .uni-flag { opacity: 1; transform: translateY(0) scale(1); }
.uni-tile[data-uni-live] {
  border-color: color-mix(in srgb, var(--uni-blue) 45%, transparent);
  box-shadow: 0 20px 36px -22px rgba(40, 52, 74, 0.45), 0 0 0 1px color-mix(in srgb, var(--uni-blue) 22%, transparent);
  animation: uni-jitter 0.32s linear 4;
}
@media (prefers-reduced-motion: reduce) {
  .uni-tile[data-uni-live] { animation: none; }
}
@keyframes uni-jitter {
  0% { transform: translate(-50%, -50%) rotate(var(--rot)); }
  25% { transform: translate(calc(-50% - 1.5px), calc(-50% + 1px)) rotate(calc(var(--rot) + 1.2deg)); }
  50% { transform: translate(calc(-50% + 1px), calc(-50% - 1.5px)) rotate(calc(var(--rot) - 1deg)); }
  75% { transform: translate(calc(-50% - 1px), calc(-50% - 1px)) rotate(calc(var(--rot) + 0.8deg)); }
  100% { transform: translate(-50%, -50%) rotate(var(--rot)); }
}

/* ============================================================
   AFTER — the unified rotating orbit (the ONE elevated hero)
   ============================================================ */
.uni-stage-after {
  position: relative;
  width: 100%;
  aspect-ratio: 1.05 / 1;
  /* overflow VISIBLE so chip hover-scale + reveal are never clipped;
     the rounded surface itself is the separate .uni-stage-fill layer */
  overflow: visible;
  isolation: isolate;
}
/* the rounded, clipped decorative surface + soft elevation */
.uni-stage-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(66% 60% at 50% 50%, color-mix(in srgb, #5a82c2 14%, #fff), transparent 72%),
    var(--uni-tint-2);
  box-shadow: 0 30px 70px -46px rgba(40, 52, 74, 0.42);
}
.uni-stage-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(90, 130, 194, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 130, 194, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 86%);
}
/* connector wires (JS positions <line>s each frame) */
.uni-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
}
.uni-wire {
  fill: none;
  stroke: var(--accent, #5a82c2);
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: 0.26;
  transition: opacity 0.3s ease, stroke-width 0.3s ease;
}
.uni-wire--hot {
  opacity: 0.92;
  stroke-width: 2.3;
}

/* ---------- the core ---------- */
.uni-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: clamp(96px, 14vw, 138px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.uni-core-glow {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(90, 130, 194, 0.4), rgba(90, 130, 194, 0.1) 55%, transparent 74%);
  animation: uni-breathe 5.4s ease-in-out infinite;
}
.uni-core-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 12px;
  background: linear-gradient(158deg, #5a82c2 0%, #4269aa 46%, #3d63a4 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 0 0 1px rgba(61, 99, 164, 0.25),
    0 22px 50px -26px rgba(40, 52, 74, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -20px 38px -22px rgba(20, 38, 74, 0.5);
}
.uni-core-logo {
  width: 74%;
  max-width: 100px;
  height: auto;
  display: block;
}
.uni-core-face i {
  font-style: normal;
  font-size: clamp(7.5px, 0.8vw, 9.5px);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.82);
}
@keyframes uni-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* ---------- COMPACT satellite chips (upright links; JS sets --x/--y) --------
   Vertical layout (icon-tile over a SHORT label) keeps each chip NARROW so all
   ELEVEN sit evenly on the ring without colliding. Fixed width => the JS
   collision math is stable. Each chip is an <a> to its feature route; the full
   product name + "replaces" line is an absolutely positioned hover reveal (no
   layout width impact, no clipping). Same icon-tile + label language as the
   product carousel's cards, just condensed. */
.uni-sat {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 6px 8px;
  border-radius: 14px;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--uni-line);
  box-shadow: 0 12px 26px -20px rgba(40, 52, 74, 0.42);
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0));
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease,
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.uni-sat-dot {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #1e2636));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.uni-sat-l {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  white-space: nowrap; /* keep chip height fixed => stable ring geometry */
  max-width: 100%;
  color: var(--ink);
}
/* full name + what it replaces — revealed on hover/focus, absolutely
   positioned so it never widens the chip nor gets clipped by neighbours */
.uni-sat-rep {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  width: 168px;
  transform: translateX(-50%) translateY(-4px);
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink-60);
  background: #fff;
  border: 1px solid var(--uni-line);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 16px 34px -18px rgba(40, 52, 74, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.uni-sat-rep b {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--uni-blue-deep);
  margin-bottom: 2px;
}
/* hover / focus: lift the chip + reveal the detail */
.uni-sat:hover,
.uni-sat:focus-visible {
  outline: none;
  z-index: 7;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, #fff);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent),
    0 22px 44px -18px rgba(40, 52, 74, 0.5);
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) scale(1.08);
}
.uni-sat:hover .uni-sat-rep,
.uni-sat:focus-visible .uni-sat-rep {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- narrow / small-stage fallback: clean centered cloud,
   NOT a broken ring (JS toggles .uni-static when the ring can't fit) ---------- */
.uni-stage-after.uni-static {
  aspect-ratio: auto;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 12px;
  padding: 26px 16px;
}
.uni-static .uni-wires { display: none; }
.uni-static .uni-stage-fill { border-radius: 20px; }
.uni-static .uni-core {
  position: static;
  transform: none;
  width: 108px;
  margin: 0 auto 4px;
  flex-basis: 100%;
}
.uni-static .uni-sat {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}
.uni-static .uni-sat:hover,
.uni-static .uni-sat:focus-visible {
  transform: scale(1.06);
}

/* ---------------- footer ---------------- */
.uni-foot {
  text-align: center;
  max-width: 54ch;
  margin: clamp(30px, 5vw, 56px) auto 0;
  font-size: clamp(14.5px, 1.15vw, 17px);
  color: var(--ink-60);
}
.uni-foot b {
  color: var(--uni-blue-deep);
  font-weight: 700;
}
.uni-foot s {
  color: var(--ink-40);
  text-decoration-thickness: 1px;
}

/* ============================================================
   responsive — stack the two panels under ~980px
   ============================================================ */
@media (max-width: 980px) {
  .uni-split {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
    gap: 8px;
  }
  .uni-cue {
    flex-direction: row;
    gap: 12px;
    padding-block: 4px;
  }
  .uni-arrow {
    transform: rotate(90deg);
    animation: uni-nudge-down 2.6s ease-in-out infinite;
  }
  @keyframes uni-nudge-down {
    0%, 100% { transform: rotate(90deg) translateX(0); }
    50% { transform: rotate(90deg) translateX(5px); }
  }
}
@media (max-width: 560px) {
  .uni-tile { width: clamp(96px, 42vw, 128px); padding: 7px 9px; }
  .uni-tic { width: 26px; height: 26px; font-size: 13px; }
}
/* Phones: don't rely on the JS to detect the ring can't fit — force both
   stages into a compact, flowing layout so there's no big empty blue square.
   The "after" hub becomes a small centered core with its tiles wrapping below. */
@media (max-width: 700px) {
  .uni-stage-before,
  .uni-stage-after {
    aspect-ratio: auto;
    min-height: 0;
  }
  .uni-stage-after {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 12px;
    padding: 22px 14px;
  }
  .uni-stage-after .uni-wires { display: none; }
  .uni-stage-after .uni-core {
    position: static;
    transform: none;
    width: 108px;
    margin: 0 auto 4px;
    flex-basis: 100%;
  }
  .uni-stage-after .uni-sat {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }
}

/* ============================================================
   reduced motion — static evenly-docked ring, no spin/flicker/float
   ============================================================ */
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .uni-tile,
  .uni-tile:hover { animation: none !important; }
  .uni-link { animation: none !important; opacity: 0.38 !important; }
  .uni-arrow { animation: none !important; }
  .uni-core-glow { animation: none !important; }
  .uni-sat { transition: none !important; }
}