/* ============================================================
   Homepage feature spotlight — tabs + animated module screens
   Used with fake-screens.css (vignette internals).
   ============================================================ */

.fxD-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: stretch; margin-top: 14px; }
.fxD-tabs { display: flex; flex-direction: column; gap: 8px; }
.fxD-tab {
  position: relative; display: flex; align-items: center; gap: 12px; text-align: left;
  font-family: var(--font); font-size: 15px; font-weight: 700; letter-spacing: -.1px; color: var(--ink-2);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 14px 16px; cursor: pointer; overflow: hidden;
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.fxD-tab:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.fxD-tab.on { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-card); color: var(--ink); }
.fxD-tab .chip-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .25s, color .25s; }
.fxD-tab .chip-ic svg { width: 15px; height: 15px; }
.fxD-tab.on .chip-ic { background: linear-gradient(120deg, var(--accent-deep), var(--accent-bright)); color: #fff; }
.fxD-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent-tint); opacity: 0; }
.fxD-tab.on .fxD-prog { opacity: 1; }
.fxD-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright)); animation: fxd-fill 6.2s linear forwards; }
@keyframes fxd-fill { from { width: 0; } to { width: 100%; } }

.fxD-frame {
  position: relative; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow-pop); overflow: hidden;
  display: flex; flex-direction: column;
}
.fxD-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.fxD-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.fxD-shots { position: relative; }

/* faded bottom (chosen treatment) */
.fxD-fade .fxD-frame {
  border-bottom: none;
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 68%, transparent 96%);
}

@media (max-width: 920px) {
  .fxD-wrap { grid-template-columns: 1fr; }
  .fxD-tabs { flex-direction: row; flex-wrap: wrap; }
  .fxD-tab { flex: 1 1 auto; justify-content: center; padding: 11px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .fxD-prog i { animation: none; width: 100%; }
}