/*
MARK: Hero
*/

section.hero {
  position: relative;
  width: 100%;

  &>div.kt-row-column-wrap {
    /* Only visible in production */
    max-width: 100%;
  }

  & .rays-container {
    position: absolute;
    inset: 0;
    overflow: hidden;

    &>div {
      --stripes: repeating-linear-gradient(100deg,
          #000000 0%,
          #000000 7%,
          transparent 10%,
          transparent 12%,
          #000000 16%);
      --rainbow: repeating-linear-gradient(100deg,
          #f9fcff30 10%,
          #eeffed30 15%,
          #daf7df30 20%,
          #ffffeb30 25%,
          #f4f7ff30 30%);

      position: absolute;
      inset: -10px;
      opacity: 0.5;
      background-image: var(--stripes), var(--rainbow);
      background-size: 300%, 200%;
      background-position: 50% 50%, 50% 50%;
      filter: blur(10px) opacity(50%) saturate(200%);
      mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
      pointer-events: none;

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--stripes), var(--rainbow);
        background-size: 200%, 100%;
        animation: hero-jumbo 60s linear infinite;
        background-attachment: fixed;
        mix-blend-mode: difference;
      }
    }
  }

  & h1.uagb-heading-text {
    text-shadow: 0 0 5px var(--global-palette7);
    text-wrap: balance;
  }
}

/*
MARK: CTA
*/

section.cta-container {
  --cta-base-size: 2rem;

  &>a {
    all: unset;

    &>span {
      border: calc(0.08 * var(--cta-base-size)) solid transparent;
      position: relative;
      color: var(--global-palette3);
      font-size: var(--cta-base-size);
      font-weight: 700;
      border-radius: calc(0.7 * var(--cta-base-size));
      padding: calc(0.25 * var(--cta-base-size)) calc(1 * var(--cta-base-size));
      display: flex;
      justify-content: center;
      cursor: pointer;

      background: linear-gradient(var(--global-palette8),
          var(--global-palette9)),
        linear-gradient(var(--global-palette7) 50%,
          rgba(18, 18, 19, 0.6) 80%,
          rgba(18, 18, 19, 0)),
        linear-gradient(90deg,
          var(--global-palette2),
          var(--global-palette3),
          var(--global-palette4),
          var(--global-palette5),
          var(--global-palette6));
      background-origin: border-box;
      background-clip: padding-box, border-box, border-box;
      background-size: 200%;
      animation: animate-cta 4s infinite linear;

      &::before {
        content: '';
        background: linear-gradient(90deg,
            var(--global-palette2),
            var(--global-palette3),
            var(--global-palette4),
            var(--global-palette5),
            var(--global-palette6));
        height: 30%;
        width: 60%;
        position: absolute;
        bottom: -20%;
        z-index: -5;
        background-size: 200%;
        animation: animate-cta 4s infinite linear;
        filter: blur(calc(0.8 * var(--cta-base-size)));
      }

      &:hover,
      &:hover::before {
        animation-duration: 1s;
      }
    }
  }
}

/*
MARK: brands
*/
.brands-carousel {
  & img {
    max-width: 100px !important;
  }
}

/*
MARK: Advanced cards
*/
section.adv-cards {
  display: grid;
  gap: 40px;
  place-items: center;

  &.course-overview {
    &>div {
      &:nth-of-type(1) {
        background-image: url(https://ugcroad.com/wp-content/uploads/2025/02/1-script.avif);
      }

      &:nth-of-type(2) {
        background-image: url(https://ugcroad.com/wp-content/uploads/2025/02/2-shooting.avif);
      }

      &:nth-of-type(3) {
        background-image: url(https://ugcroad.com/wp-content/uploads/2025/02/3-voice.avif);
      }

      &:nth-of-type(4) {
        background-image: url(https://ugcroad.com/wp-content/uploads/2025/02/4-brand.avif);
      }

      &:nth-of-type(5) {
        background-image: url(https://ugcroad.com/wp-content/uploads/2025/02/5-portfolio.avif);
      }

      &:nth-of-type(6) {
        background-image: url(https://ugcroad.com/wp-content/uploads/2025/02/6-experiences.avif);
      }

      &>p {
        &>span {
          &:nth-of-type(2) {
            font-size: clamp(12px, 3cqw, 16px);
          }
        }
      }
    }
  }

  &>svg {
    position: absolute;
  }

  &>div {
    width: 90vw;
    aspect-ratio: 4/3;
    border-radius: 16px;
    box-shadow: 0px 0px 25px -10px var(--global-palette7);
    filter: url(#adv-cards-shadow);
    transition: all 150ms ease;
    background-size: 100% auto;
    background-position: 50% 0px;
    background-repeat: no-repeat;
    container-name: card;
    container-type: inline-size;
    display: grid;
    align-items: end;
    justify-content: center;
    overflow: hidden;

    &:hover {
      background-size: 105%;
    }


    &>p {
      font-size: clamp(12px, 5cqw, 24px);
      min-width: 100cqw;
      margin: 0;
      padding-inline: 1ch;
      padding-top: 1rem;
      z-index: 1;
      display: grid;
      align-content: start;
      justify-content: center;
      text-align: center;
      text-wrap: balance;
      text-shadow: -1px 1px 5px black;
      background: linear-gradient(to bottom, transparent, hsl(0 0% 0% / 0.5) 25%, hsl(0 0% 0%));
      color: var(--global-palette3);
    }
  }
}

/*
MARK: Book intro
*/

section.book-intro {
  min-height: 80dvh;
  display: grid;
  place-items: center;
  padding: 2rem;

  &>div {
    background-color: var(--global-palette9);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;

    &>div {
      &:nth-of-type(1) {
        padding: 3rem;
        text-align: right;
        display: flex;
        flex-direction: column;
        z-index: 1;

        &>h2 {
          text-wrap: balance;
          text-align: right;

          &>span {
            line-height: 1.4;
            display: inline-block;
            white-space: nowrap;

            &:nth-of-type(1) {
              font-weight: 300;
            }

            &:nth-of-type(2) {
              font-weight: 400;
              position: relative;

              &::selection {
                background-color: #0b121574 !important;
                color: white !important;
              }

              &>svg {
                position: absolute;
                width: 100%;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                z-index: -1;
              }
            }
          }
        }

        &>p {
          text-wrap: pretty;
          max-width: 90vmin;
        }
      }

      &:nth-of-type(2) {
        position: relative;
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;

        &>div {
          width: clamp(150px, 50%, 500px);
          aspect-ratio: 1;
          background-color: var(--global-palette2);
          border-radius: 999px;
        }

        & img,
        svg {
          display: block;
          pointer-events: none;
          width: clamp(200px, 60vmin, 700px);
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          aspect-ratio: 1;
          object-fit: contain;
          user-select: none;
          max-width: unset;

          &.book-cover-front {
            animation: book-front-anim 1ms linear both;
            animation-timeline: view();
          }
        }
      }
    }
  }
}


/*
MARK: Subscribe card
*/
/* Credit @thebabydino */
@property --glowing-border {
  syntax: "<angle>";
  initial-value: 0deg;
  /* used only on pseudo, nowhere to be inherited,
* better perf if set false, see
* https://www.bram.us/2024/10/03/benchmarking-the-performance-of-css-property/ */
  inherits: false;
}

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

section.subscribe-card {
  display: grid;
  padding-inline: 1rem;
  gap: 1rem;

  &>div {
    overflow: hidden;
    position: relative;
    padding-block: 1rem;
    padding-inline: min(2rem, 2vw);
    border-radius: 1rem;
    background-image: linear-gradient(to bottom left, var(--global-palette7), var(--global-palette9));
    box-shadow: 0px 0px 155px -45px var(--global-palette2);

    &::before {
      content: "";
      position: absolute;
      z-index: 1;
      inset: -1em;
      border: solid 2.25em;
      pointer-events: none;
      border-image: conic-gradient(from var(--glowing-border),
          blue,
          rgb(86, 5, 123),
          rebeccapurple,
          teal,
          rgb(161, 164, 110),
          brown,
          blue) 1;
      filter: blur(100px);
      animation: glowing-card 16s linear infinite;
    }

    &>h2 {
      font-size: clamp(24px, 2vw, 36px);
      color: var(--global-palette3);
      text-wrap: balance;
      text-align: center;
      margin: 0;
    }

    &>div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-inline: 1cqw;

      &>p {
        text-align: center;
        font-size: 28px;
        color: var(--global-palette3);
        margin: 0;


        &:nth-of-type(2) {
          display: grid;

          &>* {
            line-height: 0.9;
          }

          &>del {
            text-align: start;
            color: #eb0000;
            font-weight: 300;

            &::before,
            &::after {
              clip-path: inset(100%);
              clip: rect(1px, 1px, 1px, 1px);
              height: 1px;
              overflow: hidden;
              position: absolute;
              white-space: nowrap;
              width: 1px;
            }

            &::before {
              content: " قبل الخصم ";
            }

            &::after {
              content: " بعد الخصم ";
            }
          }
        }
      }
    }

    &>ul {

      &>li {
        color: var(--global-palette3);
        font-size: 18px;
        padding-inline-start: 0.3ch;

        &::marker {
          content: '🗹';
          font-size: 0.7em;
        }
      }
    }

  }
}

.btn-link {
  --border-radius: 12px;
  margin-inline: auto;
  display: block;
  text-decoration: none;
  width: fit-content;
  position: relative;
  white-space: nowrap;


  &::before {
    content: '';
    position: absolute;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    left: -5px;
    top: -5px;
    pointer-events: none;
    background-image: conic-gradient(from var(--subscribe-gradient-angle), yellow, transparent);
    border-radius: calc(var(--border-radius) + 2.5px);
    animation: subscribe-card-btn-rotate 5s linear infinite;
    filter: blur(8px);
  }

  &>span {
    display: flex;
    align-items: center;
    gap: 1ch;
    position: relative;
    z-index: 2;
    text-align: center;
    background-image: linear-gradient(to right, var(--global-palette2), var(--global-palette9));
    background-size: 200% 100%;
    background-position: right;
    padding-inline: 1ch;
    padding-block: 0.2lh;
    border-radius: var(--border-radius);
    color: var(--global-palette3);
    transition: all 350ms ease;
    font-size: 1.5rem;
  }

  &:hover {
    &>span {
      color: var(--global-palette7);
      background-position: left;
    }
  }
}

/*
MARK: Progressive enhancements
*/

@supports (animation-timeline: view()) and (animation-range: contain 0% contain 100%) {
  section.adv-cards {
    &>div {
      animation: adv-cards-bg 1ms linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;

      &>p {
        animation: adv-cards-text-shadow 1ms linear both;
        animation-timeline: view();
      }
    }
  }

  section.book-intro {
    &>div {
      &>div {
        &:nth-of-type(1) {
          &>h2 {
            &>span {
              &:nth-of-type(2) {
                &>svg {
                  stroke-dasharray: 355.6537780761719;
                  animation: highlight-anim 1ms linear both;
                  animation-timeline: view();
                  animation-range: contain 20% contain 35%;
                }
              }
            }
          }
        }
      }
    }
  }


  @media screen and (max-width: 1023px) {
    section.adv-cards {

      &>div {
        --progress: calc(25% + (5% * var(--sticky-card-index)));
        --end: calc(var(--progress) - ((0 - var(--sticky-card-index)) * 100%));
        animation: adv-cards-fade-away 1ms linear both;
        animation-range: cover var(--progress) exit var(--end);
        animation-timeline: view();

        &:nth-of-type(1) {
          --sticky-card-index: 1;
        }

        &:nth-of-type(2) {
          --sticky-card-index: 2;
        }

        &:nth-of-type(3) {
          --sticky-card-index: 3;
        }

        &:nth-of-type(4) {
          --sticky-card-index: 4;
        }

        &:nth-of-type(5) {
          --sticky-card-index: 5;
        }

        &:nth-of-type(6) {
          animation: none;
        }
      }
    }
  }
}


/*
MARK: Responsive
*/

@media screen and (max-width: 767px) {
  section.book-intro {
    &>div {
      flex-direction: column-reverse;
      gap: 2rem;

      &>div {
        &:nth-of-type(1) {
          padding: 1rem;
          margin-block-start: 4rem;

          &>a {
            align-self: center;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1023px) {
  section.cta-container {
    --cta-base-size: 1.5rem;
  }

  section.adv-cards {
    &>div {
      position: sticky;
      top: 50px;

      &>p {
        padding-bottom: 1rem;
      }
    }
  }

}



@media screen and (min-width: 1024px) {
  section.adv-cards {
    grid-template-columns: repeat(3, 1fr);

    &>div {
      width: clamp(200px, 25vw, 600px);

      &>p {
        min-height: 40%;
      }
    }
  }

  section.subscribe-card {
    grid-template-columns: repeat(3, 1fr);
  }
}


/*
MARK: Animations
*/


@keyframes hero-jumbo {
  from {
    background-position: 50% 50%, 50% 50%;
  }

  to {
    background-position: 350% 50%, 350% 50%;
  }
}


@keyframes animate-cta {
  0% {
    background-position: 0
  }

  100% {
    background-position: 200%
  }
}

@keyframes gradient-angle {
  from {
    --gradient-angle: 360deg;
  }
}


@keyframes adv-cards-bg {
  to {
    background-position: 50% -50px;
  }
}

@keyframes adv-cards-fade-away {
  from {
    filter: brightness(1) blur(0);
  }

  to {
    scale: 0.5;
    filter: brightness(0) blur(10px);
  }
}

@keyframes adv-cards-text-shadow {
  to {
    text-shadow: -2px 2px 10px black;
  }
}



@keyframes glowing-card {
  to {
    /* CCW */
    --glowing-border: -1turn;
  }
}

@keyframes subscribe-card-btn-rotate {
  to {
    --subscribe-gradient-angle: -1turn;
  }
}


@keyframes highlight-anim {
  from {
    stroke-dashoffset: 355.6537780761719;
  }

  to {
    stroke-dashoffset: 0;
  }
}


@keyframes book-front-anim {
  from {
    transform: translate(-50%, -60%);
  }

  to {
    transform: translate(-50%, -40%);
  }
}