/* "One unified interface" glass card — native HTML/CSS rebuild of "Feature 5.svg".
 *
 * The visual is authored on the original 406 × 215 canvas. `--u` is one canvas
 * unit and scales with the card width (container query), so every number below
 * is the original SVG coordinate: `52em` on a box == x = 52 in the SVG.
 * Text is real Manrope text (not outlines), so copy can be edited freely.
 */

.uni-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 22rem;                /* matches the original .feature-container.is-fourth */
  width: 100%;
  min-width: 0;
  padding-top: 3rem;
  overflow: clip;
  border: 1px solid #ffffff14;
  border-radius: var(--roundness--box-xl, 1.5rem);
  background: #ffffff0a;
  font-family: Manrope, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.uni-card__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-inline: 2rem;
  text-align: center;
}

.uni-card__title {
  margin: 0;
  color: transparent;
  background: linear-gradient(to right, #fff, #ffffffb3);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: var(--_typography---h4--font-size, 1.9375rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.03875rem;
}

.uni-card__description {
  margin: 0;
  color: #c3c3c3;
  font-size: 1rem;
  line-height: 1.5;
}

/* ---- Visual ------------------------------------------------------------ */

.uni-visual {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 406 / 215;
  container-type: inline-size;
  overflow: hidden;
  /* Fade in at the top, fade out at the bottom (original alpha mask). */
  -webkit-mask-image: linear-gradient(to bottom, #d9d9d900 0, #d9d9d9 18.2692%, #8a8a8a 74.0385%, #73737333 100%);
          mask-image: linear-gradient(to bottom, #d9d9d900 0, #d9d9d9 18.2692%, #8a8a8a 74.0385%, #73737333 100%);
}

.uni-stage {
  --u: calc(100cqw / 406);
  position: absolute;
  inset: 0;
  font-size: var(--u);          /* 1em == 1 canvas unit inside the stage */
  font-weight: 400;
  letter-spacing: 0;
  font-kerning: normal;
}

/* ---- Report panel (runs past the bottom edge; clipped by the card) ------ */

.uni-panel {
  position: absolute;
  left: 32em;
  top: 36em;
  width: 342em;
  height: 213em;
  border-radius: 12em;
  background: linear-gradient(#ffffff1a, #ffffff0a), #080808;
}

.uni-panel::after,
.uni-metric::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1em solid #ffffff14;
  border-radius: inherit;
  pointer-events: none;
}

/* Faint vertical grid: 8 hairlines, 42 units apart, x = 52 … 346. */
.uni-grid {
  position: absolute;
  left: 51.5em;
  top: 81em;
  width: 295em;
  height: 150em;
  background: repeating-linear-gradient(90deg, #ffffff0a 0 1em, transparent 1em 42em);
}

.uni-text {
  position: absolute;
  margin: 0;
  white-space: nowrap;   /* left/top on text use calc(N * --u): em would be the text's own size */
  line-height: calc(20 * var(--u));
}

.uni-title {
  left: calc(52 * var(--u));
  top: calc(52 * var(--u));
  color: #fff;
  font-size: calc(13 * var(--u));
}

.uni-label {
  left: calc(52 * var(--u));
  color: #808080;
  font-size: calc(10 * var(--u));
}

/* Progress bars: a faint track (193 units, the longest original bar) and a fill
 * whose final width matches the original bar lengths (193 / 134 / 50). */
.uni-bar {
  position: absolute;
  left: 52em;
  width: 193em;
  height: 20em;
  border-radius: 6em;
  background: #ffffff0a;
}

.uni-bar__fill {
  --w: 100%;
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, #4933e9, #6a58ed);   /* syncing */
}

/* Settled state: the original grey gradient fades in over the indigo. */
.uni-bar__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #303030, #494949);
  opacity: 1;
}

/* ---- Utilization gauge ------------------------------------------------- */

.uni-metric {
  position: absolute;
  left: 257em;
  top: 85em;
  width: 129em;
  height: 94em;
  border-radius: 8em;
  /* The SVG stacks the glass fill twice on the opaque base. */
  background: linear-gradient(#ffffff1a, #ffffff0a), linear-gradient(#ffffff1a, #ffffff0a), #080808;
}

.uni-gauge {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.uni-gauge path {
  fill: none;
  stroke-width: 13.44;
  stroke-linecap: round;
}

.uni-gauge__track { stroke: #ffffff1f; }
/* pathLength is 100, so the first dash value is the fill percentage of the arc
   (25 per device: 3 of 4 online == 75). */
.uni-gauge__fill  { stroke: url(#uni-gauge-gradient); stroke-dasharray: 75 100; }

.uni-metric__value,
.uni-metric__label {
  left: 0;
  width: 100%;
  text-align: center;
}

.uni-metric__value { top: calc(46.34 * var(--u)); color: #fff;    font-size: calc(20 * var(--u)); }
.uni-metric__label { top: calc(67.94 * var(--u)); color: #808080; font-size: calc(8 * var(--u)); }

/* ---- Motion -------------------------------------------------------------
 * One seamless loop. The three folders sync in turn (indigo while filling,
 * grey once settled) while devices come online 1 → 3 and the arc follows;
 * then everything eases back to the start.
 */

@property --uni-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 3;
}

.uni-stage { --uni-loop: 9s; }

.uni-count {
  counter-reset: uni-n var(--uni-n);
}
.uni-count::before {
  content: counter(uni-n);
}

@media (prefers-reduced-motion: no-preference) {
  .uni-bar__fill,
  .uni-bar__fill::after,
  .uni-gauge__fill,
  .uni-count {
    animation-duration: var(--uni-loop);
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }

  .uni-bar--1 .uni-bar__fill        { animation-name: uni-fill-1; }
  .uni-bar--2 .uni-bar__fill        { animation-name: uni-fill-2; }
  .uni-bar--3 .uni-bar__fill        { animation-name: uni-fill-3; }
  .uni-bar--1 .uni-bar__fill::after { animation-name: uni-settle-1; }
  .uni-bar--2 .uni-bar__fill::after { animation-name: uni-settle-2; }
  .uni-bar--3 .uni-bar__fill::after { animation-name: uni-settle-3; }
  .uni-gauge__fill                  { animation-name: uni-arc; }
  .uni-count                        { animation-name: uni-devices; }
}

@keyframes uni-fill-1 { 0%, 4% { width: 0; } 24%, 90% { width: 100%; } 97%, 100% { width: 0; } }
@keyframes uni-fill-2 { 0%, 10% { width: 0; } 34%, 90% { width: 69.4%; } 97%, 100% { width: 0; } }
@keyframes uni-fill-3 { 0%, 16% { width: 0; } 40%, 90% { width: 25.9%; } 97%, 100% { width: 0; } }

@keyframes uni-settle-1 { 0%, 22% { opacity: 0; } 30%, 97% { opacity: 1; } 97.1%, 100% { opacity: 0; } }
@keyframes uni-settle-2 { 0%, 32% { opacity: 0; } 40%, 97% { opacity: 1; } 97.1%, 100% { opacity: 0; } }
@keyframes uni-settle-3 { 0%, 38% { opacity: 0; } 46%, 97% { opacity: 1; } 97.1%, 100% { opacity: 0; } }

@keyframes uni-arc {
  0%, 12%   { stroke-dasharray: 25 100; }
  18%, 28%  { stroke-dasharray: 50 100; }
  34%, 90%  { stroke-dasharray: 75 100; }
  97%, 100% { stroke-dasharray: 25 100; }
}

@keyframes uni-devices {
  0%, 12%   { --uni-n: 1; }
  18%, 28%  { --uni-n: 2; }
  34%, 90%  { --uni-n: 3; }
  97%, 100% { --uni-n: 1; }
}