/* Landing mask showcase override */
.landing-mask-section .landing-mask-grid {
  position: relative !important;
  display: block !important;
  min-height: clamp(420px, 58vw, 760px);
  aspect-ratio: 16 / 9;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(47, 191, 134, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(23, 52, 44, 0.20), rgba(101, 87, 232, 0.18)),
    #17342c url("/landing-mask-showcase.svg") center / cover no-repeat;
  box-shadow: 0 28px 70px rgba(9, 20, 17, 0.24);
  color: #edf8f2;
}

.landing-mask-section .landing-mask-card {
  display: none !important;
}

.landing-mask-section .landing-mask-grid::before {
  content: "";
  position: absolute;
  inset: 7% 8%;
  z-index: 1;
  background: url("/landing-mask-showcase.svg") center / 500% 500% no-repeat;
  border: 3px solid #f7b24d;
  box-shadow:
    0 0 0 999px rgba(23, 52, 44, 0.34),
    0 20px 45px rgba(8, 22, 17, 0.36);
  animation: landing-mask-shape 12s ease-in-out infinite;
  transform-origin: 50% 50%;
}

.landing-mask-section .landing-mask-grid::after {
  content: "Circular  ->  Quadrada  ->  Região\a Zoom central 500% com via arterial, vegetação e usos do solo";
  position: absolute;
  right: clamp(16px, 2.6vw, 34px);
  bottom: clamp(16px, 2.6vw, 34px);
  z-index: 2;
  max-width: min(420px, calc(100% - 32px));
  padding: 16px 18px;
  border: 1px solid rgba(247, 178, 77, 0.62);
  border-radius: 8px;
  background: rgba(23, 52, 44, 0.86);
  box-shadow: 0 16px 36px rgba(8, 22, 17, 0.28);
  color: #f4f7f2;
  font-size: clamp(0.82rem, 1.1vw, 0.96rem);
  font-weight: 700;
  line-height: 1.55;
  white-space: pre-line;
}

@keyframes landing-mask-shape {
  0%,
  27% {
    border-color: #2fbf86;
    border-radius: 50%;
    clip-path: ellipse(34% 39% at 50% 50%);
  }

  33%,
  60% {
    border-color: #6557e8;
    border-radius: 8px;
    clip-path: inset(13% 17% 13% 17% round 8px);
  }

  66%,
  94% {
    border-color: #f7b24d;
    border-radius: 0;
    clip-path: polygon(10% 34%, 26% 15%, 49% 22%, 62% 36%, 77% 30%, 91% 48%, 82% 72%, 61% 84%, 43% 79%, 27% 86%, 13% 72%, 5% 52%);
  }

  100% {
    border-color: #2fbf86;
    border-radius: 50%;
    clip-path: ellipse(34% 39% at 50% 50%);
  }
}

@media (max-width: 760px) {
  .landing-mask-section .landing-mask-grid {
    min-height: 520px;
    aspect-ratio: 4 / 5;
    background-size: auto 100%;
  }

  .landing-mask-section .landing-mask-grid::before {
    inset: 10% 7% 20%;
  }

  .landing-mask-section .landing-mask-grid::after {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-mask-section .landing-mask-grid::before {
    animation: none;
    border-color: #2fbf86;
    border-radius: 50%;
    clip-path: ellipse(34% 39% at 50% 50%);
  }
}