:root {
  --gold-flow-image: url("/assets/himealoha/20260801_gold-powder-flow.png");
}

html,
body {
  overflow-x: clip;
}

.hero,
.intro,
#about-himealoha,
#aloha-history,
.collection-carousel,
.process,
.order,
.contact {
  isolation: isolate;
  position: relative;
}

.hero,
.process {
  overflow: hidden;
}

.collection-carousel,
.contact {
  overflow: visible;
}

.hero-copy,
.hero-image,
.intro > *,
#about-himealoha > *,
#aloha-history > *,
.collection-heading,
.collection-viewport,
.process > *,
.order > *,
.contact > * {
  position: relative;
  z-index: 1;
}

.hero::after,
.intro::before,
#about-himealoha::after,
#aloha-history::after,
.process::after,
.order::after,
.contact::before {
  content: "";
  position: absolute;
  z-index: 0;
  display: block;
  aspect-ratio: 2 / 1;
  background: var(--gold-flow-image) center / contain no-repeat;
  filter: saturate(1.1) contrast(1.06);
  pointer-events: none;
  user-select: none;
}

.hero::after {
  top: 10%;
  left: -12vw;
  width: min(77vw, 1120px);
  opacity: 0.58;
  transform: rotate(4deg) scaleY(0.62);
  transform-origin: 38% 50%;
  animation: gold-flow-breathe 16s ease-in-out infinite alternate;
}

.intro::before {
  top: 21%;
  right: -31vw;
  width: min(72vw, 980px);
  opacity: 0.34;
  transform: rotate(-7deg) scaleY(0.64);
}

#about-himealoha::after {
  bottom: -15%;
  left: -27vw;
  width: min(63vw, 850px);
  opacity: 0.23;
  transform: rotate(8deg) scaleY(0.64);
}

#aloha-history::after {
  right: -24vw;
  bottom: -11%;
  width: min(59vw, 820px);
  opacity: 0.25;
  transform: rotate(-8deg) scaleX(-1) scaleY(0.64);
}

.process::after {
  top: -15%;
  right: -22vw;
  width: min(59vw, 820px);
  opacity: 0.16;
  transform: rotate(-8deg) scaleY(0.64);
  mix-blend-mode: screen;
}

.order::after {
  right: -27vw;
  bottom: -18%;
  width: min(61vw, 850px);
  opacity: 0.16;
  transform: rotate(8deg) scaleX(-1) scaleY(0.64);
}

.contact::before {
  top: -19%;
  left: clamp(0px, 2.5vw, 36px);
  width: min(62vw, 850px);
  opacity: 0.17;
  transform: rotate(-5deg) scaleY(0.64);
}

@keyframes gold-flow-breathe {
  from {
    transform: rotate(4deg) scaleY(0.62) translate3d(-0.6%, 0, 0);
  }
  to {
    transform: rotate(4deg) scaleY(0.62) translate3d(1.4%, 1.3%, 0);
  }
}

@media (max-width: 900px) {
  .hero::after {
    top: 47%;
    left: -25vw;
    width: 112vw;
    opacity: 0.31;
    transform: rotate(-6deg) scaleY(0.62);
    animation: none;
  }

  .intro::before {
    top: 9%;
    right: -51vw;
    width: 115vw;
    opacity: 0.17;
  }

  #about-himealoha::after,
  #aloha-history::after {
    width: 103vw;
    opacity: 0.14;
  }

  #about-himealoha::after {
    bottom: -6%;
    left: -58vw;
  }

  #aloha-history::after {
    right: -57vw;
    bottom: -4%;
  }

  .process::after {
    top: -6%;
    right: -57vw;
    width: 108vw;
    opacity: 0.12;
  }

  .order::after,
  .contact::before {
    width: 105vw;
    opacity: 0.12;
  }

  .contact::before {
    left: -8vw;
  }
}

@media (max-width: 480px) {
  .hero::after {
    top: 49%;
    left: -34vw;
    width: 132vw;
    opacity: 0.25;
  }

  .intro::before,
  #about-himealoha::after,
  #aloha-history::after,
  .process::after,
  .order::after,
  .contact::before {
    opacity: 0.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after {
    animation: none;
  }
}