/* Registry renderer: the same class/variables are used by Builder and frontend. */
.tvd-border {
  --tvd-border-color: currentColor;
  --tvd-border-width: 1px;
  --tvd-border-radius: 12px;
  --tvd-border-opacity: 1;
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  pointer-events: none;
  border: var(--tvd-border-width) solid
    color-mix(
      in srgb,
      var(--tvd-border-color),
      transparent calc((1 - var(--tvd-border-opacity)) * 100%)
    );
  border-radius: var(--tvd-border-radius);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease;
  contain: paint;
}

.tvd-border--frame-solid {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tvd-border-color), transparent 55%),
    0 6px 20px color-mix(in srgb, var(--tvd-border-color), transparent 86%);
}
.tvd-border--soft-outline {
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--tvd-border-color), transparent 55%);
}
.tvd-border--outline-expand:hover,
.has-hover:hover > .tvd-border--outline-expand {
  inset: -5px;
}
.tvd-border--glass-edge {
  background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--tvd-border-color), white 65%),
      transparent 42%
    )
    border-box;
  backdrop-filter: blur(4px);
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.tvd-border--gradient-frame,
.tvd-border--aurora-ribbon {
  border-color: transparent;
  background:
    linear-gradient(
        var(--tvd-surface, transparent),
        var(--tvd-surface, transparent)
      )
      padding-box,
    linear-gradient(
        120deg,
        var(--tvd-border-color),
        #8b5cf6,
        #22d3ee,
        var(--tvd-border-color)
      )
      border-box;
  background-size:
    100% 100%,
    240% 240%;
  animation: tvd-border-gradient 5s ease infinite;
}
.tvd-border--outline-flow {
  border-color: transparent;
  background:
    linear-gradient(90deg, var(--tvd-border-color) 50%, transparent 50%) 0
      0/14px 100% repeat-x,
    linear-gradient(0deg, var(--tvd-border-color) 50%, transparent 50%) 0 0/100%
      14px repeat-y;
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: tvd-border-flow 2.8s linear infinite;
}
.tvd-border--neon-pulse {
  box-shadow:
    0 0 0 1px var(--tvd-border-color),
    0 0 14px color-mix(in srgb, var(--tvd-border-color), transparent 20%),
    inset 0 0 14px color-mix(in srgb, var(--tvd-border-color), transparent 75%);
  animation: tvd-border-pulse 2.4s ease-in-out infinite;
}
.tvd-border--dual-frame {
  box-shadow:
    inset 0 0 0 3px var(--tvd-border-color),
    inset 0 0 0 7px transparent,
    0 0 0 1px color-mix(in srgb, var(--tvd-border-color), transparent 45%);
}
.tvd-border--point-grid {
  border: 0;
  background: radial-gradient(
      circle,
      var(--tvd-border-color) 1.2px,
      transparent 1.8px
    )
    0 0/9px 9px;
  opacity: 0.8;
}
.tvd-border--ribbon-edge {
  border-width: 3px 1px 1px;
  border-top-color: var(--tvd-border-color);
  transform: skewX(-1deg);
}
.tvd-border--organic-edge {
  border-radius: 52% 48% 44% 56%/45% 42% 58% 55%;
}

@keyframes tvd-border-flow {
  to {
    background-position:
      14px 0,
      0 14px;
  }
}
@keyframes tvd-border-pulse {
  50% {
    opacity: 0.72;
    box-shadow:
      0 0 0 1px var(--tvd-border-color),
      0 0 22px var(--tvd-border-color);
  }
}
@keyframes tvd-border-gradient {
  50% {
    background-position:
      100% 0,
      100% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tvd-border {
    animation: none !important;
    transition: none !important;
  }
}