:root {
  --pink: #ff76ab;
  --pink-deep: #f05595;
  --pink-soft: #ffe3ef;
  --blue: #48c9ff;
  --blue-deep: #1eb8f5;
  --blue-soft: #e5f7ff;
  --yellow: #ffd900;
  --yellow-soft: #fff7b8;
  --white: #ffffff;
  --snow: #f6f7fa;
  --mist: #e6ebf1;
  --grey: #6a7380;
  --ink: #12151c;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--snow);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

::selection {
  background: color-mix(in srgb, var(--pink) 40%, white);
  color: var(--ink);
}

.honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rise {
  animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rise-1 {
  animation-delay: 0.1s;
}
.rise-2 {
  animation-delay: 0.2s;
}
.rise-3 {
  animation-delay: 0.32s;
}
.rise-4 {
  animation-delay: 0.44s;
}

@keyframes float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-8px);
  }
}

.float {
  animation: float 4s ease-in-out infinite alternate;
}

.float-delay {
  animation: float 4.8s ease-in-out 0.6s infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .rise,
  .rise-1,
  .rise-2,
  .rise-3,
  .rise-4,
  .float,
  .float-delay {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}