@layer utilities {
  /* Text Rotation Hover Effect */
  /* Usage:
       .u-text-rotator (Container/Trigger)
         .u-text-rotator__frame (Mask)
           .u-text-rotator__content (Text) [data-text="Content"]
    */

  .u-visually-hidden {
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }

  .u-inline-block {
    display: inline-block;
  }

  .u-color-primary {
    color: var(--primary);
  }

  @media (hover: hover) {
    .u-text-rotator .u-text-rotator__frame {
      position: relative;
      overflow: hidden;
      display: block;
      line-height: inherit;
      /* Ensure line-height matches parent */
    }

    .u-text-rotator .u-text-rotator__content {
      display: block;
      /* No transition by default for instant reset */
      transform: translateY(0);
      /* Ensure initial transform state */
      will-change: transform;
    }

    .u-text-rotator .u-text-rotator__content::after {
      content: attr(data-text) / '';
      display: block;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      line-height: inherit;
      /* Ensure consistency with parent */
    }

    .u-text-rotator.is-animating .u-text-rotator__content {
      transform: translateY(-100%);
      transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  }

  .u-font-caveat {
    font-family: 'Caveat', cursive;
    font-weight: 600;
  }

  /* Icon Slide Hover Effect (Left to Right) */
  /* Usage:
       .u-icon-rotator (Container/Trigger)
         .u-icon-rotator__frame (Mask)
           .u-icon-rotator__content (Wrapper)
             .u-icon-rotator__arrow (The Icon - usually 2 copies, one relative one absolute)
    */

  .u-icon-rotator .u-icon-rotator__frame {
    position: relative;
    overflow: hidden;
    display: inline-block;
    /* Or block depending on layout */
    vertical-align: middle;
  }

  .u-icon-rotator .u-icon-rotator__content {
    display: block;
    position: relative;
    height: 100%;
    transform: translateX(0);
    will-change: transform;
    /* ensure the content wrapper allows the absolute child to position relative to it */
  }

  /* The visible icon */
  .u-icon-rotator .u-icon-rotator__arrow {
    display: grid;
    place-items: center;
    height: 100%;
  }

  /* The incoming icon (starts off-screen left) */
  .u-icon-rotator .u-icon-rotator__arrow--incoming {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    width: 100%;
    height: 100%;
  }

  @media (hover: hover) {
    /* Trigger animation via class (JS) or hover */
    .u-icon-rotator.is-animating .u-icon-rotator__content,
    .u-icon-rotator:hover .u-icon-rotator__content {
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  }

  .u-icon-rotator-wheel {

    &.is-animating svg {
      transform: rotate(180deg);
      transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  }
}