/* =================================
   Space Vanta Theme 1.0
   DNA: Find trigger, Vision, Privilege
   Path: public/header/dna/featured.css

   Hierarchy on desktop:
   - Find      loud, search-field shaped plate (primary tool)
   - Vision    quiet text link with the eye icon
   - Privilege the one highlighted tag (promotion)
   Static visuals only. Hover / click motion comes in a later phase;
   shard classes (.sv-cube--*, .sv-eye__*) are ready to be animated.
   ================================= */

.sv-featured { display: flex; align-items: center; gap: 14px; }

.sv-featured__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  font-weight: 550;
  letter-spacing: 0.02em;
  color: var(--sv-ink);
  white-space: nowrap;
}
.sv-featured__item:focus-visible,
.sv-find-trigger:focus-visible { outline: 2px solid var(--sv-blue); outline-offset: 3px; }

/* ---------- Find trigger: search-field-shaped silver plate ---------- */
.sv-find-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  width: clamp(250px, 26vw, 360px);
  padding: 0 16px 0 10px;
  box-sizing: border-box;
  color: var(--sv-ink);
  cursor: pointer;
}
.sv-find-trigger::before,
.sv-find-trigger::after {
  content: "";
  position: absolute;
  z-index: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.sv-find-trigger::before {
  inset: 0;
  background: linear-gradient(135deg, #ffffff 0%, #c9cbd1 45%, #f6f4f0 100%);
  transition: background 0.2s ease;
}
.sv-find-trigger::after {
  inset: 1px;
  background: linear-gradient(135deg, #fffefc 0%, #f6f1e8 60%, #ebe4d7 100%);
}
.sv-find-trigger > * { position: relative; z-index: 2; }
.sv-find-trigger:hover::before { background: linear-gradient(135deg, #bcd3ff 0%, var(--sv-blue) 55%, #9ec0ff 100%); }

.sv-find-trigger__label { font-weight: 650; letter-spacing: 0.03em; }
.sv-find-trigger__hint {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 400;
  color: var(--sv-muted);
}

/* ---------- Find: fragmented cube ---------- */
.sv-icon-find { width: 32px; height: 32px; flex: none; overflow: visible; }

.sv-cube {
  stroke: rgba(36, 44, 60, 0.5);
  stroke-width: 0.6;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* resting offsets: the cube is already broken */
.sv-cube--top-b   { transform: translate(-0.9px, 1.1px); }
.sv-cube--left-b  { transform: translate(-0.7px, 0.9px); }
.sv-cube--right-a { transform: translate(0.6px, -0.5px); }
.sv-cube--right-b { transform: translate(1px, 1px); }

.sv-cube__seam {
  fill: none;
  stroke: var(--sv-blue);
  stroke-width: 1.2;
  stroke-linecap: round;
  filter: url(#svg-glow);
}
.sv-cube__seam--soft { stroke-width: 0.8; opacity: 0.8; }
.sv-cube__core { filter: url(#svg-glow); }
.sv-cube__float { stroke: rgba(36, 44, 60, 0.45); stroke-width: 0.5; stroke-linejoin: round; }

/* ---------- Vision: quiet link + linear geometric eye ---------- */
.sv-featured__vision { padding: 0 8px; }
.sv-featured__vision:hover { color: var(--sv-blue); }
.sv-icon-vision { width: 40px; height: 25px; flex: none; overflow: visible; }

.sv-eye__lid {
  fill: none;
  stroke: var(--sv-ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sv-eye__tip {
  fill: none;
  stroke: var(--sv-blue);
  stroke-width: 1.6;
  stroke-linecap: round;
  filter: url(#svg-glow);
}
.sv-eye__ray {
  stroke: var(--sv-blue);
  stroke-width: 1.4;
  stroke-linecap: round;
  filter: url(#svg-glow);
}
.sv-eye__iris { stroke: var(--sv-ink); stroke-width: 1; stroke-linejoin: round; }
.sv-eye__facet { fill: rgba(120, 112, 100, 0.32); }
.sv-eye__axis { stroke: rgba(27, 34, 48, 0.55); stroke-width: 0.6; }
.sv-eye__pupil {
  filter: url(#svg-glow);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease;
}

/* ---------- Privilege: chamfered metallic tag ---------- */
.sv-featured__privilege {
  height: 38px;
  padding: 0 18px 0 14px;
  gap: 8px;
  color: var(--sv-ink);
  filter: drop-shadow(0 6px 10px rgba(29, 107, 255, 0.18)) drop-shadow(0 1px 1px rgba(70, 48, 24, 0.12));
}
.sv-featured__privilege > :not(.sv-priv__shape):not(.sv-priv__shard) { position: relative; z-index: 2; }

.sv-priv__shape {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  background: linear-gradient(
    135deg,
    #ffffff 0%, #e9e9ec 32%, #c1c4cc 56%, #f1efeb 78%, #ffffff 100%
  );
}
/* inner face + fracture highlight */
.sv-priv__shape::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background:
    linear-gradient(112deg, transparent 0 48%, rgba(255, 255, 255, 0.85) 48% 53%, transparent 53% 100%),
    linear-gradient(135deg, #fffefc 0%, #f1ede5 55%, #ddd7cb 100%);
}
/* bottom blue edge of light */
.sv-priv__shape::after {
  content: "";
  position: absolute;
  left: 8px; right: 14px; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--sv-blue) 22%, var(--sv-blue-2) 78%, transparent 100%);
  box-shadow: 0 0 10px var(--sv-blue-glow);
}

/* detached shard at the top-right corner */
.sv-priv__shard {
  position: absolute;
  top: -5px;
  right: -7px;
  width: 11px;
  height: 11px;
  z-index: 1;
  clip-path: polygon(0 0, 100% 35%, 30% 100%);
  background: linear-gradient(135deg, #ffffff 0%, #b9c1ce 100%);
  filter: drop-shadow(0 0 3px var(--sv-blue-glow));
}
.sv-priv__shard::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--sv-blue);
}

.sv-featured__privilege .sv-icon-gem { width: 16px; height: 16px; flex: none; }
.sv-icon-gem__core { filter: url(#svg-glow); }

.sv-featured__privilege .sv-featured__label { font-weight: 650; letter-spacing: 0.03em; }
.sv-featured__tag {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sv-muted);
}

.sv-featured__privilege:hover .sv-priv__shape::after { height: 3px; }

/* member state: label hidden, tag becomes the title, edge glows stronger */
.sv-featured__privilege[data-state="member"] .sv-featured__label { display: none; }
.sv-featured__privilege[data-state="member"] .sv-featured__tag {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--sv-ink);
}
.sv-featured__privilege[data-state="member"] .sv-priv__shape::after {
  box-shadow: 0 0 14px var(--sv-blue-glow), 0 0 4px var(--sv-blue);
}

/* ---------- Condensed (follow state): compact tools ---------- */
.sv-header.is-condensed .sv-find-trigger { width: auto; height: 42px; padding-right: 18px; }
.sv-header.is-condensed .sv-find-trigger__hint { display: none; }
.sv-header.is-condensed .sv-featured__vision .sv-featured__label { display: none; }
.sv-header.is-condensed .sv-featured { gap: 8px; }

/* ---------- Tablet ---------- */
@media (max-width: 1280px) {
  .sv-find-trigger { width: auto; padding-right: 18px; }
  .sv-find-trigger__hint { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  /* Find stays in the top bar as an icon plate; Vision / Privilege live in the strip */
  /* a word next to the cube: first-time visitors must know what it is */
  .sv-find-trigger { width: auto; height: 38px; padding: 0 14px 0 8px; gap: 6px; justify-content: center; }
  .sv-find-trigger__label { display: inline; font-size: 13px; }
  .sv-icon-find { width: 26px; height: 26px; }
}