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

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

:root {
  --b: 6px;
  --r: 2;
  --m: 2;
}

svg[aria-hidden="true"] {
  position: fixed;
  pointer-events: none;
}

.glow-border {
  box-sizing: content-box;
  position: fixed;
  border-radius: 8px;
  overflow: hidden;
  z-index: 1000;
  filter: var(--f, url(#glow-0));
  pointer-events: none;
}

.glow-border::after {
  content: "";
  position: absolute;
  inset: 0;

  border: 8px solid transparent;
  border-image: conic-gradient(from var(--a, 0deg),
      var(--l, #0000 0%, #00c0a520, #00c0a540, #005aba60, #002e947f)) 6;
  animation: a 2s linear infinite;
}


.glow-border-2 {
  position: fixed;
  border-radius: 40px;
  overflow: hidden;
  z-index: 1000;
  filter: var(--f, url(#glow-0));
  filter: blur(10px);
  pointer-events: none;
}

.glow-border-2::after {
  content: "";
  position: absolute;
  inset: 0;

  border: 40px solid transparent;
  border-image: conic-gradient(from var(--a, 0deg) in srgb,
      var(--l, #0000 0%, #00c0a520, #00c0a540, #005aba60, #002e947f)) 6;
  animation: a 2s linear infinite;
}

.glow-text {
  background-clip: text;
  color: transparent;
  background-image: conic-gradient(from var(--a, 0deg) at 0% 50%,
      var(--l, #0000 0%, #00c0a520, #00c0a540, #005aba60, #002e947f, #005aba60, #00c0a540, #00c0a520));
  animation: a 2s linear infinite;
  filter: var(--f, url(#glow-1));
}


@keyframes a {
  to {
    --a: 1turn;
  }
}

.glow-scan {
  position: fixed;
  border-radius: 8px;
  overflow: hidden;
  z-index: 100;
  pointer-events: none;
}

.glow-scan::after {
  content: "";
  position: absolute;
  inset: 0;

  border: 8px solid transparent;
  background-image: linear-gradient(180deg in hsl,
      #0000,
      #00c0a5,
      #00c0a5,
      #005aba,
      #005aba);
  background-size: 100% 100px;
  background-repeat: repeat-x;
  filter: blur(50px);
  animation: p 2s linear infinite;
  animation-direction: alternate;
}

@keyframes p {
  from {
    background-position: 0 -100px;
  }

  to {
    background-position: 0 calc(100% + 100px);
  }
}

.fade-out {
  animation: fade-out 500ms linear 1;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

#coa-connector-lines {
  position: fixed !important;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}

.coa-line {
  vector-effect: non-scaling-stroke;
  stroke: url(#vertical-flow-gradient);
  stroke-width: 1px;
  fill: none;
}

.green-wave {
  animation: green-wave 150ms 1 ease-out forwards;
}

@keyframes green-wave {
  0% {
    background-color: transparent;
  }

  20% {
    background-color: var(--theme-accent);
  }

  100% {
    background-color: var(--theme-accent-light);
  }
}

.xmas-message {
  transition: opacity 2s linear, background-color 2s linear;
  color: #333;
  opacity: 0;

  * {
    transition: none;
  }
}

#xmas-card {
  transition: left 2s ease, top 2s ease, rotate 2s ease;
}

#xmas-card._fade-in .xmas-message {
  opacity: 1;
  width: fit-content;
}

#xmas-card._bring-forth {
  z-index: 3000;
  pointer-events: none;
  left: 50% !important;
  top: 50% !important;
  rotate: -2deg;
}

#xmas-card._bring-forth .xmas-target {
  visibility: visible;
}

#xmas-card._bring-forth .acodis-signature img {
  display: block;
}

#xmas-card._bring-forth .xmas-message {
  position: relative;
  border-radius: 8px;
  background-color: white;
  border: 1px solid var(--theme-primary-light);
}

#xmas-card._bring-forth .xmas-message::before {
  content: "";
  position: absolute;
  display: block;
  inset: -50px;
  z-index: -1;
  background-color: white;
  filter: blur(100px);
}

.xmas-actions {
  display: none;
}

.xmas-actions button .xmas-actions .button-like {
  border-color: var(--theme-primary-light);
}

#xmas-card._bring-forth .xmas-actions {
  opacity: 1;
  pointer-events: all;
  display: flex;
  justify-content: center;
  padding: 1rem;
  gap: 1rem;
}

.xmas-source,
.xmas-target {
  pointer-events: none;
  display: inline-block;
  line-height: 1.25;
}

.xmas-target {
  visibility: hidden;
  color: transparent;
  background: linear-gradient(150deg,
      var(--theme-primary-dark),
      var(--theme-accent-dark) 90%);
  background-clip: text;
}

.flying-word {
  position: fixed;
  z-index: 90;
  left: var(--target-pos-x);
  top: var(--target-pos-y);
  translate: var(--offset-pos);
  animation: flying-word 3000ms ease-in both, loop-path 1000ms linear 3 both;

  offset-anchor: top left;
  offset-path: path("M 0 0 A 30 30 0 1 0 0 0.1");
  offset-rotate: 0deg;
}

@keyframes flying-word {
  0% {
    font-size: 47%;
  }

  100% {
    translate: 0 0;
  }
}

@keyframes loop-path {
  0% {
    offset-distance: 0%;
  }

  100% {
    offset-distance: 100%;
  }
}