/*
 * Hero decorative components (product-design themed), drawn with HTML/CSS/SVG.
 * Structure per piece: .S0fsxG_widget (pointer physics) > .S0fsxG_layer (parallax transform, set by
 * hero.js) > .hx-art (resting rotation / perspective, set here), so the two never overwrite each other.
 * The whole field is aria-hidden and ignores the pointer (.S0fsxG_root).
 */
.hx-root {
  --hx-ink: #c9d1e2;
  --hx-border: rgb(255 255 255 / 0.09);
  --hx-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.hx-art {
  position: absolute;
  inset: 0;
  font-family: var(--font-family-sans);
}

/* resting poses */
.hx-tilt-a { transform: perspective(60rem) rotateY(-14deg) rotate(-9deg); }
.hx-tilt-b { transform: rotate(-9deg); }
.hx-tilt-c { transform: perspective(50rem) rotateY(22deg) rotate(-14deg); }
.hx-tilt-d { transform: perspective(40rem) rotateX(12deg) rotate(14deg); }
.hx-tilt-e { transform: perspective(40rem) rotateX(12deg) rotate(-16deg); }
.hx-tilt-f { transform: perspective(50rem) rotateY(-18deg) rotate(-12deg); }
.hx-tilt-g { transform: perspective(60rem) rotateY(-16deg) rotate(-13deg); }
.hx-tilt-h { transform: perspective(60rem) rotateY(-10deg) rotate(8deg); }

/* cards */
.hx-card {
  border: 1px solid var(--hx-border);
  border-radius: 1rem;
  box-shadow: var(--hx-shadow);
}

.hx-card--grey { background: linear-gradient(150deg, #5d5e60, #2a2b2e 70%); opacity: 0.85; }
.hx-card--blue { background: linear-gradient(150deg, #24324a, #121a28 75%); }
.hx-card--dark { background: linear-gradient(150deg, #1f2026, #0c0d10 80%); }

.hx-avatar,
.hx-dot {
  position: absolute;
  left: 1.25rem;
  top: 1.5rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b86b5, #3a5481 70%);
}

.hx-dot {
  background: radial-gradient(circle at 35% 30%, #8a8b8e, #4a4b4e 70%);
}

.hx-kebab {
  position: absolute;
  right: 1.25rem;
  top: 1.4rem;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  background: #9aa6bd;
  box-shadow: 0 0.35rem 0 #9aa6bd, 0 0.7rem 0 #9aa6bd;
}

.hx-line {
  position: absolute;
  left: 1.25rem;
  height: 0.55rem;
  border-radius: 1rem;
  background: rgb(120 145 190 / 0.35);
}

.hx-card--grey .hx-line { background: rgb(255 255 255 / 0.14); }
.hx-line--a { top: 4.9rem; width: 70%; }
.hx-line--b { top: 6.1rem; width: 52%; }
.hx-line--c { top: 7.3rem; width: 62%; }

/* labels */
.hx-pill {
  display: grid;
  place-items: center;
  border: 1px solid rgb(140 165 210 / 0.22);
  border-radius: 0.6rem;
  background: linear-gradient(160deg, #1d2536, #121722);
  box-shadow: 0 0.75rem 1.75rem rgb(0 0 0 / 0.5);
}

.hx-pill--plain { background: linear-gradient(160deg, #26272b, #17181b); border-color: rgb(255 255 255 / 0.1); }
.hx-pill--violet { background: linear-gradient(160deg, #3a2f45, #241d2c); border-color: rgb(200 170 230 / 0.2); }

.hx-label {
  color: var(--hx-ink);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* strategy sphere */
.hx-sphere {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #4a4b52 0%, #23242a 38%, #121317 70%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 2rem 5rem rgb(0 0 0 / 0.6);
  opacity: 0.9;
}

.hx-path,
.hx-link,
.hx-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
}

.hx-path path { stroke: rgb(200 205 220 / 0.55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.hx-link path { stroke: rgb(200 205 220 / 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hx-orbit path { stroke: rgb(255 255 255 / 0.22); stroke-width: 1; vector-effect: non-scaling-stroke; }

.hx-node {
  position: absolute;
  width: 1.15rem;
  height: 1.15rem;
  margin: -0.575rem 0 0 -0.575rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c3c6d3, #6e7285 60%, #3e4150);
  box-shadow: 0 0.35rem 0.8rem rgb(0 0 0 / 0.5);
}

.hx-node--md {
  left: 50%;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
}

/* side panels and tiles */
.hx-panel {
  border-radius: 0.9rem;
  border: 1px solid var(--hx-border);
  box-shadow: var(--hx-shadow);
}

.hx-panel--front { background: linear-gradient(150deg, #4b6488, #2c3d58 80%); }
.hx-panel--back { background: linear-gradient(150deg, #2a3a55, #18233a 80%); }

.hx-tile {
  border-radius: 1rem;
  border: 1px solid var(--hx-border);
  background: linear-gradient(150deg, #24252c, #121318 80%);
  box-shadow: var(--hx-shadow);
}

.hx-check {
  position: absolute;
  inset: 28%;
  fill: none;
  stroke: rgb(220 225 235 / 0.75);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* interactions cube */
.hx-cube {
  border-radius: 2rem;
  background: linear-gradient(150deg, #8f7aa3 0%, #6b5781 45%, #3f3150 100%);
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.2),
    inset 0 -0.6rem 1.2rem rgb(0 0 0 / 0.3),
    0 2rem 3.5rem rgb(0 0 0 / 0.55);
}

.hx-cursor {
  position: absolute;
  left: 24%;
  top: 20%;
  width: 52%;
  height: 52%;
  fill: #8c779f;
  stroke: rgb(255 255 255 / 0.25);
  stroke-width: 0.4;
  filter: drop-shadow(0.3rem 0.5rem 0.4rem rgb(30 20 40 / 0.55));
}

/* notifications card */
.hx-notif {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--hx-ink);
  font-size: 1rem;
}

.hx-toggle {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  width: 3.25rem;
  height: 1.9rem;
  translate: 0 -50%;
  border-radius: 1rem;
  background: linear-gradient(150deg, #4c7a52, #2f5134);
}

.hx-toggle span {
  position: absolute;
  right: 0.2rem;
  top: 0.2rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e3e5ea, #9a9ea8);
}

/* below desktop the canvases scale down from the corners; drop the mid-edge pieces so nothing
   crowds the headline, badge or CTA */
@media not (min-width: 64rem) {
  .hx-root [data-widget='panels'],
  .hx-root [data-widget='flow'],
  .hx-root [data-widget='interactions'],
  .hx-root [data-widget='experience'] {
    display: none;
  }
}