/* The generated glass image supplies the real U shape and its material. */
#u2-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.u2-stage {
  --u2-logo-size: clamp(176px, 20vw, 300px);
  --u2-logo-top: 41%;
  --u2-open-x: 1.7472;
  --u2-open-y: 1.82;
  --u2-peak-x: 1.82;
  --u2-peak-y: 1.7654;
  --u2-hold-x: 1.7462;
  --u2-hold-y: 1.7216;
  --u2-charge-x: 1.095;
  --u2-charge-y: .79;
  --u2-swallow-x: .93;
  --u2-swallow-y: 1.025;
  --u2-rebound-x: 1.075;
  --u2-rebound-y: .97;
  --u2-rest-scale: 1;
  --u2-ring-start: .66;
  --u2-ring-rise: .91;
  --u2-ring-mid: 1.26;
  --u2-ring-end: 1.35;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.u2-stage-anchor {
  position: absolute;
  left: 50%;
  top: var(--u2-safe-center-y, var(--u2-logo-top));
  width: var(--u2-logo-size);
  height: var(--u2-logo-size);
  transform: translate(-50%, -50%);
}

.u2-stage-logo-motion {
  position: absolute;
  inset: 0;
  opacity: .66;
  transform: scale(var(--u2-rest-scale));
  transform-origin: 50% 50%;
}

.u2-stage-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* The backdrop already blends the white image into the room. A second
     nested blend is unnecessary and adds another compositing dependency. */
  user-select: none;
  -webkit-user-drag: none;
  visibility: hidden;
}

.u2-stage[data-logo-status="ready"] .u2-stage-logo { visibility: visible; }

.u2-stage-wall-glow {
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 42% 44%, rgba(193, 224, 216, .13), rgba(225, 216, 227, .045) 48%, transparent 72%);
  opacity: .45;
}

.u2-stage-shadow {
  position: absolute;
  width: 54%;
  height: 9%;
  left: 23%;
  top: 84%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(102, 133, 143, .12), transparent 72%);
  opacity: .48;
}

.u2-stage:not([data-logo-status="ready"]) .u2-stage-shadow { opacity: 0; }

.u2-stage-ring {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  border: 1px solid rgba(125, 185, 178, .35);
  box-shadow: 0 0 26px rgba(166, 211, 199, .11), inset 0 0 18px rgba(178, 213, 207, .085);
  opacity: 0;
  transform: scale(.72);
}

.u2-stage-ring--2 {
  inset: -17%;
  border-color: rgba(207, 172, 179, .28);
  box-shadow: 0 0 25px rgba(220, 194, 199, .085), inset 0 0 20px rgba(218, 193, 205, .06);
}

.u2-stage-spark {
  position: absolute;
  left: calc(50% + var(--u2-logo-size) * var(--u2-spark-x));
  top: calc(50% + var(--u2-logo-size) * var(--u2-spark-y));
  width: var(--u2-spark-size, 4px);
  height: var(--u2-spark-size, 4px);
  background: #a9cfc3;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0;
}

.u2-stage-spark[data-tone="1"] { background: #d9b9c4; }
.u2-stage-spark[data-tone="2"] { background: #d5c398; }
.u2-stage[data-expansion="compact"] .u2-stage-spark { display: none; }

.u2-stage[data-idle-loop="true"] .u2-stage-logo-motion {
  animation: u2-idle-wiggle 5200ms cubic-bezier(.42, 0, .58, 1) infinite;
}

.u2-stage[data-idle-loop="true"] .u2-stage-shadow {
  animation: u2-shadow-wiggle 5200ms ease-in-out infinite;
}

.u2-stage[data-clear-pending="true"] .u2-stage-logo-motion {
  transform: var(--u2-entry-transform, scale(var(--u2-rest-scale)));
  opacity: var(--u2-entry-opacity, .66);
}

.u2-stage[data-clearing="true"] .u2-stage-logo-motion {
  transform-origin: 50% 50%;
  animation: u2-clear-logo var(--u2-clear-duration, 2600ms) cubic-bezier(.42, 0, .58, 1) 1 both;
}

.u2-stage[data-clearing="true"] .u2-stage-ring--1 {
  animation: u2-expand-ring 1900ms cubic-bezier(.18, .6, .32, 1) 280ms 1 both;
}

.u2-stage[data-clearing="true"] .u2-stage-ring--2 {
  animation: u2-expand-ring 1800ms cubic-bezier(.18, .6, .32, 1) 490ms 1 both;
}

.u2-stage[data-clearing="true"] .u2-stage-spark {
  animation: u2-clear-spark 1300ms ease-out var(--u2-spark-delay) 1 both;
}

.u2-stage[data-motion="paused"] .u2-stage-logo-motion,
.u2-stage[data-motion="paused"] .u2-stage-shadow,
.u2-stage[data-motion="paused"] .u2-stage-ring,
.u2-stage[data-motion="paused"] .u2-stage-spark,
.u2-stage[data-motion="reduced"] .u2-stage-ring,
.u2-stage[data-motion="reduced"] .u2-stage-spark,
.u2-stage[data-motion="reduced"] .u2-stage-shadow {
  animation: none;
}

.u2-stage[data-motion="reduced"][data-clearing="true"] .u2-stage-logo-motion {
  animation: u2-reduced-clear 360ms ease-out 1;
}

/* Neutral → soft crouch → lean left → twist right → buoyant return.
 * Reused by the welcome image; only the U moves, not its text or layout slot. */
@keyframes u2-idle-wiggle {
  0%, 100% { transform: scale(var(--u2-rest-scale, 1)) translate(0, 0) rotate(0deg) skewX(0deg) scale(1, 1); }
  10% { transform: scale(var(--u2-rest-scale, 1)) translate(-2px, 3px) rotate(-2deg) skewX(-1deg) scale(1.065, .94); }
  24% { transform: scale(var(--u2-rest-scale, 1)) translate(-8px, -4px) rotate(-7deg) skewX(3deg) scale(.96, 1.05); }
  40% { transform: scale(var(--u2-rest-scale, 1)) translate(6px, -10px) rotate(6deg) skewX(-3deg) scale(1.025, .98); }
  55% { transform: scale(var(--u2-rest-scale, 1)) translate(9px, 1px) rotate(4deg) skewX(-2deg) scale(1.075, .93); }
  70% { transform: scale(var(--u2-rest-scale, 1)) translate(-4px, -7px) rotate(-4deg) skewX(2deg) scale(.97, 1.045); }
  85% { transform: scale(var(--u2-rest-scale, 1)) translate(2px, -2px) rotate(2deg) skewX(-1deg) scale(1.02, .985); }
}

@keyframes u2-shadow-wiggle {
  0%, 100% { transform: translateX(0) scale(1); opacity: .48; }
  24% { transform: translateX(-4px) scale(.94); opacity: .4; }
  40% { transform: translateX(3px) scale(.84); opacity: .29; }
  55% { transform: translateX(5px) scale(1.06); opacity: .5; }
  70% { transform: translateX(-2px) scale(.9); opacity: .35; }
}

@keyframes u2-clear-logo {
  0% { transform: var(--u2-entry-transform, scale(var(--u2-rest-scale))); opacity: var(--u2-entry-opacity, .66); }
  8% { transform: translateY(7px) scale(var(--u2-charge-x), var(--u2-charge-y)); opacity: .8; }
  23% { transform: translateY(-6px) scale(var(--u2-open-x), var(--u2-open-y)); opacity: .96; }
  41% { transform: translateY(-3px) scale(var(--u2-peak-x), var(--u2-peak-y)); opacity: .98; }
  76% { transform: translateY(-2px) scale(var(--u2-hold-x), var(--u2-hold-y)); opacity: .94; }
  88% { transform: translateY(5px) scale(var(--u2-swallow-x), var(--u2-swallow-y)); opacity: .84; }
  95% { transform: translateY(-2px) scale(var(--u2-rebound-x), var(--u2-rebound-y)); opacity: .73; }
  100% { transform: translateY(0) scale(var(--u2-rest-scale)); opacity: .66; }
}

@keyframes u2-expand-ring {
  0% { transform: scale(var(--u2-ring-start)); opacity: 0; }
  18% { transform: scale(var(--u2-ring-rise)); opacity: .48; }
  52% { transform: scale(var(--u2-ring-mid)); opacity: .25; }
  100% { transform: scale(var(--u2-ring-end)); opacity: 0; }
}

@keyframes u2-clear-spark {
  0% { transform: translateY(10px) scale(.35); opacity: 0; }
  20% { transform: translateY(0) scale(1); opacity: .7; }
  100% { transform: translate(var(--u2-spark-drift), -33px) scale(.4); opacity: 0; }
}

@keyframes u2-reduced-clear {
  0%, 100% { opacity: .66; }
  38% { opacity: .79; }
}

@media (prefers-reduced-motion: reduce) {
  .u2-stage .u2-stage-logo-motion,
  .u2-stage .u2-stage-shadow,
  .u2-stage .u2-stage-ring,
  .u2-stage .u2-stage-spark { animation: none !important; }
  .u2-stage[data-clearing="true"] .u2-stage-logo-motion {
    animation: u2-reduced-clear 360ms ease-out 1 !important;
  }
}