/* [project]/src/app/tools/talents/talents.css [app-client] (css) */
.talent-directory {
  --td-gold: #dabc80;
  --td-ink: #e9ddc6;
  --td-muted: #aeb5b5;
  --td-line: #8c754345;
  --td-gutter: clamp(20px, 4vw, 64px);
  color: var(--td-ink);
  background: #0d1418;
  padding-bottom: clamp(48px, 7vw, 96px);
  overflow-x: clip;
}

.talent-directory a:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #eec986;
}

.talent-directory-intro {
  max-width: 1320px;
  padding: clamp(44px, 7vw, 96px) var(--td-gutter) clamp(28px, 4vw, 48px);
  margin: 0 auto;
}

.talent-directory-eyebrow {
  letter-spacing: .22em;
  color: var(--td-gold);
  font-size: 11px;
  display: block;
}

.talent-directory-intro h1 {
  font: 400 clamp(34px, 5.4vw, 60px) / 1.08 var(--font-title);
  max-width: 16ch;
  margin: 18px 0 0;
}

.talent-directory-intro h1 em {
  color: var(--td-gold);
  font-style: italic;
}

.talent-directory-intro > p {
  max-width: 62ch;
  color: var(--td-muted);
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.85;
}

.talent-directory-points {
  max-width: 1320px;
  padding: 0 var(--td-gutter) clamp(32px, 5vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: 0 auto;
  list-style: none;
  display: grid;
}

.talent-directory-points li {
  border-top: 1px solid var(--td-line);
  padding-top: 18px;
}

.talent-directory-points svg {
  color: var(--td-gold);
}

.talent-directory-points strong {
  font: 400 17px var(--font-title);
  color: var(--td-ink);
  margin: 10px 0 6px;
  display: block;
}

.talent-directory-points p {
  color: var(--td-muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
}

.talent-directory-grid {
  max-width: 1320px;
  padding: 0 var(--td-gutter);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0 auto;
  display: grid;
}

.talent-class {
  isolation: isolate;
  border: 1px solid var(--td-line);
  min-height: 300px;
  animation: .55s cubic-bezier(.22, 1, .36, 1) backwards talent-class-in;
  animation-delay: calc(var(--i) * 60ms);
  background: #111c22;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .35s, box-shadow .35s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.talent-class img {
  z-index: -2;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(.8);
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .35s;
  position: absolute;
  inset: 0;
}

.talent-class:after {
  content: "";
  z-index: -1;
  background: linear-gradient(0deg, #070e12f2 6%, #08121799 46%, #0000 88%);
  position: absolute;
  inset: 0;
}

.talent-class:hover {
  border-color: var(--class-accent, var(--td-gold));
  transform: translateY(-4px);
  box-shadow: 0 18px 40px #0009;
}

.talent-class:hover img {
  filter: saturate(1.05);
  transform: scale(1.06);
}

.talent-class-name {
  font: 400 25px var(--font-title);
  color: var(--class-accent, var(--td-ink));
  align-items: center;
  gap: 12px;
  display: flex;
}

.talent-class-name img {
  z-index: 0;
  object-fit: contain;
  filter: none;
  border: 1px solid #0006;
  width: 34px;
  height: 34px;
  position: static;
}

.talent-class-specs {
  color: #c3cac6;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
}

.talent-class-go {
  letter-spacing: .14em;
  color: var(--td-gold);
  opacity: 0;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 11px;
  transition: opacity .3s, transform .3s;
  display: flex;
  transform: translateY(6px);
}

.talent-class:hover .talent-class-go, .talent-class:focus-visible .talent-class-go {
  opacity: 1;
  transform: none;
}

.talent-directory-foot {
  max-width: 1320px;
  padding: 0 var(--td-gutter);
  color: var(--td-muted);
  margin: clamp(36px, 5vw, 60px) auto 0;
  font-size: 12px;
  line-height: 1.85;
}

.talent-directory-foot strong {
  font: 400 16px var(--font-title);
  color: var(--td-ink);
  margin-bottom: 6px;
  display: block;
}

@media (min-width: 980px) {
  .talent-directory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .talent-class {
    min-height: 340px;
  }
}

@keyframes talent-class-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .talent-class, .talent-class img, .talent-class-go {
    transition: none;
    animation: none;
  }

  .talent-class-go {
    opacity: 1;
    transform: none;
  }

  .talent-class:hover, .talent-class:hover img {
    transform: none;
  }
}

/*# sourceMappingURL=src_app_tools_talents_talents_0b3shnv.css.map*/