/* Logo row + swap stacks. Timing/size vars are read by logo-animation.js. */
:root {
  --u2-logo-width: 250px;
  --u2-swap-interval: 6000;
  --u2-swap-duration: 0.42;
}

.u2-scene {
  width: var(--u2-logo-width);
  padding: 2rem 0;
  overflow: visible;
}

.u2-logo-row {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

.u2-glyph-slot {
  position: relative;
  overflow: visible;
  flex: 0 0 auto;
}

.u2-glyph-slot--u { width: 24.2189%; }
.u2-glyph-slot--n { width: 24.5668%; }
.u2-glyph-slot--i { width: 8.5223%; }
.u2-glyph-slot--t { width: 14.2422%; }
.u2-glyph-slot--mark { width: 9.1878%; }
.u2-glyph-slot--2 { width: 19.2621%; }

.u2-glyph-image {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.u2-glyph-swap-stack {
  position: relative;
  display: grid;
}

.u2-glyph-swap-stack .u2-glyph-image {
  grid-area: 1 / 1;
}

.u2-glyph-swap-stack .u2-glyph-image:nth-child(1) {
  opacity: 1;
}

.u2-glyph-swap-stack .u2-glyph-image:nth-child(2) {
  opacity: 0;
}