/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow to standard
 * cascading order, meaning styles declared later in document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Custom font families */
.font-sans {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Landing page polish */
.landing-page {
  position: relative;
  isolation: isolate;
}

.landing-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 10%, rgb(251 207 232 / 0.25), transparent 32%),
    radial-gradient(circle at 85% 35%, rgb(216 180 254 / 0.18), transparent 36%);
  pointer-events: none;
  z-index: -1;
}

.landing-mono {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

.landing-gradient-text {
  background: linear-gradient(105deg, #f43f5e 5%, #fb7185 45%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.landing-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(30px);
  opacity: 0.55;
}

.landing-orb-primary {
  width: 19rem;
  height: 19rem;
  top: -6rem;
  right: -3rem;
  background: linear-gradient(135deg, #fb7185, #f59e0b);
}

.landing-orb-secondary {
  width: 15rem;
  height: 15rem;
  bottom: -5rem;
  left: -3rem;
  background: linear-gradient(135deg, #818cf8, #e879f9);
}

.landing-reveal {
  opacity: 0;
  transform: translateY(24px);
  animation: landing-reveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.landing-delay-1 {
  animation-delay: 0.08s;
}

.landing-delay-2 {
  animation-delay: 0.16s;
}

.landing-delay-3 {
  animation-delay: 0.24s;
}

.landing-delay-4 {
  animation-delay: 0.32s;
}

.landing-float {
  animation: landing-float 7s ease-in-out 1.2s infinite;
}

@keyframes landing-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes landing-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-reveal,
  .landing-float {
    animation: none;
    opacity: 1;
    transform: none;
  }
}