:root {
  color-scheme: dark;
}

body {
  background: #fff;
}

.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  opacity: 0.2;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-main-plane,
  .hero-blur-plane {
    transition-duration: 1ms !important;
  }

  .hero-noice::before {
    animation: none;
  }

  .noice-effect::before {
    animation: none;
  }

  .hero-radial-bg,
  .menu-gradient-bg {
    animation: none !important;
    background-size: 100% 100% !important;
    background-position: 50% 100% !important;
  }
}

@keyframes radial-gradient-pulse {

  0%,
  100% {
    background-size: 100% 100%;
  }

  50% {
    background-size: 140% 140%;
  }
}

.hero-radial-bg {
  background-image: radial-gradient(circle at center,
      rgba(243, 112, 99, 1) 0%,
      rgba(243, 112, 99, 1) 43%,
      rgba(76, 45, 131, 1) 99%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: radial-gradient-pulse 12s ease-in-out infinite;
}

.gradient-bg {
  background-color: #4c2d83;
  background-image: radial-gradient(ellipse at 50% 100%,
      rgb(40 188 180) 0%,
      rgb(40 188 180 / 69%) 14%,
      rgb(40 188 180 / 30%) 34%,
      rgb(122 46 255 / 33%) 50%,
      rgb(167 64 174 / 38%) 65%,
      rgba(243, 112, 99, 0.78) 100%);
}

@media (min-width: 1024px) {
  .gradient-bg {
    background-image: radial-gradient(ellipse at 50% 100%,
        rgb(40 188 180 / 68%) 0%,
        rgb(40 188 180 / 90%) 14%,
        rgb(40 188 180 / 40%) 34%,
        rgb(122 46 255 / 33%) 50%,
        rgb(167 64 174 / 31%) 65%,
        rgba(243, 112, 99, 0.78) 100%);
  }
}

.menu-gradient-bg {
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#mobile-menu:not(.invisible) .menu-gradient-bg {
  animation: menu-gradient-motion 10s ease-in-out infinite;
}

@keyframes menu-gradient-motion {

  0%,
  100% {
    background-size: 100% 100%;
    background-position: 50% 100%;
  }

  33% {
    background-size: 118% 128%;
    background-position: 46% 94%;
  }

  66% {
    background-size: 128% 112%;
    background-position: 54% 100%;
  }
}

.feira-hero-photo-wrap {
  isolation: isolate;
}

@media (max-width: 639px) {
  .feira-hero-photo-wrap {
    aspect-ratio: 5 / 4;
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 45%,
        rgba(0, 0, 0, 0.9) 62%,
        rgba(0, 0, 0, 0.5) 78%,
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 45%,
        rgba(0, 0, 0, 0.9) 62%,
        rgba(0, 0, 0, 0.5) 78%,
        transparent 100%);
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .feira-hero-photo-wrap {
    aspect-ratio: 4 / 3;
    max-height: 44vh;
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 50%,
        rgba(0, 0, 0, 0.9) 65%,
        rgba(0, 0, 0, 0.5) 80%,
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 50%,
        rgba(0, 0, 0, 0.9) 65%,
        rgba(0, 0, 0, 0.5) 80%,
        transparent 100%);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .feira-hero-photo-wrap {
    aspect-ratio: 16 / 9;
    max-height: none;
    max-width: none;
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 55%,
        rgba(0, 0, 0, 0.85) 72%,
        rgba(0, 0, 0, 0.4) 88%,
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 55%,
        rgba(0, 0, 0, 0.85) 72%,
        rgba(0, 0, 0, 0.4) 88%,
        transparent 100%);
  }
}

@media (min-width: 1280px) {
  .feira-hero-photo-wrap {
    aspect-ratio: 16 / 9;
    max-height: none;
    max-width: 120rem;
    -webkit-mask-image: radial-gradient(ellipse 52% 48% at 50% 50%,
        #000 38%,
        rgba(0, 0, 0, 0.75) 52%,
        rgba(0, 0, 0, 0.35) 62%,
        transparent 74%);
    mask-image: radial-gradient(ellipse 52% 48% at 50% 50%,
        #000 38%,
        rgba(0, 0, 0, 0.75) 52%,
        rgba(0, 0, 0, 0.35) 62%,
        transparent 74%);
  }
}

.feira-hero-photo-wrap img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.feira-hero-photo-wrap::after {
  content: none;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .feira-hero-photo-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(82, 41, 137, 0.1) 0%,
        rgba(82, 41, 137, 0.25) 50%,
        rgba(155, 66, 120, 0.45) 100%);
    mix-blend-mode: soft-light;
    pointer-events: none;
  }
}

@media (min-width: 1280px) {
  .feira-hero-photo-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 52% 48% at 50% 50%,
        rgba(82, 41, 137, 0.15) 0%,
        rgba(82, 41, 137, 0.45) 55%,
        rgba(155, 66, 120, 0.55) 100%);
    mix-blend-mode: soft-light;
    pointer-events: none;
  }
}

@keyframes noiceAnim {

  0%,
  to {
    transform: translate(0);
  }

  10% {
    transform: translate(-5%, -10%);
  }

  20% {
    transform: translate(-15%, 5%);
  }

  30% {
    transform: translate(7%, -25%);
  }

  40% {
    transform: translate(-5%, 25%);
  }

  50% {
    transform: translate(-15%, 10%);
  }

  60% {
    transform: translate(15%);
  }

  70% {
    transform: translateY(15%);
  }

  80% {
    transform: translate(3%, 35%);
  }

  90% {
    transform: translate(-10%, 10%);
  }
}

.recinto-panels {
  display: grid;
}

.recinto-panels [role="tabpanel"] {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
}

.wrapper {
  position: relative;
  float: none;
  width: 100%;
  margin: 0 auto;
  box-shadow: none;
  overflow: hidden;
}

.noice-effect::before,
.hero-noice::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  opacity: 0.4;
  pointer-events: none;
  background-image: url("../images/noise-paatern.png");
  background-repeat: repeat;
  background-size: auto;
  animation: noiceAnim 8s steps(10) infinite;
}

.hero-noice::before {
  z-index: 3;
}

.fsm-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(67, 41, 114, 0.3);
  border-radius: 0.3rem;
  background-color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  vertical-align: middle;
}

.fsm-checkbox:hover {
  border-color: rgba(67, 41, 114, 0.6);
}

.fsm-checkbox:checked {
  background-color: #432972;
  border-color: #432972;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.704 5.296a1 1 0 0 1 0 1.408l-7.5 7.5a1 1 0 0 1-1.408 0l-3.5-3.5a1 1 0 0 1 1.408-1.408L8.5 12.092l6.796-6.796a1 1 0 0 1 1.408 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 0.9rem;
  background-position: center;
  background-repeat: no-repeat;
}

.fsm-checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(67, 41, 114, 0.25);
}