/*
 * Zoni's proprietary glass skin.
 * Components provide geometry through .ui-frame; this file owns appearance only.
 */

.ui-surface {
  --ui-pointer-x: 50%;
  --ui-pointer-y: 50%;
  --ui-hover-opacity: 0;
  --zoni-glass-border: rgba(255, 255, 255, 0.24);
  --zoni-glass-border-focus: rgba(255, 255, 255, 0.42);
  --zoni-glass-background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)),
    linear-gradient(180deg, rgba(32, 41, 52, 0.2), rgba(12, 15, 20, 0.34));
  --zoni-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -18px 30px rgba(255, 255, 255, 0.04),
    0 18px 50px rgba(0, 0, 0, 0.34),
    0 4px 18px rgba(0, 0, 0, 0.22);
  --zoni-glass-shadow-focus:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -18px 30px rgba(255, 255, 255, 0.045),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 18px 50px rgba(0, 0, 0, 0.34),
    0 4px 18px rgba(0, 0, 0, 0.22);

  isolation: isolate;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--zoni-glass-border);
  background: var(--zoni-glass-background);
  box-shadow: var(--zoni-glass-shadow);
  backdrop-filter: blur(26px) saturate(1.28);
  -webkit-backdrop-filter: blur(26px) saturate(1.28);
  pointer-events: auto;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.ui-surface::before,
.ui-surface::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.ui-surface::before {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.38), transparent 28%),
    radial-gradient(circle at 82% 100%, rgba(156, 213, 255, 0.18), transparent 32%);
  mix-blend-mode: screen;
}

.ui-surface::after {
  background:
    radial-gradient(
      circle 36px at var(--ui-pointer-x) var(--ui-pointer-y),
      rgba(255, 255, 255, 0.13),
      rgba(212, 235, 255, 0.075) 34%,
      rgba(255, 255, 255, 0.032) 62%,
      rgba(255, 255, 255, 0) 100%
    );
  mix-blend-mode: screen;
  filter: blur(8px);
  opacity: var(--ui-hover-opacity);
  transition: opacity 140ms ease;
}

.ui-surface > * {
  position: relative;
  z-index: 1;
}

.ui-surface.is-ui-hovered {
  --ui-hover-opacity: 0.86;
}

.ui-surface:focus-within {
  border-color: var(--zoni-glass-border-focus);
  box-shadow: var(--zoni-glass-shadow-focus);
}

.ui-action {
  --ui-action-scale: 1;
  --ui-action-click-x: 50%;
  --ui-action-click-y: 50%;
  --ui-action-origin-x: 50%;
  --ui-action-origin-y: 50%;
  --ui-action-press-shift-x: 0px;
  --ui-action-press-shift-y: 0px;
  --ui-action-recoil-shift-x: 0px;
  --ui-action-recoil-shift-y: 0px;
  --ui-action-press-scale-x: 1.045;
  --ui-action-press-scale-y: 1.045;
  --ui-action-recoil-scale-x: 0.996;
  --ui-action-recoil-scale-y: 1.004;

  isolation: isolate;
  position: relative;
  overflow: hidden;
  transform: translate(0, 0) scale(var(--ui-action-scale));
  transform-origin: var(--ui-action-origin-x) var(--ui-action-origin-y);
  transition:
    transform 170ms cubic-bezier(0.2, 0.82, 0.24, 1),
    background 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease;
}

.ui-action::after {
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at var(--ui-action-click-x) var(--ui-action-click-y),
      rgba(255, 255, 255, 0.48),
      rgba(179, 221, 255, 0.18) 28%,
      rgba(255, 255, 255, 0) 62%
    );
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(0.74);
  transition:
    opacity 190ms ease,
    transform 190ms cubic-bezier(0.2, 0.82, 0.24, 1);
}

.ui-action > * {
  position: relative;
  z-index: 1;
}

.ui-action:not(:disabled):hover {
  --ui-action-scale: 1.025;
}

.ui-action.is-ui-pressing {
  animation: ui-action-recoil 280ms cubic-bezier(0.2, 0.88, 0.24, 1);
}

.ui-action.is-ui-pressing::after {
  opacity: 0.28;
  transform: scale(1.06);
}

@keyframes ui-action-recoil {
  0% {
    transform: translate(0, 0) scale(var(--ui-action-scale));
  }

  38% {
    transform: translate(var(--ui-action-press-shift-x), var(--ui-action-press-shift-y))
      scale(var(--ui-action-press-scale-x), var(--ui-action-press-scale-y));
  }

  68% {
    transform: translate(var(--ui-action-recoil-shift-x), var(--ui-action-recoil-shift-y))
      scale(var(--ui-action-recoil-scale-x), var(--ui-action-recoil-scale-y));
  }

  100% {
    transform: translate(0, 0) scale(var(--ui-action-scale));
  }
}