/* The supplied pastel paintings become a living material, never a page background. */
:root {
  --liquid-texture-image: url("assets/textures/liquid-01.webp");
  --liquid-texture-shade: rgba(27, 32, 31, .13);
}

.liquid-texture {
  --liquid-texture-image: url("assets/textures/liquid-01.webp");
  color: transparent !important;
  background-color: transparent;
  background-image: linear-gradient(var(--liquid-texture-shade), var(--liquid-texture-shade)), var(--liquid-texture-image);
  background-position: center, 50% 50%;
  background-repeat: no-repeat;
  /* A 10% overscan keeps the moving paint inside every glyph edge. */
  background-size: 100% 100%, 110% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: liquid-texture-drift var(--liquid-duration, 8.5s) cubic-bezier(.42, .02, .35, 1) infinite alternate;
  will-change: background-position;
}

/* Keep the original compact logo viewport, but swap the white/black artwork for the texture. */
.brand-mark.liquid-texture span::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background-color: transparent;
  background-image: linear-gradient(var(--liquid-texture-shade), var(--liquid-texture-shade)), var(--liquid-texture-image);
  background-position: center, 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%, 110% auto;
  -webkit-mask-image: url("assets/brand/anam-logo.png");
  mask-image: url("assets/brand/anam-logo.png");
  -webkit-mask-position: -.288rem -1.404rem;
  mask-position: -.288rem -1.404rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 8.208rem auto;
  mask-size: 8.208rem auto;
  animation: liquid-texture-drift var(--liquid-duration, 8.5s) cubic-bezier(.42, .02, .35, 1) infinite alternate;
  will-change: background-position;
}

.brand-mark.liquid-texture img { z-index: 0; opacity: 0; }
.brand-mark.liquid-texture:hover { opacity: 1; }

@media (max-width: 700px) {
  .brand-mark.liquid-texture span::before {
    -webkit-mask-position: -.216rem -1.056rem;
    mask-position: -.216rem -1.056rem;
    -webkit-mask-size: 6.17rem auto;
    mask-size: 6.17rem auto;
  }
}

/* Hover feedback uses the same material rather than an unrelated solid state. */
.liquid-hover:not(.copy-contact):hover,
.liquid-hover:not(.copy-contact):focus-visible,
.copy-contact:hover b,
.copy-contact:focus-visible b,
.main-nav a.liquid-hover:hover:not(.active),
.main-nav a.liquid-hover:focus-visible:not(.active) {
  color: #17211d !important;
  border-color: rgba(23, 33, 29, .5) !important;
  background-color: transparent !important;
  background-image: linear-gradient(var(--liquid-texture-shade), var(--liquid-texture-shade)), var(--liquid-texture-image) !important;
  background-position: center, 50% 50% !important;
  background-repeat: no-repeat !important;
  background-size: 110% 110%, 116% 116% !important;
  animation: liquid-texture-drift var(--liquid-duration, 5s) cubic-bezier(.42, .02, .35, 1) infinite alternate;
}

.copy-contact:hover b,
.copy-contact:focus-visible b { color: #17211d !important; }

.liquid-hover:hover .ambient-control__icon,
.liquid-hover:focus-visible .ambient-control__icon { color: #17211d; }

/* Navigation stays deliberately quieter than the larger button interactions. */
.main-nav a.liquid-hover:hover:not(.active),
.main-nav a.liquid-hover:focus-visible:not(.active) {
  color: #f4f3ee !important;
  background-image: linear-gradient(rgba(22, 25, 24, .5), rgba(22, 25, 24, .5)), var(--liquid-texture-image) !important;
}

@keyframes liquid-texture-drift {
  0% { background-position: center, 42% 46%; }
  48% { background-position: center, 61% 39%; }
  100% { background-position: center, 48% 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-texture,
  .brand-mark.liquid-texture span,
  .liquid-hover:hover,
  .liquid-hover:focus-visible,
  .copy-contact:hover b,
  .copy-contact:focus-visible b { animation: none; }
}