/*
 * 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 the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --ink: #0b1220;
  --sea: #0f3d3e;
  --reef: #0f766e;
  --sun: #f6c453;
  --sand: #f6f4ef;
  --mist: #e7f0ea;
  --font-body: "DM Sans", "Work Sans", sans-serif;
  --font-display: "Space Grotesk", "DM Sans", sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
}

.font-body {
  font-family: var(--font-body);
}

.font-display {
  font-family: var(--font-display);
}

.site-bg {
  background-color: var(--sand);
  background-image:
    radial-gradient(circle at top left, rgba(15, 118, 110, 0.14), transparent 45%),
    radial-gradient(circle at bottom right, rgba(246, 196, 83, 0.2), transparent 50%);
}

.hero-surface {
  background:
    radial-gradient(circle at 15% 20%, rgba(246, 196, 83, 0.24), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(15, 118, 110, 0.25), transparent 40%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(246, 244, 239, 0.9));
}

.job-card-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.float-slow {
  animation: float-slow 16s ease-in-out infinite;
}

.float-slower {
  animation: float-slower 20s ease-in-out infinite;
}

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

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