/* =========================================================
   UNIVERSAL SECTION DECORATIONS
   The Nurtured Keiki
   Supports:
   - CSS blobs
   - CSS orbs
   - PNG / JPG / SVG images
   - WebP images
   - AVIF images
   - <picture> elements



<section class="section-decorated">

  <!-- ================================================
       SECTION CONTENT
       ================================================ -->

  <div class="section-content">

    <h2>Section Heading</h2>

    <p>
      Section content goes here.
    </p>

  </div>


  <!-- ================================================
       DECORATIONS
       ================================================ -->

  <div class="section-decor" aria-hidden="true">

    <img
      class="decor-image image-medium decor-top-left"
      src="images/IMAGE-1.png"
      alt=""
    >

    <img
      class="decor-image image-small decor-top-right"
      src="images/IMAGE-2.png"
      alt=""
    >

    <img
      class="decor-image image-large decor-bottom-left"
      src="images/IMAGE-3.png"
      alt=""
    >

  </div>

</section>




   ========================================================= */


/* =========================================================
   1. SECTION DECORATION CONTAINER
   ========================================================= */

.section-decorated {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}


/*
   Decoration layer fills ONLY its parent section.
*/

.section-decor {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;

  isolation: isolate;
}


/*
   Keep section content above decorations.
*/

.section-decorated > *:not(.section-decor) {
  position: relative;
  z-index: 2;
}


/* =========================================================
   2. DECORATION BASE
   ========================================================= */

.decor-blob,
.decor-orb,
.decor-image,
.decor-picture {
  position: absolute;

  display: block;

  pointer-events: none;
  user-select: none;

  flex-shrink: 0;

  will-change: transform, opacity;
}


/* =========================================================
   3. BLOBS
   ========================================================= */

.decor-blob {
  border-radius: 50%;

  opacity: 0.42;

  animation:
    decorBlobFloat 12s ease-in-out infinite,
    decorBlobFade 8s ease-in-out infinite;
}


/* ---------------------------------------------------------
   BLOB COLORS
   --------------------------------------------------------- */

.blob-sage {
  background: #b8c9ae;
}

.blob-sand {
  background: #e5cda5;
}

.blob-terracotta {
  background: #d9957b;
}

.blob-blue {
  background: #a9c9ce;
}

.blob-yellow {
  background: #ecd486;
}

.blob-pink {
  background: #dfb5b2;
}

.blob-lavender {
  background: #c4b9d4;
}


/* ---------------------------------------------------------
   BLOB SIZES
   --------------------------------------------------------- */

.blob-small {
  width: 55px;
  height: 55px;
}

.blob-medium {
  width: 100px;
  height: 100px;
}

.blob-large {
  width: 160px;
  height: 160px;
}

.blob-xl {
  width: 230px;
  height: 230px;
}


/* ---------------------------------------------------------
   BLOB OPACITY VARIATIONS
   --------------------------------------------------------- */

.blob-soft {
  opacity: 0.20;
}

.blob-subtle {
  opacity: 0.28;
}

.blob-bright {
  opacity: 0.58;
}


/* =========================================================
   4. ORBS
   ========================================================= */

.decor-orb {
  border-radius: 50%;

  opacity: 0.24;

  box-shadow:
    0 0 40px rgba(255, 255, 255, 0.05);

  animation:
    decorOrbFloat 15s ease-in-out infinite;
}


/* ---------------------------------------------------------
   ORB COLORS
   --------------------------------------------------------- */

.orb-sage {
  background: #a9b99f;
}

.orb-sand {
  background: #d9c29f;
}

.orb-terracotta {
  background: #c98267;
}

.orb-blue {
  background: #9dbbc1;
}

.orb-yellow {
  background: #e8c875;
}

.orb-pink {
  background: #d7a5a1;
}

.orb-lavender {
  background: #b9aecb;
}


/* ---------------------------------------------------------
   ORB SIZES
   --------------------------------------------------------- */

.orb-small {
  width: 80px;
  height: 80px;
}

.orb-medium {
  width: 140px;
  height: 140px;
}

.orb-large {
  width: 220px;
  height: 220px;
}

.orb-xl {
  width: 320px;
  height: 320px;
}


/* ---------------------------------------------------------
   ORB OPACITY VARIATIONS
   --------------------------------------------------------- */

.orb-soft {
  opacity: 0.12;
}

.orb-subtle {
  opacity: 0.20;
}

.orb-bright {
  opacity: 0.50;
}


/* =========================================================
   5. IMAGE DECORATIONS
   ========================================================= */

/*
   Use this for:
   
   <img class="decor-image image-medium" ...>
   
   Images do NOT need to be circular.
*/

.decor-image {
  object-fit: contain;

  object-position: center;

  width: auto;
  height: auto;

  max-width: none;

  animation:
    decorImageFloat 14s ease-in-out infinite;
}


/*
   <picture> wrapper.

   The actual image inside inherits the size.
*/

.decor-picture {
  display: block;

  width: auto;
  height: auto;

  animation:
    decorImageFloat 14s ease-in-out infinite;
}


/*
   Make images inside <picture> behave correctly.
*/

.decor-picture img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  object-position: center;
}


/* =========================================================
   6. IMAGE SIZES
   ========================================================= */

/*
   Small
*/

.image-xs {
  width: 50px;
  height: 50px;
}


/*
   Small
*/

.image-small {
  width: 90px;
  height: 90px;
}


/*
   Medium
*/

.image-medium {
  width: 140px;
  height: 140px;
}


/*
   Large
*/

.image-large {
  width: 200px;
  height: 200px;
}


/*
   Extra large
*/

.image-xl {
  width: 280px;
  height: 280px;
}


/*
   Huge decorative image
*/

.image-xxl {
  width: 400px;
  height: 400px;
}


/*
   Full-width decorative image.

   Useful for leaves, waves, clouds,
   botanical artwork, etc.
*/

.image-wide {
  width: 500px;
  height: auto;
}


/*
   Very large artwork.
*/

.image-hero {
  width: 650px;
  height: auto;
}


/* =========================================================
   7. IMAGE OPACITY
   ========================================================= */

.image-soft {
  opacity: 0.25;
}

.image-subtle {
  opacity: 0.45;
}

.image-medium-opacity {
  opacity: 0.65;
}

.image-bright {
  opacity: 0.85;
}

.image-solid {
  opacity: 1;
}


/* =========================================================
   8. IMAGE ROTATIONS
   ========================================================= */

.image-rotate-left {
  rotate: -8deg;
}

.image-rotate-right {
  rotate: 8deg;
}

.image-rotate-left-more {
  rotate: -15deg;
}

.image-rotate-right-more {
  rotate: 15deg;
}


/* =========================================================
   9. IMAGE FLIPS
   ========================================================= */

.image-flip-x {
  scale: -1 1;
}

.image-flip-y {
  scale: 1 -1;
}


/* =========================================================
   10. STANDARD POSITIONS
   ========================================================= */

.decor-top-left {
  top: 8%;
  left: 6%;
}

.decor-top-center {
  top: 5%;
  left: 50%;

  translate: -50% 0;
}

.decor-top-right {
  top: 5%;
  right: 6%;
}

.decor-middle-left {
  top: 50%;
  left: 5%;

  translate: 0 -50%;
}

.decor-middle-center {
  top: 50%;
  left: 50%;

  translate: -50% -50%;
}

.decor-middle-right {
  top: 45%;
  right: 5%;

  translate: 0 -50%;
}

.decor-bottom-left {
  bottom: 8%;
  left: 6%;
}

.decor-bottom-center {
  bottom: 5%;
  left: 50%;

  translate: -50% 0;
}

.decor-bottom-right {
  right: 6%;
  bottom: 8%;
}


/* =========================================================
   11. EDGE / CORNER POSITIONS
   ========================================================= */

.decor-edge-left {
  top: 30%;
  left: -35px;
}

.decor-edge-right {
  top: 55%;
  right: -35px;
}

.decor-corner-left {
  bottom: -45px;
  left: -45px;
}

.decor-corner-right {
  right: -45px;
  bottom: -45px;
}


/* =========================================================
   12. CUSTOM POSITION HELPERS
   ========================================================= */

.decor-offset-up {
  margin-top: -30px;
}

.decor-offset-down {
  margin-top: 30px;
}

.decor-offset-left {
  margin-left: -30px;
}

.decor-offset-right {
  margin-left: 30px;
}


/* =========================================================
   13. CUSTOM IMAGE OFFSETS
   ========================================================= */

.decor-image-up {
  margin-top: -50px;
}

.decor-image-down {
  margin-top: 50px;
}

.decor-image-left {
  margin-left: -50px;
}

.decor-image-right {
  margin-left: 50px;
}


/* =========================================================
   14. ANIMATION DELAYS
   ========================================================= */

.decor-delay-1 {
  animation-delay: -3s;
}

.decor-delay-2 {
  animation-delay: -6s;
}

.decor-delay-3 {
  animation-delay: -9s;
}

.decor-delay-4 {
  animation-delay: -12s;
}


/*
   For blobs, preserve their two animations.
*/

.decor-blob.decor-delay-1 {
  animation-delay: -3s, -1s;
}

.decor-blob.decor-delay-2 {
  animation-delay: -6s, -2s;
}

.decor-blob.decor-delay-3 {
  animation-delay: -9s, -3s;
}

.decor-blob.decor-delay-4 {
  animation-delay: -12s, -4s;
}


/* =========================================================
   15. BLOB ANIMATION
   ========================================================= */

@keyframes decorBlobFloat {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  25% {
    transform:
      translate3d(12px, -16px, 0)
      scale(1.025);
  }

  50% {
    transform:
      translate3d(-8px, -28px, 0)
      scale(0.98);
  }

  75% {
    transform:
      translate3d(-15px, -10px, 0)
      scale(1.015);
  }
}


/* ---------------------------------------------------------
   BLOB OPACITY ANIMATION
   --------------------------------------------------------- */

@keyframes decorBlobFade {

  0%,
  100% {
    opacity: 0.34;
  }

  50% {
    opacity: 0.48;
  }
}


/* =========================================================
   16. ORB ANIMATION
   ========================================================= */

@keyframes decorOrbFloat {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  33% {
    transform:
      translate3d(18px, -22px, 0)
      scale(1.035);
  }

  66% {
    transform:
      translate3d(-15px, 14px, 0)
      scale(0.97);
  }
}


/* =========================================================
   UNIVERSAL CUSTOM IMAGE DECORATION POSITIONS
   ========================================================= */

/*
   LEFT SIDE
   ---------------------------------------------------------
*/

.decor-left-2 {
  top: 24%;
  left: 18%;
}

.decor-left-3 {
  top: 43%;
  left: 4%;
}

.decor-left-4 {
  top: 64%;
  left: 17%;
}


/*
   RIGHT SIDE
   ---------------------------------------------------------
*/

.decor-right-2 {
  top: 35%;
  right: 18%;
}

.decor-right-3 {
  top: 42%;
  right: 4%;
}

.decor-right-4 {
  top: 63%;
  right: 17%;
}

.decor-right-5 {
  top: 75%;
  right: 5%;
}


/* =========================================================
   17. UNIVERSAL IMAGE ANIMATION
   ========================================================= */

/*
   Default animation
   ---------------------------------------------------------
   Used when no custom movement class is provided.
*/

.decor-picture {
  animation:
    decorImageFloat
    14s
    ease-in-out
    infinite;
}


@keyframes decorImageFloat {

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

  25% {
    transform:
      translate3d(8px, -12px, 0)
      rotate(1deg)
      scale(1.015);
  }

  50% {
    transform:
      translate3d(-6px, -20px, 0)
      rotate(-1deg)
      scale(0.985);
  }

  75% {
    transform:
      translate3d(-10px, -7px, 0)
      rotate(0.5deg)
      scale(1.01);
  }
}


/* =========================================================
   17A. UNIVERSAL FLOAT 1
   ========================================================= */

.decor-float-1 {
  animation:
    decorFloat1
    11s
    ease-in-out
    infinite
    -2s;
}


@keyframes decorFloat1 {

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

  50% {
    transform:
      translate3d(18px, -20px, 0)
      rotate(-3deg)
      scale(1.025);
  }
}


/* =========================================================
   17B. UNIVERSAL FLOAT 2
   ========================================================= */

.decor-float-2 {
  animation:
    decorFloat2
    14s
    ease-in-out
    infinite
    -7s;
}


@keyframes decorFloat2 {

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

  50% {
    transform:
      translate3d(-20px, 14px, 0)
      rotate(14deg)
      scale(0.98);
  }
}


/* =========================================================
   17C. UNIVERSAL FLOAT 3
   ========================================================= */

.decor-float-3 {
  animation:
    decorFloat3
    9s
    ease-in-out
    infinite
    -3s;
}


@keyframes decorFloat3 {

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

  50% {
    transform:
      translate3d(-14px, -25px, 0)
      rotate(-13deg)
      scale(1.035);
  }
}


/* =========================================================
   17D. UNIVERSAL FLOAT 4
   ========================================================= */

.decor-float-4 {
  animation:
    decorFloat4
    16s
    ease-in-out
    infinite
    -10s;
}


@keyframes decorFloat4 {

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

  50% {
    transform:
      translate3d(25px, 16px, 0)
      rotate(3deg)
      scale(0.975);
  }
}


/* =========================================================
   17E. UNIVERSAL FLOAT 5
   ========================================================= */

.decor-float-5 {
  animation:
    decorFloat5
    12s
    ease-in-out
    infinite
    -5s;
}


@keyframes decorFloat5 {

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

  50% {
    transform:
      translate3d(-16px, -28px, 0)
      rotate(-5deg)
      scale(1.03);
  }
}


/* =========================================================
   17F. UNIVERSAL FLOAT 6
   ---------------------------------------------------------
   Moves DOWN + LEFT
   ========================================================= */

.decor-float-6 {
  animation:
    decorFloat6
    15s
    ease-in-out
    infinite
    -9s;
}


@keyframes decorFloat6 {

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

  50% {
    transform:
      translate3d(-40px, 28px, 0)
      rotate(2deg)
      scale(0.97);
  }
}


/* =========================================================
   17G. UNIVERSAL FLOAT 7
   ---------------------------------------------------------
   Moves UP + RIGHT
   ========================================================= */

.decor-float-7 {
  animation:
    decorFloat7
    10s
    ease-in-out
    infinite
    -1s;
}


@keyframes decorFloat7 {

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

  50% {
    transform:
      translate3d(40px, -30px, 0)
      rotate(-2deg)
      scale(1.025);
  }
}



/* =========================================================
   17H. UNIVERSAL FLOAT 8
   ========================================================= */

.decor-float-8 {
  animation:
    decorFloat8
    13s
    ease-in-out
    infinite
    -8s;
}


@keyframes decorFloat8 {

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

  50% {
    transform:
      translate3d(23px, 13px, 0)
      rotate(13deg)
      scale(0.985);
  }
}


/* =========================================================
   17I. UNIVERSAL FLOAT 9
   ========================================================= */

.decor-float-9 {
  animation:
    decorFloat9
    8s
    ease-in-out
    infinite
    -4s;
}


@keyframes decorFloat9 {

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

  50% {
    transform:
      translate3d(-22px, -18px, 0)
      rotate(-14deg)
      scale(1.035);
  }
}


/* =========================================================
   17J. UNIVERSAL FLOAT 10
   ========================================================= */

.decor-float-10 {
  animation:
    decorFloat10
    17s
    ease-in-out
    infinite
    -12s;
}


@keyframes decorFloat10 {

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

  50% {
    transform:
      translate3d(20px, -25px, 0)
      rotate(5deg)
      scale(1.02);
  }
}


/* =========================================================
   17K. OPTIONAL FLOAT SPEED MODIFIERS
   ========================================================= */

/*
   These allow you to make any movement slower
   or faster without creating another animation.
*/

.decor-float-slow {
  animation-duration: 20s;
}

.decor-float-slower {
  animation-duration: 26s;
}

.decor-float-fast {
  animation-duration: 7s;
}

.decor-float-faster {
  animation-duration: 5s;
}


/* =========================================================
   17L. OPTIONAL FLOAT INTENSITY
   ========================================================= */

/*
   Use these when you want the movement to be
   more subtle or more noticeable.

   The default animations are intentionally gentle.
*/

.decor-float-subtle {
  animation-duration: 18s;
  opacity: 0.85;
}

.decor-float-gentle {
  animation-duration: 22s;
}

.decor-float-dynamic {
  animation-duration: 7s;
}


/* =========================================================
   17M. REDUCED MOTION
   ========================================================= */

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

  .decor-picture {
    animation: none !important;
  }

}


/* =========================================================
   18. DARK MODE
   ========================================================= */

body.dark-mode .blob-sage {
  background: #60705f;
}

body.dark-mode .blob-sand {
  background: #806e50;
}

body.dark-mode .blob-terracotta {
  background: #875243;
}

body.dark-mode .blob-blue {
  background: #566f75;
}

body.dark-mode .blob-yellow {
  background: #82703d;
}

body.dark-mode .blob-pink {
  background: #795957;
}

body.dark-mode .blob-lavender {
  background: #665d76;
}


/* ---------------------------------------------------------
   DARK MODE ORBS
   --------------------------------------------------------- */

body.dark-mode .orb-sage {
  background: #536151;
}

body.dark-mode .orb-sand {
  background: #665842;
}

body.dark-mode .orb-terracotta {
  background: #704538;
}

body.dark-mode .orb-blue {
  background: #497984;
}

body.dark-mode .orb-yellow {
  background: #706039;
}

body.dark-mode .orb-pink {
  background: #684c4b;
}

body.dark-mode .orb-lavender {
  background: #6b5791;
}


/* ---------------------------------------------------------
   DARK MODE OPACITY
   --------------------------------------------------------- */

body.dark-mode .decor-blob {
  opacity: 0.24;
}

body.dark-mode .decor-orb {
  opacity: 0.15;
}

body.dark-mode .blob-soft {
  opacity: 0.10;
}

body.dark-mode .blob-subtle {
  opacity: 0.16;
}

body.dark-mode .blob-bright {
  opacity: 0.36;
}

body.dark-mode .orb-soft {
  opacity: 0.07;
}

body.dark-mode .orb-subtle {
  opacity: 0.12;
}

body.dark-mode .orb-bright {
  opacity: 0.22;
}


/*
   Dark mode images.

   Images themselves are NOT automatically darkened.
   This prevents artwork from becoming muddy.

   Add .image-dark-mode-soft if desired.
*/

body.dark-mode .image-dark-mode-soft {
  opacity: 0.65;
}


/* =========================================================
   19. MOBILE
   ========================================================= */

@media (max-width: 640px) {

  /* -------------------------------------------------------
     BLOB SIZES
     ------------------------------------------------------- */

  .blob-small {
    width: 42px;
    height: 42px;
  }

  .blob-medium {
    width: 75px;
    height: 75px;
  }

  .blob-large {
    width: 120px;
    height: 120px;
  }

  .blob-xl {
    width: 170px;
    height: 170px;
  }


  /* -------------------------------------------------------
     ORB SIZES
     ------------------------------------------------------- */

  .orb-small {
    width: 60px;
    height: 60px;
  }

  .orb-medium {
    width: 100px;
    height: 100px;
  }

  .orb-large {
    width: 170px;
    height: 170px;
  }

  .orb-xl {
    width: 230px;
    height: 230px;
  }


  /* -------------------------------------------------------
     IMAGE SIZES
     ------------------------------------------------------- */

  .image-xs {
    width: 40px;
    height: 40px;
  }

  .image-small {
    width: 65px;
    height: 65px;
  }

  .image-medium {
    width: 100px;
    height: 100px;
  }

  .image-large {
    width: 145px;
    height: 145px;
  }

  .image-xl {
    width: 190px;
    height: 190px;
  }

  .image-xxl {
    width: 270px;
    height: 270px;
  }

  .image-wide {
    width: 330px;
  }

  .image-hero {
    width: 430px;
  }


  /* -------------------------------------------------------
     MOBILE POSITIONS
     ------------------------------------------------------- */

  .decor-top-left {
    top: 5%;
    left: -25px;
  }

  .decor-top-center {
    top: 4%;
    left: 50%;
  }

  .decor-top-right {
    top: 8%;
    right: -20px;
  }

  .decor-middle-left {
    left: -25px;
  }

  .decor-middle-center {
    left: 50%;
  }

  .decor-middle-right {
    right: -25px;
  }

  .decor-bottom-left {
    bottom: 5%;
    left: -25px;
  }

  .decor-bottom-center {
    bottom: 4%;
    left: 50%;
  }

  .decor-bottom-right {
    right: -25px;
    bottom: 5%;
  }


  /* -------------------------------------------------------
     MOBILE EDGE POSITIONS
     ------------------------------------------------------- */

  .decor-edge-left {
    left: -55px;
  }

  .decor-edge-right {
    right: -55px;
  }

  .decor-corner-left {
    bottom: -60px;
    left: -60px;
  }

  .decor-corner-right {
    right: -60px;
    bottom: -60px;
  }


  /* -------------------------------------------------------
     MOBILE CENTER POSITIONS
     ------------------------------------------------------- */

  .decor-center {
    top: 50%;
    left: 50%;

    translate: -50% -50%;
  }

  .decor-center-left {
    top: 50%;
    left: -30px;

    translate: 0 -50%;
  }

  .decor-center-right {
    top: 50%;
    right: -30px;

    translate: 0 -50%;
  }

  .decor-center-top {
    top: -30px;
    left: 50%;

    translate: -50% 0;
  }

  .decor-center-bottom {
    bottom: -30px;
    left: 50%;

    translate: -50% 0;
  }


  /* -------------------------------------------------------
     MOBILE IMAGE CONSTRAINTS
     ------------------------------------------------------- */

  .decor-image,
  .decor-picture {
    max-width: 100vw;
  }

  .decor-picture img {
    max-width: 100%;
  }


  /* -------------------------------------------------------
     MOBILE OVERFLOW PROTECTION
     ------------------------------------------------------- */

  .section-decorated {
    overflow: hidden;
  }

  .section-decor {
    overflow: hidden;
  }


  /* -------------------------------------------------------
     MOBILE ANIMATION
     ------------------------------------------------------- */

  @keyframes decorBlobFloat {

    0%,
    100% {
      transform:
        translate3d(0, 0, 0)
        scale(1);
    }

    25% {
      transform:
        translate3d(7px, -9px, 0)
        scale(1.02);
    }

    50% {
      transform:
        translate3d(-5px, -15px, 0)
        scale(0.985);
    }

    75% {
      transform:
        translate3d(-8px, -6px, 0)
        scale(1.01);
    }
  }


  @keyframes decorOrbFloat {

    0%,
    100% {
      transform:
        translate3d(0, 0, 0)
        scale(1);
    }

    33% {
      transform:
        translate3d(10px, -12px, 0)
        scale(1.025);
    }

    66% {
      transform:
        translate3d(-8px, 8px, 0)
        scale(0.98);
    }
  }


  @keyframes decorImageFloat {

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

    25% {
      transform:
        translate3d(5px, -7px, 0)
        rotate(0.7deg)
        scale(1.01);
    }

    50% {
      transform:
        translate3d(-4px, -12px, 0)
        rotate(-0.7deg)
        scale(0.99);
    }

    75% {
      transform:
        translate3d(-6px, -5px, 0)
        rotate(0.35deg)
        scale(1.005);
    }
  }


  /* -------------------------------------------------------
     MOBILE REDUCED MOTION
     ------------------------------------------------------- */

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

    .decor-blob,
    .decor-orb,
    .decor-image,
    .decor-picture {
      animation: none;
    }
  }

}