@import 'tailwindcss';
@import "tailwindcss-animated";
@import "./_theme.css";
@import "./_footer.css";
@import "./_accents.css";
@import "./_banners.css";
@import "./_container.css";
@import "./_fades.css";
@import "./_prose.css";
@import "./_stats.css";
@import "./_unpoly.css";
@import "./_player.css";
@import "./_utils.css";
@plugin "@tailwindcss/typography";

[x-cloak] {
  display: none !important;
}

html,
body {
  background-color: var(--color-base-300);
}

html {
  height: 100%;
}

body {
  --section-spacing: theme('spacing.12') --mono: 0;
  --casl: 0.5;
  --wght: 400;
  --slnt: 0;
  --crsv: 0.5;

  font-variation-settings: var(--mono), var(--casl), var(--wght), var(--slnt), var(--crsv);
  overflow-x: hidden;
  min-height: 100%;

  .italic {
    --casl: 1;
    --slnt: -15;
  }

  .mono {
    --mono: 1;
  }

  .font-semibold {
    --wght: 600;
  }

  .font-bold {
    --wght: 700;
  }

  .font-black {
    --wght: 800;
  }
}

.heading-2 {
  @apply z-10 relative mb-4 font-semibold text-3xl text-balance tracking-tight;

  @variant lg {
    @apply text-4xl;
  }
}

.heading-2a {
  @apply z-10 relative mb-4 font-semibold text-2xl text-balance tracking-tight;

  @variant lg {
    @apply text-3xl;
  }
}

.heading-3 {
  @apply mb-3 font-semibold text-xl;

  @variant lg {
    @apply text-2xl;
  }
}

.heading-4 {
  @apply mb-3 font-medium text-lg;

  @variant lg {
    @apply text-xl;
  }
}

.radial-progress {
  &:before {
    --color: var(--color-base-100);
    background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), var(--color, #0000) 0);
  }
}

.collapse {
  .show-open {
    display: none;
  }

  .show-close {
    display: initial;
  }
}

.collapse[open] {
  .show-open {
    display: initial;
  }

  .show-close {
    display: none;
  }

  .open\:rotate-180 {
    transform: rotate(180deg);
  }
}

.card-title {
  --cardtitle-fs: 1.125rem;
}

a.link-grow {
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
  }
}

.border-base {
  border-color: var(--color-base-300);
  border-width: var(--border);
}

.carousel-item-viewport-offset {
  width: calc(((100% - var(--container-width)) / 2) + var(--padding-x));
}

.btn:has(svg),
.menu>li>label:has(svg),
.menu>li>a:has(svg) {
  @apply gap-x-3;
}

.btn.btn-ghost-soft {
  &:not(.btn-active, .mouseover, :hover, :active:focus, :focus-visible) {
    &:not(:disabled, [disabled], .btn-disabled) {
      outline-color: currentColor;
      --btn-fg: currentColor;
    }
  }

  &:not(.btn-active, .mouseover, :hover, :active:focus, :focus-visible) {
    --btn-shadow: '';
    --btn-bg: #0000;
    --btn-border: #0000;
    --btn-noise: none;
  }

  &:hover,
  &.mouseover {
    --btn-shadow: '';
    --btn-fg: var(--btn-color, var(--color-base-content));
    --btn-bg: color-mix(in oklab,
        var(--btn-color, var(--color-base-content)) 8%,
        var(--color-base-100));
    --btn-border: color-mix(in oklab,
        var(--btn-color, var(--color-base-content)) 10%,
        var(--color-base-100));
    --btn-noise: none;
  }
}

.card:has(.card-border) {
  --accent-height: 3px;

  .card-body,
  .card-figure,
  .card-actions {
    position: relative;
    z-index: 6;
  }

  .card-border {
    @apply absolute inset-0 h-full overflow-hidden duration-200 ease-in-out;
    pointer-events: none;
    border-radius: var(--radius-box);
    border: 3px solid transparent;
    background: linear-gradient(to bottom, transparent, var(--color-base-100)) border-box;
    mask:
      linear-gradient(#000 0 0) padding-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    z-index: 20;
  }

  &:hover .card-border {
    opacity: 1;
  }
}

.series-bento {
  --gap: theme(spacing.3);

  display: grid;
  grid-auto-columns: 100%;
  grid-template-rows: repeat(1, 1fr);
  grid-template-areas:
    "area-1"
    "area-2";
  gap: var(--gap);

  @variant lg {
    grid-auto-columns: calc(33.33% - (var(--gap) / 2));
    grid-template-areas: "area-1 area-2 area-2";
  }

  .area-1 {
    grid-area: area-1;
    height: 100%;

    .card {
      display: grid;
      height: 100%;

      .card-body {
        flex-direction: row;
        gap: theme(spacing.6);

        main,
        aside {
          flex: 1;
        }

        @variant lg {
          flex-direction: column;
        }
      }

      aside {
        @variant md {
          @apply flex flex-col;
        }
      }
    }
  }

  .area-2 {
    grid-area: area-2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);

    .card {
      --width: 100%;
      width: var(--width);

      @variant md {
        --width: 45%;
        width: calc(var(--width) - (var(--gap) / 2));
      }

      main {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
      }
    }

    .card:nth-child(1),
    .card:nth-child(4) {
      @variant md {
        --width: 55%;
      }
    }
  }

  .card {
    main {
      p {
        @apply line-clamp-5;
      }
    }

    aside {
      @apply hidden;
    }
  }
}

.series-list {
  display: flex;
  flex-direction: column;

  .card {
    @variant lg {
      --tw-gradient-position: to right in oklab;
    }
  }

  .card-body {
    @variant lg {
      flex-direction: row;
      gap: theme(spacing.12);

      main {
        width: 60%;
        min-height: 14rem;

        .card-title {
          font-size: theme(fontSize.2xl);
        }

        p {
          font-size: theme(fontSize.base);
        }
      }

      aside {
        width: 40%;

        ul {
          max-height: calc(100cqh - 1rem);
        }
      }
    }
  }
}

.hero-lesson-grid {
  --columns: 3;

  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);

  @media screen and (width < 490px) {
    --columns: 3;

    .img:nth-child(1),
    .img:nth-child(5),
    .img:nth-child(8) {
      grid-column: span 2/span 2;
      grid-row: span 2/span 2;
    }
  }

  @media screen and (width >=610px) and (width < 810px) {
    --columns: 4;

    .img:nth-child(1),
    .img:nth-child(4),
    .img:nth-child(5) {
      grid-column: span 2/span 2;
      grid-row: span 2/span 2;
    }
  }

  @media screen and (width >=810px) and (width < 1400px) {
    --columns: 5;

    .img:nth-child(2),
    .img:nth-child(6),
    .img:nth-child(9) {
      grid-column: span 2/span 2;
      grid-row: span 2/span 2;
    }
  }

  @media screen and (width >=1400px) {
    --columns: 6;

    .img:nth-child(3),
    .img:nth-child(8),
    .img:nth-child(10) {
      grid-column: span 2/span 2;
      grid-row: span 2/span 2;
    }
  }

  &:before {
    @apply bg-gradient-to-r from-base-300/85 from-40% to-base-300/50 md:to-base-300/0;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
  }

  &:after {
    @apply bg-gradient-to-b from-transparent to-base-300;
    content: "";
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
  }
}

.scale-in {
  animation: scale-in 2.5s forwards;
  opacity: 0;
}

@keyframes scale-in {
  0% {
    transform: scale(2.5);
    opacity: .75;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@layer utilities {
  .animate-jump-in-fade {
    animation-name: jump-in-fade;
    animation-duration: var(--default-animation-duration, 1s);
    animation-fill-mode: forwards;
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes jump-in-fade {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  80% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@utility animate-marquee {
  animation-name: marquee;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes marquee {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-100%)
  }
}

.animation-float {
  animation: float 3s linear infinite;
}

@keyframes float {
  0% {
    transform: translateY(-.25rem);
  }

  50% {
    transform: translateY(.25rem);
  }

  100% {
    transform: translateY(-.25rem);
  }
}
