/*
MARK: Home page
*/

section.hero-title {
  & > h1 {
    --shadow-color: #f7ebd230;
    text-align: center;
    font-size: clamp(36px, 4vw, 60px);
    text-wrap: balance;
    color: var(--global-palette9);

    text-shadow:
      0px 0px 3px var(--shadow-color),
      0px 0px 3px var(--shadow-color),
      0px 0px 5px var(--shadow-color),
      0px 0px 5px var(--shadow-color),
      0px 0px 5px var(--shadow-color),
      0px 0px 5px var(--shadow-color),
      0px 0px 5px var(--shadow-color),
      0px 0px 5px var(--shadow-color),
      0px 0px 15px var(--shadow-color),
      0px 0px 15px var(--shadow-color),
      0px 0px 15px var(--global-palette1),
      0px 0px 30px var(--global-palette1),
      0px 10px 35px var(--global-palette1),
      0px 10px 35px var(--global-palette1),
      0px 10px 35px var(--global-palette1),
      0px 10px 35px var(--global-palette1),
      0px -10px 35px var(--global-palette1),
      0px -10px 35px var(--global-palette1);
  }
}

/*
MARK: CTA
*/

/*
CSS @property and the New Style
https://ryanmulligan.dev/blog/css-property-new-style/
*/

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

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

@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}

@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

section.cta-container {
  --shiny-cta-bg: var(--global-palette3);
  --shiny-cta-bg-subtle: var(--global-palette2);
  --shiny-cta-fg: var(--global-palette7);
  --shiny-cta-highlight: var(--global-palette2);
  --shiny-cta-highlight-subtle: var(--global-palette5);

  display: flex;
  justify-content: center;

  & > a {
    all: unset;
    --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
    --animation: gradient-angle linear infinite;
    --duration: 3s;
    --shadow-size: 2px;
    isolation: isolate;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    outline-offset: 4px;
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: 360px;
    color: var(--shiny-cta-fg);
    background:
      linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
      conic-gradient(
          from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
          transparent,
          var(--shiny-cta-highlight) var(--gradient-percent),
          var(--gradient-shine) calc(var(--gradient-percent) * 2),
          var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
          transparent calc(var(--gradient-percent) * 4)
        )
        border-box;
    box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
    transition: var(--transition);
    transition-property:
      --gradient-angle-offset, --gradient-percent, --gradient-shine;

    &,
    &::after {
      animation:
        var(--animation) var(--duration),
        var(--animation) calc(var(--duration) / 0.4) reverse paused;
      animation-composition: add;
    }

    &::after,
    & > span::before {
      content: "";
      pointer-events: none;
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
    }

    &::after {
      --animation: shimmer linear infinite;
      width: 100%;
      aspect-ratio: 1;
      background: linear-gradient(
        -50deg,
        transparent,
        var(--shiny-cta-highlight),
        transparent
      );
      mask-image: radial-gradient(circle at bottom, transparent 40%, black);
      opacity: 0.6;
    }

    &:active {
      translate: 0 1px;
    }

    &:is(:hover, :focus-visible) {
      --gradient-percent: 20%;
      --gradient-angle-offset: 95deg;
      --gradient-shine: var(--shiny-cta-highlight-subtle);

      & > span::before {
        opacity: 1;
      }
    }

    & > span {
      /* Inner shimmer */
      &::before {
        --size: calc(100% + 1rem);
        width: var(--size);
        height: var(--size);
        box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
        opacity: 0;
        transition: opacity var(--transition);
        animation: calc(var(--duration) * 1.5) breathe linear infinite;
      }
    }
  }
}

/*
MARK: Brands
*/

section.brands {
  --slides-per-page: 6;
  --slide-spacing: 1rem;

  & > .embla__viewport {
    overflow: hidden;
    max-width: 90vmin;
    margin-inline: auto;

    & > .embla__container {
      display: flex;
      touch-action: pan-y pinch-zoom;
      margin-left: calc(var(--slide-spacing) * -1);

      & > .embla__slide {
        transform: translate3d(0, 0, 0);
        flex: 0 0 calc(100% / var(--slides-per-page));
        min-width: 0;
        padding-left: var(--slide-spacing);

        & > img {
          max-width: 100%;
        }
      }
    }
  }
}

/*
MARK: Zero to hero
*/

section.zero-to-pro {
  display: grid;
  place-items: center;

  & > div {
    position: relative;
    background-color: var(--global-palette3);
    border-radius: 2rem;
    padding-block: 2rem;
    padding-inline: 3rem;
    text-align: center;
    box-shadow: 0px 0px 10px -2px var(--global-palette1);

    & > h2 {
      font-size: clamp(20px, 3vw, 80px);
      margin: 0;
      line-height: 1.5;
      color: var(--global-palette9);
    }

    & > p {
      font-size: clamp(16px, 1.5vw, 40px);
      color: var(--global-palette7);
      margin: 0;
    }

    & > svg {
      &:nth-of-type(1) {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;

        & ~ * {
          position: relative;
          z-index: 1;
        }
      }
    }
  }
}

/*
MARK: Stats
*/
section.stats {
  display: flex;
  justify-content: center;

  & > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    text-align: center;

    & > div {
      & > h4 {
        font-size: clamp(36px, 7vw, 102px);
        min-width: 5ch;
        margin: 0;
        color: var(--global-palette7);

        &::after {
          content: "+";
        }
      }

      & > p {
        margin: 0;
        color: var(--global-palette7);
      }
    }
  }
}

/*
MARK: Advanced cards
*/

section.adv-cards {
  display: grid;
  gap: 40px;
  justify-content: center;
  align-items: center;

  &.passion-to-career {
    & > div {
      &:nth-of-type(1) {
        background-image: url(https://mustafahassona.com/wp-content/uploads/2025/01/home-passion-to-career-1.avif);
      }

      &:nth-of-type(2) {
        background-image: url(https://mustafahassona.com/wp-content/uploads/2025/01/home-passion-to-career-2.avif);
      }

      &:nth-of-type(3) {
        background-image: url(https://mustafahassona.com/wp-content/uploads/2025/01/home-passion-to-career-3.avif);
      }

      &:nth-of-type(4) {
        background-image: url(https://mustafahassona.com/wp-content/uploads/2025/01/home-passion-to-career-4.avif);
      }

      &:nth-of-type(5) {
        background-image: url(https://mustafahassona.com/wp-content/uploads/2025/02/home-passion-to-career-5.avif);
      }

      &:nth-of-type(6) {
        background-image: url(https://mustafahassona.com/wp-content/uploads/2025/01/home-passion-to-career-6.avif);
      }
    }
  }

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

      &:nth-of-type(2) {
        background-image: url(https://mustafahassona.com/wp-content/uploads/2025/06/modules-section-2.avif);
      }

      &:nth-of-type(3) {
        background-image: url(https://mustafahassona.com/wp-content/uploads/2025/06/modules-section-3.avif);
      }

      &:nth-of-type(4) {
        background-image: url(https://mustafahassona.com/wp-content/uploads/2025/06/modules-section-4.avif);
      }

      &:nth-of-type(5) {
        background-image: url(https://mustafahassona.com/wp-content/uploads/2025/06/modules-section-5.avif);
      }

      &:nth-of-type(6) {
        background-image: url(https://mustafahassona.com/wp-content/uploads/2025/06/modules-section-6.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-palette3);
    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-palette7);
    }
  }
}

/* MARK: My story */

section.story {
  position: relative;
  min-height: 200dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  z-index: 0;

  & > img {
    z-index: -1;
    max-width: 100%;
    height: 100dvh;
    position: sticky;
    top: 0;
    object-fit: cover;
  }

  & > div {
    display: grid;
    justify-items: center;
    align-content: center;
    padding-inline: 5vw;

    & > h2 {
      & > span {
        --shadow-color: #f7ebd230;
        text-shadow:
          0px 0px 2px var(--shadow-color),
          0px 0px 2px var(--shadow-color),
          0px 0px 3px var(--shadow-color),
          0px 0px 3px var(--shadow-color),
          0px 0px 3px var(--shadow-color),
          0px 0px 3px var(--shadow-color),
          0px 0px 3px var(--shadow-color),
          0px 0px 3px var(--shadow-color),
          0px 0px 7px var(--shadow-color),
          0px 0px 7px var(--shadow-color),
          0px 0px 7px var(--global-palette1),
          0px 0px 15px var(--global-palette1),
          0px 10px 18px var(--global-palette1),
          0px 10px 18px var(--global-palette1),
          0px 10px 18px var(--global-palette1),
          0px 10px 18px var(--global-palette1),
          0px -10px 18px var(--global-palette1),
          0px -10px 18px var(--global-palette1);
      }
    }

    & > p {
      font-size: clamp(20px, 2vw, 36px);
      text-align: center;
      text-wrap: pretty;
      line-height: 2;
      margin-block: 0;
      color: var(--global-palette7);

      & > a {
        text-underline-offset: 0.3em;
        color: white;
      }
    }
  }
}

.highlight-lines-title {
  display: grid;
  place-items: center;

  & > span {
    font-size: clamp(36px, 5vw, 80px);
    color: var(--global-palette9);
  }

  & > svg {
    display: none;
  }
}

/*
MARK: To whome this course is for
*/

section.to-whome {
  & > h2 {
    display: grid;
    place-items: center;
    font-size: clamp(36px, 4vw, 60px);
    color: white;

    & > svg {
      display: none;
    }
  }

  & > div {
    & > ol {
      & > li {
        color: var(--global-palette7);
        font-size: clamp(24px, 3vw, 36px);
      }
    }
  }
}

/*
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;
  place-items: center;
  padding-inline: 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-palette1),
      var(--global-palette3)
    );
    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,
          lime,
          rebeccapurple,
          teal,
          yellow,
          brown,
          blue
        )
        1;
      filter: blur(100px);
      animation: glowing-card 16s linear infinite;
    }

    & > h2 {
      font-size: clamp(24px, 2vw, 36px);
      color: var(--global-palette9);
      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-palette7);
        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: " بعد الخصم ";
            }
          }

          & > sub {
            font-size: 12px;
            line-height: 2;
          }
        }
      }
    }

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

        &::marker {
          content: "🌟";
          font-size: 0.7em;
        }
      }
    }

    & > a {
      --border-radius: 12px;
      margin-inline: auto;
      display: block;
      text-decoration: none;
      width: fit-content;
      position: relative;

      &::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(4px);
      }

      & > span {
        display: block;
        position: relative;
        z-index: 2;
        text-align: center;
        background-image: linear-gradient(
          to left,
          var(--global-palette7),
          #f7d796
        );
        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 150ms ease;
        font-size: 1.5rem;
      }

      &:hover {
        & > span {
          background-position: left;
        }
      }
    }
  }
}

.countdown-widget {
  direction: ltr;
}

/*
MARK: Responsive
*/

@media screen and (max-width: 599px) {
  section.brands {
    --slides-per-page: 2;
  }

  section.to-whome {
    padding-inline: 1ch;
  }
}

@media screen and (min-width: 600px) and (max-width: 1023px) {
  section.brands {
    --slides-per-page: 3;
  }
}

@media screen and (max-width: 1023px) {
  section.stats {
    & > div {
      flex-direction: column;
    }
  }

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

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

  section.story {
    & > div {
      & > p {
        &.link-pa {
          & > a {
            display: block;
          }
        }
      }
    }
  }
}

@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%;
      }
    }
  }
}

/*
MARK: Progressive enhancements
*/

/*
MARK: FUCKING SAFARI
*/

@supports (-webkit-touch-callout: none) {
  section.story {
    & > div {
      backdrop-filter: blur(10px);
      background-color: #0f0000f5;
    }
  }
}

/*
MARK: Firefox workaround
*/
@supports not (
  (animation-timeline: view()) and (animation-range: entry 0% exit 100%)
) {
  section.story {
    align-content: end;

    & > div {
      min-height: 100dvh;
      backdrop-filter: blur(4px);
      background-color: #0f0000a5;
    }
  }

  @media screen and (max-width: 1023px) {
    section.story {
      justify-content: space-evenly;
    }
  }
}

/*
MARK: Animation timeline
*/
@supports (animation-timeline: view()) and
  (animation-range: contain 0% contain 100%) {
  section.zero-to-pro {
    & > div {
      & > svg {
        &:nth-of-type(2) {
          & > g {
            transform-origin: 20% 45%;
            animation: zero-to-pro-clapperboard 1ms linear both;
            animation-timeline: view();
            animation-range: contain 0% contain 80%;

            & + path {
              animation: zero-to-pro-clapperboard-play 1ms linear both;
              animation-timeline: view();
              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.story {
    & > div {
      & > h2 {
        & > span {
          animation: story-title 1ms linear both;
          animation-range: entry 30% cover 100%;
          animation-timeline: view();
        }
      }
    }

    & > img {
      animation: story-bg 1ms linear both;
      animation-range: entry 30% cover 100%;
      animation-timeline: view();
    }
  }

  .highlight-lines-title {
    & > svg {
      --length: 330.47528076171875;
      display: block;
      width: 70%;
      margin-top: -5%;

      & > path {
        stroke: var(--global-palette1);
        stroke-width: 3px;
        stroke-dasharray: var(--length);
        animation: highlight-lines 1ms linear both;
        animation-range: contain 10% contain 40%;
        animation-timeline: view();
      }
    }
  }

  section.to-whome {
    & > h2 {
      position: relative;

      & > svg {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 150%;
        height: 150%;
        max-width: 80vw;
        translate: -50% -50%;
        z-index: -1;

        & > path {
          --length: 246.29246520996094;
          stroke: var(--global-palette1);
          stroke-dasharray: var(--length);
          animation: to-whome-title-highlight 1ms linear both;
          animation-timeline: view();
          animation-range: entry 10% contain 20%;
        }
      }
    }

    & > div {
      & > ol {
        & > li {
          --start: 15%;
          --end: 7%;

          &:nth-of-type(1) {
            animation: to-whome-li 1ms linear both;
            animation-range: contain calc(var(--start)) contain
              calc(var(--start) + var(--end));
            animation-timeline: view();
          }

          &:nth-of-type(2) {
            --start-after: calc(var(--start) + 0.5lh);
            animation: to-whome-li 1ms linear both;
            animation-range: contain var(--start-after) contain
              calc(var(--start-after) + var(--end));
            animation-timeline: view();
          }

          &:nth-of-type(3) {
            --start-after: calc(var(--start) + 1lh);
            animation: to-whome-li 1ms linear both;
            animation-range: contain var(--start-after) contain
              calc(var(--start-after) + var(--end));
            animation-timeline: view();
          }
        }
      }
    }
  }

  @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: Keyframes
*/

@keyframes zero-to-pro-clapperboard {
  40%,
  60% {
    rotate: 0deg;
  }

  50% {
    rotate: 15deg;
  }
}

@keyframes zero-to-pro-clapperboard-play {
  0%,
  40% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

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

@keyframes shimmer {
  from {
    rotate: 360deg;
  }
}

@keyframes breathe {
  from,
  to {
    scale: 1;
  }

  50% {
    scale: 1.2;
  }
}

@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 story-bg {
  0% {
    filter: blur(0) saturate(1) brightness(1);
    width: 80%;
    border-radius: 5vmin;
  }

  30% {
    filter: blur(0) saturate(1) brightness(1);
    width: 100%;
    border-radius: 0vmin;
  }

  35% {
    filter: blur(0) saturate(1) brightness(1);
  }

  50% {
    filter: blur(20px) saturate(0.3) brightness(0.3);
  }

  80% {
    filter: blur(20px) saturate(0.3) brightness(0.3);
    width: 100%;
    border-radius: 0vmin;
  }

  90% {
    filter: blur(0) saturate(1) brightness(1);
  }

  100% {
    width: 100%;
    border-radius: 0vmin;
  }
}

@keyframes story-title {
  from {
    color: var(--global-palette7);
    text-shadow:
      0px 0px 0px var(--shadow-color),
      0px 0px 0px var(--shadow-color),
      0px 0px 0px var(--shadow-color),
      0px 0px 0px var(--shadow-color),
      0px 0px 0px var(--shadow-color),
      0px 0px 0px var(--shadow-color),
      0px 0px 0px var(--shadow-color),
      0px 0px 0px var(--shadow-color),
      0px 0px 0px var(--shadow-color),
      0px 0px 0px var(--shadow-color),
      0px 0px 0px var(--global-palette1),
      0px 0px 0px var(--global-palette1),
      0px 0px 0px var(--global-palette1),
      0px 0px 0px var(--global-palette1),
      0px 0px 0px var(--global-palette1),
      0px 0px 0px var(--global-palette1),
      0px 0px 0px var(--global-palette1),
      0px 0px 0px var(--global-palette1);
  }
}

@keyframes highlight-lines {
  from {
    stroke-dashoffset: var(--length);
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes to-whome-title-highlight {
  from {
    stroke-dashoffset: var(--length);
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes to-whome-li {
  from {
    filter: opacity(0.1) blur(20px);
    transform: translateY(0.5lh);
  }
}

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

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