/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./source/05-block-patterns/homepage-hero.scss ***!
  \************************************************************************************************************************************************************************************************************/
/**
 * Breakpoints & Media Queries
 */
/**
*  Converts a hex value into the rgb equivalent.
*
* @param {string} hex - the hexadecimal value to convert
* @return {string} comma separated rgb values
*/
/**
 * Long content fade mixin
 *
 * Creates a fading overlay to signify that the content is longer
 * than the space allows.
 */
/**
 * Breakpoint mixins
 */
/**
 * Focus styles.
 */
/**
 * Applies editor left position to the selector passed as argument
 */
/**
 * Styles that are reused verbatim in a few places
 */
/**
 * Allows users to opt-out of animations via OS-level preferences.
 */
/**
 * Reset default styles for JavaScript UI based pages.
 * This is a WP-admin agnostic reset
 */
/**
 * Reset the WP Admin page styles for Gutenberg-like pages.
 */
.homepage-hero {
  --entrance-top-global-delay: calc(var(--entrance-left-global-delay) + var(--entrance-left-duration) + var(--entrance-left-stagger-delay));
  --grow-global-delay: var(--entrance-top-global-delay);
  --color-stop: 33%;
  background: linear-gradient(to bottom, var(--wp--preset--color--grayscale-white) 0%, var(--wp--preset--color--grayscale-white) var(--color-stop), var(--wp--preset--color--brand-orange-1-base) var(--color-stop), var(--wp--preset--color--brand-orange-1-base) 100%);
  contain: content;
  padding-block: 2.6666666667rem 3.5555555556rem;
  position: relative;
}
@media (min-width: 782px) {
  .homepage-hero {
    --color-stop: 40%;
  }
}
@media (min-width: 1000px) {
  .homepage-hero {
    --entrance-top-global-delay: calc(var(--entrance-left-global-delay) + var(--entrance-left-duration) + (6 * var(--entrance-left-stagger-delay)));
    --grow-global-delay: var(--entrance-top-global-delay);
  }
}
@media (min-width: 960px) {
  .homepage-hero {
    --color-stop: 50%;
  }
}
.is-low-bandwidth .homepage-hero {
  animation: none;
}

.homepage-hero__title {
  color: #293745;
  font-family: "Noto Sans", sans-serif;
  font-weight: 900;
  line-height: 1.1;
  font-size: clamp(2.6666666667rem, 2.2795698925rem + 1.935483871vw, 4rem);
  -webkit-marquee-increment: 0vw;
  animation: entrance-top var(--entrance-top-duration) var(--entrance-top-easing) var(--entrance-top-global-delay) backwards;
}
@media (min-width: 1080px) {
  .homepage-hero__title {
    max-width: 20ch;
  }
}
.is-low-bandwidth .homepage-hero__title {
  animation: none;
}

.homepage-hero__intro {
  animation: entrance-top var(--entrance-top-duration) var(--entrance-top-easing) calc(var(--entrance-top-global-delay) + var(--entrance-top-stagger-delay)) backwards;
  margin-block-end: 2.2222222222rem;
}
@media (min-width: 1080px) {
  .homepage-hero__intro {
    max-width: 65ch;
  }
}
.is-low-bandwidth .homepage-hero__intro {
  animation: none;
}

.homepage-hero__buttons {
  margin-block-end: 4.4444444444rem;
}
.homepage-hero__buttons .wp-block-button__link {
  animation: entrance-top var(--entrance-top-duration) var(--entrance-top-easing) calc(var(--entrance-top-global-delay) + 3 * var(--entrance-top-stagger-delay)) backwards;
  margin-block-end: 0;
}
.is-low-bandwidth .homepage-hero__buttons .wp-block-button__link {
  animation: none;
}

.homepage-hero__image {
  --entrance-top-offset: -150px;
  --image-reveal-global-delay: calc(var(--entrance-top-global-delay) + (4 * var(--entrance-top-stagger-delay)) + var(--entrance-top-duration) + 32ms);
  animation: entrance-top var(--entrance-top-duration) var(--entrance-top-easing) calc(var(--entrance-top-global-delay) + 4 * var(--entrance-top-stagger-delay)) both;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}
.homepage-hero__image img {
  position: relative;
}
.homepage-hero__image::after {
  animation: image-reveal var(--image-reveal-duration) var(--image-reveal-easing) var(--image-reveal-global-delay) both;
  border-radius: 15px;
  content: "";
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .homepage-hero__image {
    --image-reveal-global-delay: 200ms;
  }
  .homepage-hero__image::after {
    animation-name: fade-out;
    background-color: var(--wp--preset--color--brand-orange-1-base);
  }
}
.homepage-hero__image.u-animate-paused {
  opacity: 1;
}
.homepage-hero__image.u-animate-paused::after {
  animation-play-state: paused;
}
.homepage-hero__image.u-animate-no-delay::after {
  animation-delay: var(--image-reveal-duration);
}
.is-low-bandwidth .homepage-hero__image {
  display: none;
}

.homepage-hero__circles {
  animation: grow var(--grow-duration) var(--grow-easing) var(--grow-global-delay) both;
  aspect-ratio: 1/1;
  block-size: var(--color-stop);
  color: var(--wp--preset--color--brand-orange-2-base);
  inline-size: auto;
  inset-block-start: -132px;
  inset-inline-start: 0;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  position: absolute;
  transform-origin: 0 0;
  z-index: -1;
}
[class*=wp-container-] > .homepage-hero__circles {
  margin-inline: 0;
  max-width: none;
  padding-inline: 0;
}
@media (prefers-reduced-motion: reduce) {
  .homepage-hero__circles {
    --grow-global-delay: 0ms;
    animation-name: fade-in;
  }
}
.is-low-bandwidth .homepage-hero__circles {
  display: none;
}

/*# sourceMappingURL=homepage-hero.css.map*/