.starfield-origin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@property --hero-card-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes hero-card-border-spin {
  from {
    --hero-card-border-angle: 0deg;
  }

  to {
    --hero-card-border-angle: 360deg;
  }
}

.hero-card-border {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;

  &:before,
  &:after {
    content: '';
    width: 100%;
    height: 100%;
    background-image: conic-gradient(from var(--hero-card-border-angle),
        color-mix(in oklab, var(--color-primary) 0%, transparent),
        color-mix(in oklab, var(--color-primary) 0%, transparent),
        color-mix(in oklab, var(--color-primary) 0%, transparent),
        var(--color-primary),
        var(--color-secondary),
        var(--color-accent),
        var(--color-accent),
        var(--color-secondary),
        var(--color-primary),
        color-mix(in oklab, var(--color-primary) 0%, transparent),
        color-mix(in oklab, var(--color-primary) 0%, transparent),
        color-mix(in oklab, var(--color-primary) 0%, transparent));
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* animation: 6s hero-card-border-spin linear infinite; */
  }

  &.rounded-b-4xl:before,
  &.rounded-b-4xl:after {
    @apply rounded-b-4xl;
  }

  &:before {
    filter: blur(1.5rem);
    opacity: 0.5;
  }
}

@keyframes line-grid {
  0% {
    transform: translateY(0, 0, 0);
  }

  100% {
    transform: translate3d(0, -50%, 0);
  }
}

.skew-lines {
  width: 100%;
  height: 95%;
  perspective: 30vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

  .skew-lines-floor {
    width: 125%;
    height: 150%;
    overflow: hidden;
    position: absolute;
    left: 50%;
    bottom: -4rem;
    transform: translateX(-50%);
    perspective: 450px;
  }

  .skew-lines-grid {
    width: 100%;
    height: 200%;
    transform: rotateX(106deg);
    opacity: 0.065;
    overflow: hidden;

    &:before {
      content: '';
      width: 100%;
      height: 200%;
      background-image:
        linear-gradient(to right, #fff 1px, transparent 0),
        linear-gradient(to bottom, #fff 1px, transparent 0);
      background-size: 120px 60px;
      background-repeat: repeat;
      animation: line-grid 45s linear infinite;
      position: absolute;
      left: 0;
    }
  }
}

.radial-accent-tl,
.radial-accent-t,
.radial-accent-tr {
  --opacity: 1;
  --offset-x-half: calc(var(--offset-x) / 2);
}

.hover\:radial-accent-tl,
.hover\:radial-accent-t,
.hover\:radial-accent-tr {
  --opacity: 0;

  &:hover {
    --opacity: 1;
  }
}

.group {

  .group-hover\:radial-accent-tl,
  .group-hover\:radial-accent-t,
  .group-hover\:radial-accent-tr {
    --opacity: 0;
  }

  .group:hover .group-hover\:radial-accent-tl,
  .group:hover .group-hover\:radial-accent-t,
  .group:hover .group-hover\:radial-accent-tr {
    --opacity: 1;
  }
}

.radial-accent-tl,
.hover\:radial-accent-tl,
.group-hover\:radial-accent-tl {
  --offset-x: 30%;
}

.radial-accent-t,
.hover\:radial-accent-t,
.group-hover\:radial-accent-t {
  --offset-x: 50%;

  &:after {
    right: unset;
    left: var(--offset-x);
    transform: translateX(-50%);
  }
}

.radial-accent-tr,
.hover\:radial-accent-tr,
.group-hover\:radial-accent-tr {
  --offset-x: 70%;
}

.radial-accent-tl,
.hover\:radial-accent-tl,
.group-hover\:radial-accent-tl,
.radial-accent-t,
.hover\:radial-accent-t,
.group-hover\:radial-accent-t,
.radial-accent-tr,
.hover\:radial-accent-tr,
.group-hover\:radial-accent-tr {
  --accent-height: 1px;
  --color: var(--color-secondary);

  position: relative;
  overflow: hidden;

  &:before {
    @apply top-0 left-0 z-20 absolute aspect-square pointer-events-none;

    content: "";
    width: 100%;
    opacity: var(--opacity, 1);
    transition: all 200ms ease-in-out;
    background-image: radial-gradient(40% 30px at var(--offset-x, 30%) 0%,
        color-mix(in oklab, var(--color) var(--offset-x-half, 15%), transparent),
        color-mix(in oklab, var(--color) 0%, transparent));

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  &:after {
    @apply bg-gradient-to-r from-primary/0 from-[var(--offset-x-half)] via-primary/30 to-primary/0 dark:from-secondary/0 dark:via-secondary/30 dark:to-secondary/0;

    content: "";
    width: 80%;
    height: var(--accent-height, 1px);
    opacity: var(--opacity, 1);
    transition: all 200ms ease-in-out;
    position: absolute;
    top: 0;
    right: var(--offset-x, 30%);
    z-index: 10;

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }
}

html[data-theme='adocasts-light'],
html[data-theme='adocasts-system'][prefers-color-scheme='light'] {
  .radial-accent-tl,
  .hover\:radial-accent-tl,
  .group-hover\:radial-accent-tl,
  .radial-accent-t,
  .hover\:radial-accent-t,
  .group-hover\:radial-accent-t,
  .radial-accent-tr,
  .hover\:radial-accent-tr,
  .group-hover\:radial-accent-tr {
    --color: var(--color-primary);
  }
}

.linear-accent {
  --height: 8px;

  position: relative;

  &:before,
  &:after {
    @apply left-0 z-20 absolute pointer-events-none;

    content: "";
    width: 100%;
    height: var(--height);
    border-top-right-radius: var(--radius-box);
    border-top-left-radius: var(--radius-box);
    background-image: linear-gradient(to var(--direction),
        color-mix(in oklab, var(--color) 3%, transparent) 0%,
        color-mix(in oklab, var(--color) 0%, transparent) 75%);
  }

  &:before {
    --direction: bottom;
    --color: var(--color-slate-50);
    border-bottom-right-radius: calc(var(--height) / 2);
    border-bottom-left-radius: calc(var(--height) / 2);
    top: 0;
  }

  &:after {
    --direction: top;
    --color: var(--color-slate-950);
    border-top-right-radius: calc(var(--height) / 2);
    border-top-left-radius: calc(var(--height) / 2);
    bottom: 0;
  }
}

.pattern-faded-stars {
  width: 100%;
  height: calc(theme(spacing.48) * 2);
  transform: translateY(-50%);
  position: absolute;
  top: 0;
  left: 0;

  &:before {
    content: "";
    background-image: url('/imgs/patterns/faded_stars.svg');
    background-repeat: repeat-x;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .1;
    z-index: 0;
  }

  &:after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right,
        color-mix(in oklab, var(--color-base-300) 100%, transparent),
        color-mix(in oklab, var(--color-base-300) 0%, transparent) 20% 80%,
        color-mix(in oklab, var(--color-base-300) 100%, transparent));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
}

.border-base-gradient-to-b,
.border-base-gradient-to-t {
  background-clip: padding-box;
  border: solid 1px transparent;

  &:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 15px;
    border: 1px solid transparent;
    background: linear-gradient(var(--bg-direction, to bottom), var(--color-base-100), color-mix(in oklab, var(--color-base-content), transparent 75%)) border-box;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
}

.border-base-gradient-to-t {
  --bg-direction: to top;
}
