/* A Ditha: the supplied atmosphere sits behind the original brand symbol. */
.page-hero.brand-hero {
  isolation: isolate;
}

.page-hero.brand-hero::before {
  content: "";
  position: absolute;
  inset: 0 -5% 0 46%;
  z-index: -2;
  pointer-events: none;
  background: url("assets/brand-fundo.webp") 75% 52% / 122% auto no-repeat;
  opacity: .44;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
  mask-image: linear-gradient(90deg, transparent, #000 38%);
}

.page-hero.brand-hero .symbol-small {
  top: 70px;
  right: -24px;
  width: clamp(360px, 36vw, 510px);
  height: auto;
  z-index: -1;
  opacity: .17;
  transform-origin: 50% 50%;
  transform: rotate(-15deg);
  animation: ditha-symbol-flow 12s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}

/* A gentle deformation of the real SVG preserves its outline and inner opening. */
@keyframes ditha-symbol-flow {
  0%, 100% {
    transform: rotate(-15deg) scale(1, 1) skew(0deg, 0deg);
  }
  34% {
    transform: rotate(-9deg) scale(1.045, .965) skew(-1.2deg, .6deg);
  }
  67% {
    transform: rotate(-19deg) scale(.975, 1.035) skew(1deg, -.5deg);
  }
}

/* The blue home scene uses the same original symbol and movement as A Ditha. */
.hero-water-symbol {
  position: absolute;
  right: 0;
  top: 28%;
  width: clamp(460px, 48vw, 930px);
  max-width: none;
  height: auto;
  z-index: 1;
  opacity: .2;
  filter: brightness(0) invert(1);
  transform-origin: 50% 50%;
  transform: rotate(-15deg);
  animation: ditha-symbol-flow 12s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}

@media (max-width: 760px) {
  .hero-water-symbol {
    width: 600px;
    right: -285px;
    top: 17%;
    opacity: .16;
  }
}

@media (max-width: 1100px) {
  .page-hero.brand-hero::before {
    inset: 0 -10% 0 43%;
    background-size: 138% auto;
    opacity: .38;
  }

  .page-hero.brand-hero .symbol-small {
    top: 75px;
    right: -52px;
    width: 380px;
    opacity: .14;
  }
}

@media (max-width: 760px) {
  .page-hero.brand-hero::before {
    inset: 100px -35% 0 18%;
    background-position: 85% 70%;
    background-size: 125% auto;
    opacity: .28;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%);
    mask-image: linear-gradient(180deg, transparent, #000 55%);
  }

  .page-hero.brand-hero .symbol-small {
    top: 140px;
    right: -140px;
    width: 350px;
    opacity: .1;
  }
}

.reduce-motion .page-hero.brand-hero .symbol-small,
.reduce-motion .hero-water-symbol {
  animation: none;
  transform: rotate(-15deg);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-enabled) .page-hero.brand-hero .symbol-small,
  html:not(.motion-enabled) .hero-water-symbol {
    animation: none;
    transform: rotate(-15deg);
    will-change: auto;
  }
}