/* Gradient pulse on upload card (Shoalin cyan/teal theme) */

@property --pulse-opc {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --pulse-gradient-h {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 150%;
}

@property --pulse-gradient-w {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --pulse-inner-opacity {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --pulse-middle-opacity {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --pulse-outer-opacity {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --pulse-radial-center {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 40%;
}

@property --pulse-conic-rotate {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.upload-pulse-card {
  --pulse-hue1: 192;
  --pulse-hue2: 210;
  overflow: hidden;
}

.upload-pulse-card .glow-card-inner {
  position: relative;
  z-index: 1;
}

.upload-pulse-card .gradient-mask {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  transform: translate3d(0, 0, 0.01px);
  mask-image: linear-gradient(to top, transparent 25%, black 88%);
}

.upload-pulse-card .gradient {
  --pulse-opc: 100%;
  --pulse-gradient-h: 150%;
  --pulse-gradient-w: 100%;
  --pulse-inner-opacity: 0%;
  --pulse-middle-opacity: 100%;
  --pulse-outer-opacity: 100%;
  --pulse-radial-center: 40%;
  --pulse-conic-rotate: 0deg;

  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background-color: transparent;
  background-image:
    radial-gradient(
      circle at 50% var(--pulse-radial-center),
      oklch(0.72 0.22 var(--pulse-hue2) / var(--pulse-opc)) 10%,
      oklch(0.72 0.2 var(--pulse-hue1) / 0%) 66%
    ),
    conic-gradient(
      from var(--pulse-conic-rotate) at 50% var(--pulse-radial-center),
      oklch(0.72 0.2 var(--pulse-hue1) / var(--pulse-opc)) 15%,
      oklch(0.72 0.22 var(--pulse-hue2) / var(--pulse-opc)) 57%,
      oklch(0.72 0.2 var(--pulse-hue1) / var(--pulse-opc)) 100%
    );
  background-blend-mode: color;
  mask-image:
    radial-gradient(
      var(--pulse-gradient-w) var(--pulse-gradient-h) at 50% var(--pulse-radial-center),
      rgb(0 0 0 / var(--pulse-inner-opacity)) 20%,
      rgb(0 0 0 / var(--pulse-middle-opacity)) 40%,
      rgb(0 0 0 / var(--pulse-middle-opacity)) 50%,
      rgb(0 0 0 / var(--pulse-outer-opacity)) 75%
    );
  mask-size: cover;
  mask-position: center;
  mask-repeat: no-repeat;
  transition: opacity 0.65s ease-out;
}

.upload-pulse-card .gradient.animate {
  animation: upload-gradient-pulse 2.2s cubic-bezier(0.278, 0.001, 0.393, 1) both;
}

.upload-pulse-card.pulse-active .upload-drop {
  border-color: rgba(34, 211, 238, 0.45);
}

@keyframes upload-gradient-pulse {
  0% {
    --pulse-radial-center: 30%;
    --pulse-conic-rotate: -100deg;
    --pulse-opc: 50%;
    --pulse-gradient-h: 0%;
    --pulse-gradient-w: 0%;
    --pulse-inner-opacity: 0%;
    --pulse-middle-opacity: 30%;
    --pulse-outer-opacity: 0%;
  }
  75% {
    --pulse-radial-center: 60%;
    --pulse-gradient-h: 180%;
    --pulse-gradient-w: 140%;
    --pulse-outer-opacity: 0%;
  }
  100% {
    --pulse-opc: 75%;
    --pulse-radial-center: 60%;
    --pulse-conic-rotate: 50deg;
    --pulse-gradient-h: 180%;
    --pulse-gradient-w: 180%;
    --pulse-inner-opacity: 0%;
    --pulse-middle-opacity: 55%;
    --pulse-outer-opacity: 55%;
  }
}