:root {
  --gtx-black: #342e37;
  --gtx-blue: #3c91e6;
  --gtx-white: #fafffd;
  --landing-bg: #fafffd;
  --landing-text: #342e37;
  --landing-tagline: rgba(52, 46, 55, 0.72);
  --landing-hero-shadow: rgba(60, 145, 230, 0.25);
  --landing-rain-static-opacity: 0.05;
  --landing-rain-start-delay: 0.2s;
  --landing-font-default: "Asap Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --landing-bg: #1e1e1e;
    --landing-text: #fafffd;
    --landing-tagline: rgba(250, 255, 253, 0.72);
    --landing-hero-shadow: rgba(60, 145, 230, 0.35);
    --landing-rain-static-opacity: 0.06;
    color-scheme: dark;
  }
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body.landing {
  min-height: 100dvh;
  overflow: hidden;
  background-color: var(--landing-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--landing-text);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.landing-rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  animation: landing-rain-appear 0.01s linear forwards;
  animation-delay: var(--landing-rain-start-delay);
}

@keyframes landing-rain-appear {
  to {
    opacity: 1;
  }
}

.landing-rain__icon {
  position: absolute;
  top: -20vh;
  left: var(--rain-left, 50%);
  opacity: var(--rain-opacity, 0.15);
  filter: blur(var(--rain-blur, 2px));
  animation: landing-fall var(--rain-duration, 16s) linear infinite;
  animation-delay: calc(var(--landing-rain-start-delay) + var(--rain-stagger, 0s));
  animation-fill-mode: backwards;
  will-change: transform;
  font-size: var(--rain-size, 36px);
  color: var(--gtx-blue);
  line-height: 1;
  user-select: none;
}

@keyframes landing-fall {
  from {
    transform: translateY(-20vh) rotate(var(--rain-rotate, 0deg));
  }
  to {
    transform: translateY(140vh) rotate(var(--rain-rotate, 0deg));
  }
}

/* Per-particle variation */
.landing-rain > :nth-child(1) {
  --rain-left: 14%;
  --rain-size: 44px;
  --rain-opacity: 0.18;
  --rain-blur: 1px;
  --rain-duration: 14s;
  --rain-stagger: 0.5s;
}
.landing-rain > :nth-child(2) {
  --rain-left: 30%;
  --rain-size: 40px;
  --rain-opacity: 0.2;
  --rain-blur: 2px;
  --rain-duration: 15s;
  --rain-stagger: 1.5s;
}
.landing-rain > :nth-child(3) {
  --rain-left: 46%;
  --rain-size: 48px;
  --rain-opacity: 0.16;
  --rain-blur: 1px;
  --rain-duration: 13s;
  --rain-stagger: 2.5s;
}
.landing-rain > :nth-child(4) {
  --rain-left: 62%;
  --rain-size: 38px;
  --rain-opacity: 0.22;
  --rain-blur: 2px;
  --rain-duration: 16s;
  --rain-stagger: 3.5s;
}
.landing-rain > :nth-child(5) {
  --rain-left: 78%;
  --rain-size: 50px;
  --rain-opacity: 0.19;
  --rain-blur: 1px;
  --rain-duration: 14s;
  --rain-stagger: 4.5s;
}
.landing-rain > :nth-child(6) {
  --rain-left: 94%;
  --rain-size: 42px;
  --rain-opacity: 0.17;
  --rain-blur: 2px;
  --rain-duration: 15s;
  --rain-stagger: 5.5s;
}
.landing-rain > :nth-child(7) {
  --rain-left: 18%;
  --rain-size: 34px;
  --rain-opacity: 0.21;
  --rain-blur: 1px;
  --rain-duration: 12s;
  --rain-stagger: 6.5s;
}
.landing-rain > :nth-child(8) {
  --rain-left: 34%;
  --rain-size: 46px;
  --rain-opacity: 0.18;
  --rain-blur: 2px;
  --rain-duration: 16s;
  --rain-stagger: 7.5s;
}
.landing-rain > :nth-child(9) {
  --rain-left: 50%;
  --rain-size: 52px;
  --rain-opacity: 0.16;
  --rain-blur: 1px;
  --rain-duration: 13s;
  --rain-stagger: 8.5s;
}
.landing-rain > :nth-child(10) {
  --rain-left: 66%;
  --rain-size: 44px;
  --rain-opacity: 0.2;
  --rain-blur: 2px;
  --rain-duration: 15s;
  --rain-stagger: 9.5s;
}
.landing-rain > :nth-child(11) {
  --rain-left: 82%;
  --rain-size: 40px;
  --rain-opacity: 0.17;
  --rain-blur: 2px;
  --rain-duration: 14s;
  --rain-stagger: 10.5s;
}
.landing-rain > :nth-child(12) {
  --rain-left: 98%;
  --rain-size: 32px;
  --rain-opacity: 0.19;
  --rain-blur: 1px;
  --rain-duration: 16s;
  --rain-stagger: 11.5s;
}
.landing-rain > :nth-child(13) {
  --rain-left: 6%;
  --rain-size: 36px;
  --rain-opacity: 0.12;
  --rain-blur: 3px;
  --rain-duration: 18s;
  --rain-stagger: 12s;
  --rain-rotate: -8deg;
}
.landing-rain > :nth-child(14) {
  --rain-left: 22%;
  --rain-size: 52px;
  --rain-opacity: 0.1;
  --rain-blur: 4px;
  --rain-duration: 20s;
  --rain-stagger: 12.5s;
  --rain-rotate: 6deg;
}
.landing-rain > :nth-child(15) {
  --rain-left: 38%;
  --rain-size: 32px;
  --rain-opacity: 0.14;
  --rain-blur: 3px;
  --rain-duration: 17s;
  --rain-stagger: 13s;
  --rain-rotate: -4deg;
}
.landing-rain > :nth-child(16) {
  --rain-left: 54%;
  --rain-size: 56px;
  --rain-opacity: 0.11;
  --rain-blur: 5px;
  --rain-duration: 22s;
  --rain-stagger: 13.5s;
  --rain-rotate: 10deg;
}
.landing-rain > :nth-child(17) {
  --rain-left: 70%;
  --rain-size: 28px;
  --rain-opacity: 0.09;
  --rain-blur: 4px;
  --rain-duration: 21s;
  --rain-stagger: 14s;
  --rain-rotate: 5deg;
}
.landing-rain > :nth-child(18) {
  --rain-left: 86%;
  --rain-size: 48px;
  --rain-opacity: 0.13;
  --rain-blur: 3px;
  --rain-duration: 19s;
  --rain-stagger: 14.5s;
  --rain-rotate: -6deg;
}

.landing-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 2rem 1.5rem;
  text-align: center;
}

.landing-hero__logo {
  width: min(40vw, 280px);
  height: auto;
  filter: drop-shadow(0 0 32px var(--landing-hero-shadow));
}

.landing-hero__tagline {
  margin: 1.75rem 0 0;
  font-family: var(--landing-font-default);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--landing-tagline);
  opacity: 0;
  filter: blur(10px);
  animation: landing-tagline-reveal 1.1s ease-out 0.45s forwards;
  transition: color 0.25s ease;
}

@keyframes landing-tagline-reveal {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@media (max-width: 480px) {
  .landing-hero__logo {
    width: min(55vw, 220px);
  }

  .landing-hero__tagline {
    font-size: 1.05rem;
    letter-spacing: 0.03em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-rain {
    animation: none;
    opacity: 1;
  }

  .landing-rain__icon {
    animation: none;
    top: 50%;
    transform: translateY(-50%);
    opacity: var(--landing-rain-static-opacity);
  }

  .landing-hero__tagline {
    animation: none;
    opacity: 1;
    filter: none;
  }
}