@property --gs-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --gs-glass-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --gs-glow-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --gs-mesh-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --gs-mesh-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@layer houdini {

.gs-fx-mesh {
  --local-bg: var(--gs-brand);
  --_bg: var(--local-bg);
  --local-color-1: color-mix(in oklch, var(--gs-brand) 15%, var(--_bg));
  --local-color-2: color-mix(in oklch, var(--gs-accent) 15%, var(--_bg));
  background-color: var(--_bg);
  background-image:
    radial-gradient(
      circle at var(--gs-mesh-x) var(--gs-mesh-y),
      var(--local-color-1) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle at calc(100% - var(--gs-mesh-x)) calc(100% - var(--gs-mesh-y)),
      var(--local-color-2) 0%,
      transparent 60%
    );
  background-size: 150% 150%;
  animation: gs-mesh-flow 12s ease-in-out infinite alternate;
}

@keyframes gs-mesh-flow {
  0% {
    --gs-mesh-x: 20%;
    --gs-mesh-y: 30%;
  }
  50% {
    --gs-mesh-x: 80%;
    --gs-mesh-y: 60%;
  }
  100% {
    --gs-mesh-x: 40%;
    --gs-mesh-y: 90%;
  }
}

.gs-fx-shimmer {
  position: relative;
  overflow: hidden;
}

.gs-fx-shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    color-mix(in oklch, var(--gs-white) 10%, transparent) 40%,
    color-mix(in oklch, var(--gs-white) 40%, transparent) 50%,
    color-mix(in oklch, var(--gs-white) 10%, transparent) 60%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0s;
  pointer-events: none;
  z-index: 2;
}

.gs-fx-shimmer:hover::after {
  left: 200%;
  transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.gs-fx-breathe {
  position: relative;
}

.gs-fx-breathe::before {
  content: "";
  position: absolute;
  inset: -0.25rem;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(
        in oklch,
        var(--gs-brand) calc(var(--gs-glow-opacity) * 100%),
        transparent
      )
      0%,
    transparent 70%
  );
  border-radius: inherit;
  z-index: -1;
  filter: blur(0.5rem);
  opacity: 0.6;
  animation: gs-breathe-pulse 4s ease-in-out infinite alternate;
  transition: --gs-glow-opacity 0.4s ease;
}

.gs-fx-breathe:hover::before {
  --gs-glow-opacity: 0.8;
  animation-duration: 2s;
}

@keyframes gs-breathe-pulse {
  0% {
    --gs-glow-opacity: 0.2;
    transform: scale(0.98);
  }
  100% {
    --gs-glow-opacity: 0.5;
    transform: scale(1.02);
  }
}

.gs-fx-glass {
  background: color-mix(
    in oklch,
    var(--gs-surface) var(--gs-glass-bg-opacity),
    transparent
  );
  backdrop-filter: blur(var(--gs-glass-blur))
    saturate(var(--gs-glass-saturate));
  -webkit-backdrop-filter: blur(var(--gs-glass-blur))
    saturate(var(--gs-glass-saturate));
  position: relative;
  isolation: isolate;
}

.gs-fx-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--gs-glass-border);
  background: conic-gradient(
    from var(--gs-glass-angle),
    color-mix(
        in oklch,
        var(--gs-brand) var(--gs-glass-glow-opacity),
        transparent
      )
      0%,
    transparent 20%,
    transparent 80%,
    color-mix(
        in oklch,
        var(--gs-brand) var(--gs-glass-glow-opacity),
        transparent
      )
      100%
  );
  -webkit-mask:
    linear-gradient(var(--gs-white) 0 0) content-box,
    linear-gradient(var(--gs-white) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: gs-glass-spin var(--gs-glass-speed) linear infinite;
}

.gs-fx-glass-high {
  background: color-mix(
    in oklch,
    var(--gs-surface) var(--gs-glass-bg-opacity-high),
    transparent
  );
  backdrop-filter: blur(var(--gs-glass-blur-high))
    saturate(var(--gs-glass-saturate-high));
  -webkit-backdrop-filter: blur(var(--gs-glass-blur-high))
    saturate(var(--gs-glass-saturate-high));
  position: relative;
  isolation: isolate;
}

.gs-fx-glass-high::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--gs-glass-border-high);
  background: conic-gradient(
    from var(--gs-glass-angle),
    color-mix(
        in oklch,
        var(--gs-accent) var(--gs-glass-glow-opacity-high),
        transparent
      )
      0%,
    transparent 30%,
    transparent 70%,
    color-mix(
        in oklch,
        var(--gs-accent) var(--gs-glass-glow-opacity-high),
        transparent
      )
      100%
  );
  -webkit-mask:
    linear-gradient(var(--gs-white) 0 0) content-box,
    linear-gradient(var(--gs-white) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: gs-glass-spin var(--gs-glass-speed-high) linear infinite
    reverse;
}

@keyframes gs-glass-spin {
  0% {
    --gs-glass-angle: 0deg;
  }
  100% {
    --gs-glass-angle: 360deg;
  }
}

}