:root {
  --green: #538b0f;
  --green-light: #6fae24;
  --dark: #071000;
  --dark-2: #0d1905;
  --white: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.62);
  --border: rgba(83, 139, 15, 0.25);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  font-family: "Jost", sans-serif;
  color: var(--white);
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(83, 139, 15, 0.14),
      transparent 35%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(83, 139, 15, 0.1),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      var(--dark),
      var(--dark-2),
      #081200
    );

  overflow-x: hidden;
}


/* =========================
   BACKGROUND
========================= */

.background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.shape {
  position: absolute;
  border: 1px solid rgba(83, 139, 15, 0.15);
  opacity: 0.7;
}

.shape-1 {
  width: 500px;
  height: 500px;
  right: -200px;
  top: -180px;
  transform: rotate(45deg);
  animation: floatShape 12s ease-in-out infinite;
}

.shape-2 {
  width: 300px;
  height: 300px;
  left: -120px;
  bottom: -100px;
  transform: rotate(30deg);
  animation: floatShape 15s ease-in-out infinite reverse;
}

.shape-3 {
  width: 180px;
  height: 180px;
  right: 15%;
  bottom: 15%;
  transform: rotate(45deg);
  border-color: rgba(83, 139, 15, 0.1);
  animation: rotateShape 20s linear infinite;
}

@keyframes floatShape {

  0%,
  100% {
    transform: translateY(0) rotate(45deg);
  }

  50% {
    transform: translateY(-25px) rotate(48deg);
  }
}

@keyframes rotateShape {
  from {
    transform: rotate(45deg);
  }

  to {
    transform: rotate(405deg);
  }
}


/* =========================
   MAIN
========================= */

.thank-you {
  position: relative;
  z-index: 2;

  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 40px 20px;
}


/* =========================
   CARD
========================= */

.thank-you-card {

  width: min(650px, 100%);

  padding: 60px 55px;

  text-align: center;

  background: rgba(255, 255, 255, 0.025);

  border: 1px solid var(--border);

  backdrop-filter: blur(18px);

  position: relative;

  animation: cardAppear 0.8s ease forwards;
}

@keyframes cardAppear {

  from {
    opacity: 0;
    transform: translateY(35px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* =========================
   CHECK ICON
========================= */

.icon {

  width: 75px;
  height: 75px;

  margin: 0 auto 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border: 1px solid rgba(83, 139, 15, 0.6);

  color: var(--green-light);

  font-size: 2rem;

  animation: checkAppear 0.8s 0.3s ease both;
}

@keyframes checkAppear {

  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* =========================
   LABEL
========================= */

.label {

  display: block;

  font-size: 0.7rem;

  letter-spacing: 0.35em;

  color: var(--green-light);

  margin-bottom: 20px;
}


/* =========================
   TITLE
========================= */

h1 {

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(3rem, 7vw, 5rem);

  font-weight: 300;

  line-height: 0.95;

  margin-bottom: 30px;
}

h1 span {
  color: var(--green-light);
}


/* =========================
   SEPARATOR
========================= */

.separator {

  width: 60px;
  height: 1px;

  background: var(--green);

  margin: 0 auto 30px;
}


/* =========================
   TEXT
========================= */

.intro {

  max-width: 520px;

  margin: 0 auto 20px;

  font-size: 1.1rem;

  line-height: 1.7;

  color: rgba(255, 255, 255, 0.9);
}

.intro strong {
  color: var(--green-light);
  font-weight: 500;
}

.description {

  max-width: 500px;

  margin: 0 auto 40px;

  font-size: 0.9rem;

  line-height: 1.9;

  color: var(--text-soft);

  font-weight: 300;
}


/* =========================
   BUTTON
========================= */

.btn {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 15px 30px;

  color: white;

  text-decoration: none;

  border: 1px solid rgba(83, 139, 15, 0.5);

  background: rgba(83, 139, 15, 0.08);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.btn span {
  transition: transform 0.3s ease;
}

.btn:hover {

  transform: translateY(-4px);

  background: rgba(83, 139, 15, 0.18);

  border-color: var(--green);
}

.btn:hover span {
  transform: translateX(-5px);
}


/* =========================
   BOTTOM
========================= */

.bottom-info {

  margin-top: 35px;

  font-size: 0.7rem;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.35);

  text-align: center;
}

.bottom-info span {
  color: var(--green);
  margin: 0 8px;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

  .thank-you {
    padding: 25px 15px;
  }

  .thank-you-card {
    padding: 45px 25px;
  }

  .icon {
    width: 65px;
    height: 65px;
  }

  h1 {
    font-size: 3.2rem;
  }

  .intro {
    font-size: 1rem;
  }

  .description {
    font-size: 0.85rem;
  }

  .bottom-info {
    line-height: 1.8;
  }

  .shape-1 {
    width: 300px;
    height: 300px;
  }

  .shape-2 {
    width: 220px;
    height: 220px;
  }
}


/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}