/* HERO GRADIENT
-------------------------------------------------- */

    /* ==================================================
       HERO
    ================================================== */


    .hero {
      position: relative;

      /*min-height: 100svh;*/

      overflow: hidden;
      isolation: isolate;

      display: grid;
      place-items: center;

      background: #263643;
    }



    /* ==================================================
       MESH
    ================================================== */

    .mesh {
      position: absolute;

      inset: -25%;

      z-index: -2;

      overflow: hidden;

      transform: translateZ(0);
    }


    /* ==================================================
       BLOBS
    ================================================== */

    .mesh-blob {
      position: absolute;

      width: 55vw;
      height: 55vw;

      min-width: 500px;
      min-height: 500px;

      border-radius: 50%;

      filter: blur(95px);

      will-change: transform;

      pointer-events: none;

      /*
        This creates the beautiful overlapping
        colour interaction.
      */
      mix-blend-mode: screen;
    }


    /* ==================================================
       CYAN
    ================================================== */

    .blob-cyan {
      top: -15%;
      left: -10%;

      width: 100vw;

      background: #52c5d4;

      opacity: 0.78;

      animation:
        cyanMove
        21s
        ease-in-out
        infinite
        alternate;
    }


    /* ==================================================
       ORANGE
    ================================================== */

    .blob-orange {
      top: -15%;
      right: -15%;

      background: #fb4f14;

      opacity: 1;

      animation:
        orangeMove
        24s
        ease-in-out
        infinite
        alternate;
    }


    /* ==================================================
       CREAM
    ================================================== */

    .blob-cream {
      right: -15%;
      bottom: -20%;

      background: #e9d6bd;

      opacity: 0.58;

      animation:
        creamMove
        23s
        ease-in-out
        infinite
        alternate;
    }


    /* ==================================================
       SECOND CYAN
    ================================================== */

    .blob-cyan-two {
      bottom: -20%;
      left: -20%;

      background: #52c5d4;

      opacity: 0.55;

      animation:
        cyanTwoMove
        28s
        ease-in-out
        infinite
        alternate;
    }


    /* ==================================================
       SECOND ORANGE
    ================================================== */

    .blob-orange-two {
      top: 30%;
      left: 40%;

      width: 42vw;
      height: 42vw;

      background: #fb4f14;

      opacity: 0.35;

      animation:
        orangeTwoMove
        18s
        ease-in-out
        infinite
        alternate;
    }


    /* ==================================================
       CYAN ANIMATION
    ================================================== */

    @keyframes cyanMove {

      0% {
        transform:
          translate3d(-5%, -5%, 0)
          scale(0.9)
          rotate(0deg);
      }

      25% {
        transform:
          translate3d(18%, 12%, 0)
          scale(1.12)
          rotate(20deg);
      }

      55% {
        transform:
          translate3d(5%, 30%, 0)
          scale(1)
          rotate(45deg);
      }

      100% {
        transform:
          translate3d(35%, 15%, 0)
          scale(1.2)
          rotate(70deg);
      }
    }


    /* ==================================================
       ORANGE ANIMATION
    ================================================== */

    @keyframes orangeMove {

      0% {
        transform:
          translate3d(5%, -5%, 0)
          scale(1)
          rotate(0deg);
      }

      30% {
        transform:
          translate3d(-25%, 15%, 0)
          scale(1.2)
          rotate(-25deg);
      }

      65% {
        transform:
          translate3d(-5%, 40%, 0)
          scale(0.95)
          rotate(-50deg);
      }

      100% {
        transform:
          translate3d(-30%, 10%, 0)
          scale(1.15)
          rotate(-80deg);
      }
    }


    /* ==================================================
       CREAM ANIMATION
    ================================================== */

    @keyframes creamMove {

      0% {
        transform:
          translate3d(5%, 5%, 0)
          scale(1)
          rotate(0deg);
      }

      30% {
        transform:
          translate3d(-20%, -15%, 0)
          scale(1.2)
          rotate(25deg);
      }

      65% {
        transform:
          translate3d(-5%, -35%, 0)
          scale(0.9)
          rotate(55deg);
      }

      100% {
        transform:
          translate3d(-30%, -10%, 0)
          scale(1.25)
          rotate(80deg);
      }
    }


    /* ==================================================
       SECOND CYAN ANIMATION
    ================================================== */

    @keyframes cyanTwoMove {

      0% {
        transform:
          translate3d(-5%, 5%, 0)
          scale(1)
          rotate(0deg);
      }

      30% {
        transform:
          translate3d(25%, -10%, 0)
          scale(1.15)
          rotate(-20deg);
      }

      65% {
        transform:
          translate3d(10%, -30%, 0)
          scale(0.95)
          rotate(-45deg);
      }

      100% {
        transform:
          translate3d(40%, -15%, 0)
          scale(1.2)
          rotate(-70deg);
      }
    }


    /* ==================================================
       SECOND ORANGE ANIMATION
    ================================================== */

    @keyframes orangeTwoMove {

      0% {
        transform:
          translate3d(-10%, -10%, 0)
          scale(0.8)
          rotate(0deg);
      }

      50% {
        transform:
          translate3d(20%, 15%, 0)
          scale(1.2)
          rotate(90deg);
      }

      100% {
        transform:
          translate3d(-15%, 25%, 0)
          scale(0.9)
          rotate(180deg);
      }
    }


    /* ==================================================
       ATMOSPHERIC OVERLAY
    ================================================== */

    .mesh-overlay {
      position: absolute;

      inset: 0;

      z-index: -1;

      pointer-events: none;

      background:
        radial-gradient(
          ellipse at center,
          transparent 10%,
          rgba(38, 54, 67, 0.12) 45%,
          rgba(38, 54, 67, 0.72) 100%
        );
    }


    /* ==================================================
       SUBTLE GRAIN
    ================================================== */

    .grain {
      position: absolute;

      inset: 0;

      z-index: 1;

      pointer-events: none;

      opacity: 0.035;

      /*
        The noise is intentionally created with
        CSS rather than an external image.
      */
      background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

      mix-blend-mode: overlay;
    }

    /* ==================================================
       MOBILE
    ================================================== */

    @media (max-width: 768px) {


      .mesh {
        inset: -45%;
        top: 0px;
      }


      .mesh-blob {
        width: 100vw;
        height: 100vw;

        min-width: 350px;
        min-height: 350px;

        filter: blur(75px);
      }


      .blob-orange-two {
        width: 70vw;
        height: 70vw;
      }


      .hero-content {
        padding:
          120px
          20px
          70px;
      }


      .hero h1 {
        font-size:
          clamp(3.4rem, 16vw, 5rem);
      }


      .hero-description {
        margin-top: 28px;
      }


      .hero-actions {
        flex-direction: column;
      }


      .hero-button,
      .hero-button-secondary {
        width:
          min(280px, 100%);
      }

      .mesh-blob {
        width: 140vw;
        height: 140vw;
      }

      .blob-cyan {
        top: 0%;
        left: -1%;
      }

      .blob-orange {
        top: 60%;
        right: 0%;
      }

      .blob-cream {
        right: -35%;
        bottom: 0%;
      }

        .blob-cyan-two {
          bottom: 22%;
          left: 17%;
        }

    }


    /* ==================================================
       REDUCED MOTION
    ================================================== */

    @media (prefers-reduced-motion: reduce) {

      html {
        scroll-behavior: auto;
      }

      .mesh-blob {
        animation: none !important;
      }

    }