html {
  color: #e6eef7;
  font-size: 16px;
  line-height: 1.5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  display: flex;
  font-family: Georgia, serif;
  color: #e6eef7;
  background:
    linear-gradient(180deg, rgb(8 13 21 / 0.5), rgb(4 6 11 / 0.78)),
    url("../img/forest-spirit-bg.png") center / cover no-repeat fixed,
    linear-gradient(180deg, #1d2842 0%, #0d1528 40%, #05080f 100%);
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  pointer-events: none;
}

body::before {
  height: 100vh;
  background:
    linear-gradient(180deg, rgb(10 16 29 / 0.2), rgb(4 7 13 / 0.62)),
    radial-gradient(circle at 50% 18%, rgb(240 247 255 / 0.12), transparent 20%),
    radial-gradient(circle at 20% 35%, rgb(200 225 255 / 0.06), transparent 18%),
    radial-gradient(circle at 80% 34%, rgb(200 225 255 / 0.04), transparent 18%);
  opacity: 1;
}

body::after {
  inset: auto 0 0;
  height: 38vh;
  background:
    linear-gradient(180deg, transparent 0%, rgb(4 7 13 / 0.1) 30%, rgb(4 7 13 / 0.72) 100%);
}

.sky-glow,
.forest-motes,
.falling-leaves {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.sky-glow {
  background:
    radial-gradient(circle at 50% 14%, rgb(160 215 255 / 0.18), transparent 22%),
    radial-gradient(circle at 30% 20%, rgb(107 191 176 / 0.12), transparent 18%),
    radial-gradient(circle at 72% 18%, rgb(208 236 255 / 0.1), transparent 18%);
  filter: blur(12px);
  opacity: 0.95;
  animation: sky-breathe 14s ease-in-out infinite;
}

.forest-motes {
  z-index: 0;
}

.falling-leaves {
  z-index: 2;
  overflow: hidden;
}

.mote {
  position: absolute;
  width: 0.55rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgb(235 247 255 / 0.95) 0%, rgb(176 218 255 / 0.6) 42%, transparent 72%);
  box-shadow:
    0 0 0.8rem rgb(183 227 255 / 0.55),
    0 0 1.5rem rgb(104 173 210 / 0.28);
  opacity: 0;
}

.mote::after {
  content: "";
  position: absolute;
  inset: -0.35rem;
  border-radius: inherit;
  border: 1px solid rgb(215 239 255 / 0.18);
  opacity: 0.6;
}

.mote-1 {
  left: 12%;
  top: 72%;
  animation: mote-drift 11s linear infinite;
}

.mote-2 {
  left: 26%;
  top: 80%;
  animation: mote-drift 13s linear infinite 2s;
}

.mote-3 {
  left: 48%;
  top: 76%;
  animation: mote-drift 12s linear infinite 4s;
}

.mote-4 {
  left: 64%;
  top: 82%;
  animation: mote-drift 14s linear infinite 1.5s;
}

.mote-5 {
  left: 78%;
  top: 70%;
  animation: mote-drift 10s linear infinite 3.5s;
}

.mote-6 {
  left: 88%;
  top: 78%;
  animation: mote-drift 15s linear infinite 5s;
}

.leaf {
  position: absolute;
  top: -12%;
  width: 1rem;
  height: 1.45rem;
  opacity: 0;
  border-radius: 65% 35% 70% 30% / 40% 55% 45% 60%;
  background:
    radial-gradient(circle at 30% 28%, rgb(255 238 198 / 0.95), transparent 28%),
    linear-gradient(180deg, #8dc59f 0%, #6fa178 42%, #c08f4f 100%);
  box-shadow:
    inset 0 0 0.08rem rgb(255 248 226 / 0.5),
    0 0.4rem 1rem rgb(24 35 18 / 0.16);
  transform-origin: 50% 18%;
  filter: saturate(0.92);
}

.leaf::after {
  content: "";
  position: absolute;
  left: 48%;
  top: 12%;
  width: 1px;
  height: 72%;
  background: rgb(255 245 222 / 0.4);
  transform: rotate(8deg);
}

.leaf-1 {
  left: 8%;
  animation: leaf-fall-1 16s linear infinite;
}

.leaf-2 {
  left: 22%;
  width: 0.9rem;
  height: 1.25rem;
  animation: leaf-fall-2 18s linear infinite 3s;
}

.leaf-3 {
  left: 39%;
  width: 1.1rem;
  height: 1.55rem;
  animation: leaf-fall-3 15s linear infinite 6s;
}

.leaf-4 {
  left: 58%;
  animation: leaf-fall-4 17s linear infinite 1.5s;
}

.leaf-5 {
  left: 76%;
  width: 0.85rem;
  height: 1.2rem;
  animation: leaf-fall-5 19s linear infinite 4.5s;
}

.leaf-6 {
  left: 90%;
  width: 1.05rem;
  height: 1.4rem;
  animation: leaf-fall-6 14s linear infinite 8s;
}

button,
input,
textarea,
select {
  font: inherit;
}

.container {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, 68rem);
  margin: auto auto 0;
  padding: clamp(14rem, 34vh, 22rem) 0 3rem;
}

.hero {
  margin: 0 auto 2rem;
  max-width: 40rem;
  text-align: center;
  text-shadow:
    0 0 1.2rem rgb(160 216 255 / 0.14),
    0 0 2rem rgb(105 182 169 / 0.12);
}

.eyebrow {
  margin: 0 0 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b5c8e4;
  font-size: 0.8rem;
}

h1 {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 0.95;
}

.intro {
  margin: 1rem auto 0;
  max-width: 32rem;
  font-size: 1.05rem;
  color: #ced8ea;
}

.card-grid {
  display: grid;
  gap: 1rem;
}

.card {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  border: 1px solid rgb(181 205 237 / 0.18);
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgb(243 248 255 / 0.1), rgb(139 165 201 / 0.04)),
    rgb(255 255 255 / 0.04);
  box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 0.34);
  backdrop-filter: blur(10px);
  transition:
    transform 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgb(187 208 235 / 0.16), transparent 55%),
    radial-gradient(circle at top right, rgb(242 248 255 / 0.12), transparent 26%);
  pointer-events: none;
}

.card::after {
  content: "";
  position: absolute;
  inset: -35% auto auto -20%;
  width: 68%;
  height: 160%;
  background: linear-gradient(115deg, transparent 0%, rgb(219 238 255 / 0.18) 46%, transparent 72%);
  opacity: 0;
  transform: rotate(8deg) translateX(-115%);
  pointer-events: none;
}

.card > * {
  position: relative;
  z-index: 1;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: 1.3rem;
}

.card-copy {
  min-height: 3.5rem;
  margin: 0 0 1rem;
  font-size: 1rem;
  color: #edf4ff;
}

.card.is-active {
  animation: card-awaken 720ms ease;
}

.card.is-active::after {
  animation: sigil-sweep 900ms ease;
}

.card-copy.is-revealing {
  animation: text-reveal 460ms ease;
  text-shadow: 0 0 1rem rgb(206 231 255 / 0.24);
}

button {
  border: 0;
  border-radius: 999px;
  padding: 0.8rem 1.15rem;
  color: #f3f7ff;
  background: linear-gradient(180deg, #49648f 0%, #31496d 100%);
  cursor: pointer;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
  box-shadow: 0 0.75rem 1.5rem rgb(9 16 29 / 0.38);
}

button:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #5877a8 0%, #39537d 100%);
}

button:focus-visible {
  outline: 2px solid #d8e6ff;
  outline-offset: 3px;
}

@keyframes text-reveal {
  0% {
    opacity: 0;
    transform: translateY(0.5rem);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes sigil-sweep {
  0% {
    opacity: 0;
    transform: rotate(8deg) translateX(-115%);
  }

  30% {
    opacity: 0.85;
  }

  100% {
    opacity: 0;
    transform: rotate(8deg) translateX(220%);
  }
}

@keyframes card-awaken {
  0% {
    transform: translateY(0);
    border-color: rgb(181 205 237 / 0.18);
    box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 0.34);
  }

  35% {
    transform: translateY(-0.35rem);
    border-color: rgb(219 235 255 / 0.45);
    box-shadow: 0 1.5rem 3rem rgb(70 105 155 / 0.28);
  }

  100% {
    transform: translateY(0);
    border-color: rgb(181 205 237 / 0.18);
    box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 0.34);
  }
}

@keyframes mote-drift {
  0% {
    opacity: 0;
    transform: translate3d(0, 1rem, 0) scale(0.85);
  }

  12% {
    opacity: 0.95;
  }

  78% {
    opacity: 0.55;
  }

  100% {
    opacity: 0;
    transform: translate3d(1.8rem, -18rem, 0) scale(1.15);
  }
}

@keyframes sky-breathe {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes leaf-fall-1 {
  0% {
    opacity: 0;
    transform: translate3d(0, -8vh, 0) rotate(0deg);
  }

  10% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translate3d(8vw, 110vh, 0) rotate(540deg);
  }
}

@keyframes leaf-fall-2 {
  0% {
    opacity: 0;
    transform: translate3d(0, -12vh, 0) rotate(40deg);
  }

  12% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translate3d(-10vw, 112vh, 0) rotate(-420deg);
  }
}

@keyframes leaf-fall-3 {
  0% {
    opacity: 0;
    transform: translate3d(0, -10vh, 0) rotate(-30deg);
  }

  15% {
    opacity: 0.84;
  }

  100% {
    opacity: 0;
    transform: translate3d(12vw, 108vh, 0) rotate(600deg);
  }
}

@keyframes leaf-fall-4 {
  0% {
    opacity: 0;
    transform: translate3d(0, -14vh, 0) rotate(25deg);
  }

  10% {
    opacity: 0.76;
  }

  100% {
    opacity: 0;
    transform: translate3d(-8vw, 111vh, 0) rotate(-520deg);
  }
}

@keyframes leaf-fall-5 {
  0% {
    opacity: 0;
    transform: translate3d(0, -9vh, 0) rotate(-20deg);
  }

  14% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
    transform: translate3d(6vw, 109vh, 0) rotate(450deg);
  }
}

@keyframes leaf-fall-6 {
  0% {
    opacity: 0;
    transform: translate3d(0, -11vh, 0) rotate(15deg);
  }

  10% {
    opacity: 0.82;
  }

  100% {
    opacity: 0;
    transform: translate3d(-12vw, 114vh, 0) rotate(-610deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sky-glow,
  .mote,
  .leaf,
  .card,
  .card-copy,
  button {
    animation: none !important;
    transition: none;
  }
}

@media (min-width: 48rem) {
  .container {
    padding-top: clamp(18rem, 42vh, 28rem);
  }

  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card {
    min-height: 15rem;
  }
}