/* CSS for Thank you page banner */
.acf-layout-thank-you {
  --color-lite: #fbfaf2;
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  overflow: hidden;
  z-index: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Background & Grid Lines */
.acf-layout-thank-you .grid-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Noise Overlay - Placed on the very top of everything */
.acf-layout-thank-you .noise-overlay {
  position: absolute;
  inset: 0;
  z-index: 100; /* Above text and cursor */
  pointer-events: none;
  background-image: var(--noise-banner-url);
  background-repeat: repeat;
  opacity: 0.8;
}

/* Cursor Layer */
.acf-layout-thank-you .cursor-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Moving Grid Cell */
.acf-layout-thank-you .grid-cursor {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
  background: var(--color-lite);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Trail Grid Cell */
.acf-layout-thank-you .grid-trail {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
  background: var(--color-lite);
  animation: thankYouFadeOut 0.4s ease-out forwards;
}

@keyframes thankYouFadeOut {
  0% {
    background-color: var(--color-lite);
    opacity: 0.75;
  }
  50% {
    background-color: #71717a;
    opacity: 0.4;
  }
  100% {
    background-color: #27272a;
    opacity: 0;
  }
}

/* Content styling */
.acf-layout-thank-you .acf-layout-container {
  position: relative;
  z-index: 10; /* Below noise overlay but above cursor */
  color: #ffffff;
  text-align: center;
  pointer-events: none;
  user-select: none;
  width: 100%;
  max-width: 75%;
}

.acf-layout-thank-you .banner-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Typography styles */
.acf-layout-thank-you .thank-you-heading {
  font-family: var(--font-secondary), sans-serif;
  line-height: 120%;
  color: #ffffff;
  margin: 0;
  text-align: center;
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
  font-size: clamp(1.5rem, 1.2955rem + 0.9091vw, 2rem);
}

.acf-layout-thank-you .thank-you-description {
  font-family: var(--font-primary), sans-serif;
  font-size: clamp(0.875rem, 0.7727rem + 0.4545vw, 1.125rem);
  font-weight: 400;
  font-size: 18px;
  line-height: 120%;
  letter-spacing: 0%;
  text-align: center;
}

/* Link / Button Styling */
.acf-layout-thank-you .thank-you-link-wrapper {
  position: relative;
  z-index: 110; /* Sits above noise-overlay (z-index 100) */
  pointer-events: auto; /* Restores click and hover interactions */
  margin-top: 24px;
}

.acf-layout-thank-you .thank-you-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-primary), sans-serif;
  font-weight: 400;
  font-size: clamp(0.875rem, 0.7727rem + 0.4545vw, 1.125rem);
  line-height: 120%;
  letter-spacing: 0%;
  text-align: center;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  text-decoration: underline !important;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  color: var(--color-2) !important;
}

.acf-layout-thank-you .thank-you-link:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* Floating Pixel Decorations */
.acf-layout-thank-you .banner-pixel-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.acf-layout-thank-you .banner-corner-pixels {
  position: absolute;
  width: 32px;
  height: 32px;
}

.acf-layout-thank-you .banner-corner-pixels::before,
.acf-layout-thank-you .banner-corner-pixels::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
}

/* Diagonal Type A (TL): Bottom-left and Top-right squares */
.acf-layout-thank-you .pixel-tl::before {
  left: 0;
  bottom: 0;
}
.acf-layout-thank-you .pixel-tl::after {
  right: 0;
  top: 0;
}

/* Diagonal Type B (TR): Top-left and Bottom-right squares */
.acf-layout-thank-you .pixel-tr::before {
  left: 0;
  top: 0;
}
.acf-layout-thank-you .pixel-tr::after {
  right: 0;
  bottom: 0;
}

/* Positions */
.acf-layout-thank-you .pixel-tl {
  top: 180px;
  left: 3%;
}
.acf-layout-thank-you .pixel-tr {
  top: 100px;
  right: 5%;
}

/* Bottom gradient fade into black */
.acf-layout-thank-you::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 35%,
    rgba(0, 0, 0, 0.65) 70%,
    #000000 100%
  );
  pointer-events: none;
  z-index: 3;
}

/* Responsive Scaling */
@media (max-width: 768px) {
  .acf-layout-thank-you {
    min-height: 400px;
  }
  .acf-layout-thank-you .acf-layout-container {
    max-width: 100%;
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media (max-width: 991px) {
  .acf-layout-thank-you .banner-corner-pixels {
    width: 20px;
    height: 20px;
  }

  .acf-layout-thank-you .banner-corner-pixels::before,
  .acf-layout-thank-you .banner-corner-pixels::after {
    width: 10px;
    height: 10px;
  }

  /* Shape adjustments for mobile */
  /* TL is diagonal pair */
  .acf-layout-thank-you .pixel-tl::before {
    left: 0;
    bottom: 0;
  }
  .acf-layout-thank-you .pixel-tl::after {
    display: block;
    right: 0;
    top: 0;
  }

  /* TR is single square */
  .acf-layout-thank-you .pixel-tr::before {
    left: auto;
    right: 0;
    top: 0;
  }
  .acf-layout-thank-you .pixel-tr::after {
    display: none;
  }

  /* Positions on mobile screen */
  .acf-layout-thank-you .pixel-tl {
    top: 175px;
    left: 6%;
  }
  .acf-layout-thank-you .pixel-tr {
    top: 75px;
    right: 8%;
  }
  .acf-layout-thank-you .pixel-tl{
      top: 20%;
  }
}