/* Warm satin surfaces in the page's paper, ink and red palette. */
.career-selection-head { position: relative; z-index: 5; }
.career-selection .career-card {
  --card-rotate-x: 0deg;
  --card-rotate-y: 0deg;
  --card-glow-x: 28%;
  --card-glow-y: 18%;
  --card-rest-shadow: inset 0 1px 0 #fffaf0, inset 0 -1px 0 #c9b99c, 0 2px 0 #cabb9f, 0 3px 0 #b09d7e, 0 7px 10px -6px rgba(68, 50, 25, .22), 0 15px 25px -15px rgba(68, 50, 25, .19);
  --card-raised-shadow: inset 0 1px 0 #fffcf4, inset 0 -1px 0 #c6b499, 0 2px 0 #cebea3, 0 3px 0 #ac9878, 0 12px 18px -10px rgba(68, 48, 23, .32), 0 25px 32px -18px rgba(68, 48, 23, .26);
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 13px;
  background:
    linear-gradient(112deg, #fbf5e7 0%, #f5ecd9 18%, #fffaf0 31%, #eee1ca 52%, #faf2e1 75%, #f1e5cf 100%) padding-box,
    linear-gradient(125deg, #fffcf1 3%, #bbaa8d 35%, #fff9e9 60%, #a89677 100%) border-box;
  box-shadow: var(--card-rest-shadow);
  transform: perspective(1100px) rotateX(0deg) rotateY(0deg);
  transform-origin: center center;
  transition: transform .4s cubic-bezier(.2, .75, .25, 1), box-shadow .35s ease;
  -webkit-tap-highlight-color: transparent;
}
.career-selection .career-card::before,
.career-selection .career-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.career-selection .career-card::before {
  inset: 3px;
  border: 1px solid rgba(255, 251, 235, .72);
  border-bottom-color: rgba(150, 124, 85, .2);
  border-radius: 10px;
  background: repeating-linear-gradient(0deg, rgba(117, 91, 53, .014) 0, rgba(117, 91, 53, .014) 1px, rgba(255, 251, 235, .035) 1px, rgba(255, 251, 235, .035) 3px);
}
.career-selection .career-card::after {
  inset: 1px;
  border-radius: 12px;
  background: radial-gradient(ellipse at var(--card-glow-x) var(--card-glow-y), rgba(255, 252, 241, .8), rgba(255, 251, 237, .16) 38%, transparent 68%);
  opacity: .38;
  transition: opacity .35s ease;
}
.career-selection .career-card h3 {
  text-shadow: none;
}
.career-selection .career-card .salary {
  color: var(--red-dark);
  text-shadow: none;
}
.career-selection .career-card .scene,
.career-selection .career-facts dt,
.career-selection .career-card .salary .unit { color: #685e4e; }
.career-selection .career-card .career-facts {
  border-top-color: rgba(139, 114, 76, .3);
  box-shadow: 0 -1px 0 rgba(255, 251, 238, .7);
}
.career-selection .career-facts > div + div { border-left-color: rgba(139, 114, 76, .28); }
.career-selection .career-facts dt .flow-icon { opacity: .9; }
.career-selection .career-card-open::after { border-radius: 13px; }

/* Only deliberate pointer / keyboard interaction lifts the plaque noticeably. */
@media (hover: hover) and (pointer: fine) {
  .career-selection .career-card {
    animation: career-plaque-float 6s ease-in-out infinite;
  }
  .career-selection .career-card:nth-child(2n) { animation-delay: -2.5s; }
  .career-selection .career-card:nth-child(3n) { animation-delay: -4s; }
  .career-selection .career-card:hover,
  .career-selection .career-card.is-tilting {
    z-index: 2;
    animation-play-state: paused;
    border-color: transparent;
    transform: perspective(1100px) translateY(-5px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y));
    box-shadow: var(--card-raised-shadow);
  }
  .career-selection .career-card.is-tilting { transition-duration: .16s, .35s; }
  .career-selection .career-card:hover::after,
  .career-selection .career-card.is-tilting::after { opacity: .8; }
}
.career-selection .career-card:has(.career-card-open:focus-visible) {
  animation-play-state: paused;
  border-color: transparent;
  outline: 2px solid var(--red-dark);
  outline-offset: 5px;
  transform: perspective(1100px) translateY(-4px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y));
  box-shadow: var(--card-raised-shadow);
}
.career-selection .career-card:active {
  transform: perspective(1100px) translateY(-1px) rotateX(0deg) rotateY(0deg);
  box-shadow: var(--card-rest-shadow);
  transition-duration: .1s;
}
body.profile-open .career-selection .career-card { animation-play-state: paused; }
@keyframes career-plaque-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -2px; }
}
@media (hover: none), (pointer: coarse) {
  .career-selection .career-card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: var(--card-rest-shadow);
  }
}
@media (prefers-reduced-motion: reduce) {
  .career-selection .career-card,
  .career-selection .career-card:hover,
  .career-selection .career-card.is-tilting,
  .career-selection .career-card:active,
  .career-selection .career-card:has(.career-card-open:focus-visible) {
    animation: none;
    transform: none;
    translate: none;
    transition: none;
  }
  .career-selection .career-card::after { transition: none; }
}
@media print {
  .career-selection .career-card { animation: none; transform: none; translate: none; box-shadow: none; background: white; border-color: #aaa; }
  .career-selection .career-card::before,
  .career-selection .career-card::after { display: none; }
}