:where(.material-paper, .material-paint, .material-ink, .material-wash) {
  isolation: isolate;
}

:where(.material-paper, .material-paint, .material-ink, .material-wash):not(.absolute):not(.fixed) {
  position: relative;
}

.material-paper::before,
.material-paint::before,
.material-ink::before,
.material-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--material-texture, url("/vi/services/website-development/styles/item/agricultural-technology-agri-protocol/preview/assets/paper-grain.webp"));
  background-size: var(--material-size, 256px);
  background-position: var(--material-position, 0 0);
  opacity: var(--material-opacity, .07);
  mix-blend-mode: var(--material-blend, multiply);
}

.material-paper::before {
  --material-texture: url("/vi/services/website-development/styles/item/agricultural-technology-agri-protocol/preview/assets/paper-grain.webp");
  --material-size: 256px;
  --material-opacity: .022;
  --material-blend: multiply;
}

.material-paint::before {
  --material-texture: url("/vi/services/website-development/styles/item/agricultural-technology-agri-protocol/preview/assets/paint-dropout.webp");
  --material-size: 192px;
  --material-opacity: .16;
  --material-blend: screen;
}

.material-ink::before {
  --material-texture: url("/vi/services/website-development/styles/item/agricultural-technology-agri-protocol/preview/assets/paint-dropout.webp");
  --material-size: 128px;
  --material-opacity: .07;
  --material-blend: screen;
}

.material-wash::before {
  --material-texture: url("/vi/services/website-development/styles/item/agricultural-technology-agri-protocol/preview/assets/paper-grain.webp");
  --material-size: 300px;
  --material-position: 37px 19px;
  --material-opacity: .12;
  --material-blend: soft-light;
}

.photo-treatment {
  isolation: isolate;
  overflow: hidden;
}

.photo-treatment:not(.absolute):not(.fixed) { position: relative; }

.photo-treatment::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(241, 244, 242, .08), transparent 42%),
    rgba(16, 43, 28, .14);
  mix-blend-mode: color;
}

.cut-corner {
  clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal .7s cubic-bezier(.2, .72, .2, 1) both; }
  .reveal-late { animation-delay: .12s; }
  @keyframes reveal { from { opacity: 0; transform: translateY(10px); } }
}