/* ============================================================
   TalentPick — THE TEN (stage: board · wish · particle mark)
   Layout: board left · copy centre · particle silhouette right,
   thin progress rail along the bottom edge.
   ============================================================ */

.ten { background: var(--paper); }
/* the stage block runs straight into the next section — no paper gutter */
.ten { padding-bottom: 0; }
.ten .section-head { margin-bottom: clamp(26px, 3.4vw, 48px); }

/* ---------- stage shell ---------- */
.ten-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(480px, 48vw, 760px);
  padding: clamp(30px, 3.6vw, 56px) clamp(64px, 6.2vw, 108px) clamp(58px, 6.4vw, 96px);
  background: #16120f;
  color: var(--paper);
  --c: #e2551f;
  --rail: rgba(255, 255, 255, 0.42);
  --thumb: #e8672c;
}

/* the colour field: one flat colour, softened by big blurred blobs */
.stage-wash {
  position: absolute;
  inset: -12%;
  z-index: -3;
  background-color: var(--c);
  filter: brightness(0.76) saturate(0.94);
  pointer-events: none;
  transition: background-color 0.85s var(--ease);
}
.stage-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 48% at 24% 14%, rgba(255, 255, 255, 0.34), transparent 68%),
    radial-gradient(44% 46% at 78% 64%, rgba(0, 0, 0, 0.26), transparent 70%),
    radial-gradient(66% 60% at 50% 112%, rgba(0, 0, 0, 0.46), transparent 74%);
  filter: blur(80px);
}

/* faint graph-paper dots — the Arknights grid, turned down */
.stage-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.17) 1px, transparent 1.4px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(130% 110% at 50% 30%, #000 34%, transparent 88%);
  mask-image: radial-gradient(130% 110% at 50% 30%, #000 34%, transparent 88%);
}

/* the giant wordmark bleeding off the bottom-right corner */
.stage-mark {
  position: absolute;
  right: -0.04em;
  bottom: -0.1em;
  z-index: -1;
  font-family: var(--sans);
  font-size: clamp(76px, 13.4vw, 220px);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.045em;
  color: #000;
  opacity: 0.1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ---------- stage row ---------- */
.stage-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(18px, 3.2vw, 62px);
  width: 100%;
  /* on ultrawide screens keep the composition the size it was designed at,
     otherwise the silhouette stretches and the particles spread thin */
  max-width: 2240px;
  min-height: clamp(380px, 21vw, 500px);
  margin-inline: auto;
}

/* ---------- board ---------- */
.board-wrap {
  position: relative;
  flex: 0 0 auto;
  width: clamp(236px, 25vw, 430px);
}
.board-glow {
  position: absolute;
  inset: -16% -12% -18%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), transparent 72%);
  filter: blur(26px);
  pointer-events: none;
}
.board-plate { position: relative; }
.board-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* ---------- hotspots ---------- */
.board-hots { position: absolute; inset: 0; }
.hot {
  position: absolute;
  width: var(--r, 21%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.hot::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.hot:hover,
.hot:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  outline: none;
}
.hot:hover::after,
.hot:focus-visible::after { border-color: rgba(255, 255, 255, 0.75); transform: scale(1.04); }
.hot.is-on { background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9); }
.hot:active { transform: translate(-50%, -50%) scale(0.97); }

/* ---------- copy ---------- */
.ten-detail {
  position: relative;
  flex: 0 0 auto;
  width: clamp(300px, 30vw, 480px);
  -webkit-user-select: none;
  user-select: none;
}
.ten-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.ten-kicker i { font-style: normal; color: rgba(255, 255, 255, 0.32); }
.ten-name {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.85rem, 3.5vw, 3.15rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 800;
}
.ten-rule {
  position: relative;
  height: 1px;
  margin: clamp(14px, 1.6vw, 20px) 0 clamp(14px, 1.6vw, 20px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.06) 62%, transparent);
}
.ten-rule span {
  position: absolute;
  left: -3px;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
}
.ten-story {
  margin: 0;
  max-width: 44ch;
  font-family: var(--serif);
  font-size: clamp(0.98rem, 1.02vw, 1.12rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.86);
}
.ten-film-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(18px, 2vw, 26px);
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.42);
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ten-film-link i { font-style: normal; color: rgba(255, 255, 255, 0.3); }
.ten-film-link:hover { color: #fff; border-color: rgba(255, 255, 255, 0.85); }

/* the copy slides out and back in when the block changes */
.ten-detail .ten-kicker,
.ten-detail .ten-name,
.ten-detail .ten-rule,
.ten-detail .ten-story,
.ten-detail .ten-film-link {
  will-change: transform, opacity;
}
.ten-stage[data-dir="next"] .ten-detail.is-out > *,
.ten-stage[data-dir="prev"] .ten-detail.is-out > * {
  transition: opacity 0.16s var(--ease), transform 0.22s var(--ease);
  opacity: 0;
}
.ten-stage[data-dir="next"] .ten-detail.is-out > * { transform: translateY(-10px); }
.ten-stage[data-dir="prev"] .ten-detail.is-out > * { transform: translateY(10px); }
.ten-detail.is-in > * {
  animation: tenIn 0.5s cubic-bezier(0.22, 0.9, 0.24, 1) both;
}
.ten-detail.is-in > *:nth-child(2) { animation-delay: 0.04s; }
.ten-detail.is-in > *:nth-child(3) { animation-delay: 0.08s; }
.ten-detail.is-in > *:nth-child(4) { animation-delay: 0.12s; }
.ten-detail.is-in > *:nth-child(5) { animation-delay: 0.16s; }
@keyframes tenIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- particle silhouette ---------- */
.stage-sil {
  position: relative;
  flex: 1 1 auto;
  min-width: 620px;
  align-self: stretch;
  min-width: 0;
  min-height: clamp(180px, 23vw, 300px);
  pointer-events: none;
}
.stage-sil canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- arrows ---------- */
.stage-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.22s var(--ease), transform 0.22s var(--ease), color 0.22s var(--ease);
}
.stage-arrow svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stage-arrow--prev { left: clamp(6px, 1.1vw, 20px); }
.stage-arrow--next { right: clamp(6px, 1.1vw, 20px); }
.stage-arrow:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.stage-arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.stage-arrow--next:hover { transform: translateY(-50%) translateX(2px); }
.stage-arrow:active { transform: translateY(-50%) scale(0.94); }
.stage-arrow:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; }

/* ---------- bottom rail (reads top-left → bottom-right) ---------- */
.stage-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(20px, 2.6vw, 38px);
  height: 3px;
  background: var(--rail);
  z-index: 2;
}
.rail-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10%;
  height: clamp(13px, 1.15vw, 18px);
  margin-top: calc(clamp(13px, 1.15vw, 18px) / -2);
  background: var(--thumb);
  box-shadow: 0 0 22px rgba(232, 103, 44, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform 0.62s cubic-bezier(0.22, 0.86, 0.2, 1);
}
.rail-slot {
  position: absolute;
  top: -11px;
  width: 10%;
  height: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rail-slot:hover { background: rgba(255, 255, 255, 0.1); }
.rail-slot:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 1px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .stage-mark { font-size: clamp(64px, 15vw, 150px); }
  .ten-kicker { margin-bottom: 8px; }
}

@media (max-width: 900px) {
  .ten-stage {
    padding: clamp(34px, 7vw, 54px) clamp(16px, 4vw, 26px) clamp(62px, 9vw, 84px);
    min-height: 0;
  }
  .stage-row {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(22px, 5vw, 34px);
  }
  .board-wrap { width: min(330px, 74vw); }
  .ten-detail { width: 100%; max-width: 46ch; }
  .stage-sil {
    position: absolute;
    right: -8%;
    top: -6%;
    width: 66%;
    aspect-ratio: 1;
    min-height: 0;
    opacity: 0.62;
  }
  .stage-rail {
    left: 58px;
    right: 58px;
    bottom: 30px;
  }
  .stage-arrow {
    top: auto;
    bottom: 8px;
    transform: none;
    width: 46px;
    height: 46px;
  }
  .stage-arrow--prev { left: 8px; }
  .stage-arrow--next { right: 8px; }
  .stage-arrow--prev:hover, .stage-arrow--next:hover { transform: none; }
  .stage-arrow:active { transform: scale(0.94); }
}

@media (max-width: 560px) {
  .board-wrap { width: min(300px, 80vw); }
  .board-img { border-radius: 16px; }
  .ten-name { font-size: 1.9rem; }
  .stage-mark { opacity: 0.08; }
  .stage-sil { width: 78%; right: -14%; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-wash, .hot, .rail-thumb, .stage-arrow, .ten-film-link { transition: none; }
  .ten-detail.is-in > * { animation: none; }
  .rail-thumb { transition: none; }
}

/* stage height follows the viewport so THE TEN stays one screen */
@media (min-width: 901px) {
  .ten-stage { min-height: clamp(360px, 56vh, 640px); }
}

/* keep THE TEN inside one screen: trim the stage and the board a little */
@media (min-width: 901px) {
  .stage-row { min-height: clamp(300px, 38vh, 470px); }
  .board-wrap { width: clamp(216px, 21vw, 360px); }
  .ten .section-head { margin-bottom: clamp(18px, 2.2vw, 34px); }
}

/* THE TEN: the coloured stage fills whatever height is left in the screen */
@media (min-width: 901px) {
  .ten { padding-bottom: 0; }
  .ten .ten-stage { flex: 1 1 auto; }
}